hidden form inputs

Hidden form inputs are used to include data that the user does not see but is sent to the server when the form is submitted. This data can be static values or dynamically set values using JavaScript. Hidden inputs are often used for purposes like storing user IDs, CSRF tokens, or any other metadata that needs to be sent along with the form submission.

Here’s a basic guide on how to use hidden form inputs:

HTML Example

Here is a simple example of an HTML form with hidden inputs:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hidden Form Inputs Example</title>
</head>
<body>
    <form action="/submit" method="POST">
        <label for="username">Username:</label>
        <input type="text" id="username" name="username" required>

        <input type="hidden" name="user_id" value="12345">
        <input type="hidden" name="csrf_token" value="abcd1234">

        <button type="submit">Submit</button>
    </form>
</body>
</html>

Dynamically Setting Hidden Input Values with JavaScript

Sometimes, you might need to set the value of hidden inputs dynamically using JavaScript. Here’s how you can do it:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Hidden Form Inputs Example</title>
</head>
<body>
    <form id="myForm" action="/submit" method="POST">
        <label for="username">Username:</label>
        <input type="text" id="username" name="username" required>

        <input type="hidden" name="user_id" id="user_id">
        <input type="hidden" name="csrf_token" id="csrf_token">

        <button type="submit">Submit</button>
    </form>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Example dynamic values
            var userId = '12345';
            var csrfToken = 'abcd1234';

            // Setting the values of hidden inputs
            document.getElementById('user_id').value = userId;
            document.getElementById('csrf_token').value = csrfToken;
        });
    </script>
</body>
</html>

Usage in Templating Languages

In templating languages, you can also include hidden inputs to pass data. Here’s an example using Nunjucks:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nunjucks Hidden Form Inputs Example</title>
</head>
<body>
    <form action="/submit" method="POST">
        <label for="username">Username:</label>
        <input type="text" id="username" name="username" required>

        <input type="hidden" name="user_id" value="{{ user_id }}">
        <input type="hidden" name="csrf_token" value="{{ csrf_token }}">

        <button type="submit">Submit</button>
    </form>
</body>
</html>

In this Nunjucks example, user_id and csrf_token would be passed from the server-side context when rendering the template.

Conclusion

Hidden form inputs are useful for passing additional data from the client to the server without displaying it to the user. They can be set statically in HTML, dynamically with JavaScript, or through templating languages in server-side rendering contexts. This makes them versatile tools for various form handling scenarios.