HTML Hidden Input: Submitted Values, JavaScript Changes, and Security Limits

input type="hidden" includes a name and value in a form without displaying an input box. name is the submitted field name and value is its value. Users can inspect or change it, so do not use it to protect passwords, permissions, prices, or other sensitive decisions.

When should you use hidden inputs?

Use it to send the target post ID with an editing form, or carry search conditions into the next request. It passes values the user need not type, while the server remains responsible for deciding whether they are valid.

Receiving a post ID does not grant permission to edit that post. The server must identify the user through the authenticated session and check access to the post. Do not trust account details or client IP information solely because the client sent them in hidden fields.

id can locate an element in a script but does not replace its submitted name. A hidden input without name is not included as a name/value entry in ordinary form submission. Even with required, hidden inputs do not participate in browser constraint validation.

Check that invisible values are submitted

Save this complete code as hidden.html and open it in a browser. No server is needed. Submission displays the name/value entries built with FormData rather than making a network request.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Inspect hidden values</title>
  <style>
    body { margin: 24px; font-family: sans-serif; }
    label { display: block; margin: 12px 0; }
    pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
</head>
<body>
  <h1>Choose colors</h1>
  <form id="demo">
    <label><input type="checkbox" name="color" value="blue" checked> Blue</label>
    <label><input type="checkbox" name="color" value="red"> Red</label>
    <input type="hidden" id="size" name="size" value="big">
    <input type="hidden" name="excluded" value="not-sent" disabled>
    <button type="submit">Show submitted values</button>
    <button type="button" id="change">Change hidden value to small</button>
    <button type="button" id="restore">Restore hidden value to big</button>
  </form>
  <p id="status" aria-live="polite">The initial hidden value is big.</p>
  <pre id="result" aria-live="polite"></pre>
  <script>
    const form = document.querySelector('#demo');
    const size = document.querySelector('#size');
    const result = document.querySelector('#result');
    const status = document.querySelector('#status');
    form.addEventListener('submit', (event) => {
      event.preventDefault();
      result.textContent = JSON.stringify([...new FormData(form).entries()], null, 2);
    });
    function setSize(value) {
      size.value = value;
      status.textContent = `Current hidden value: ${value}. Press Show submitted values again.`;
    }
    document.querySelector('#change').addEventListener('click', () => setSize('small'));
    document.querySelector('#restore').addEventListener('click', () => setSize('big'));
  </script>
</body>
</html>

1. Submit initially: color=blue and size=big appear. There is no visible size box, but its value is included. excluded is omitted because it is disabled.
2. Select Red and submit again to get blue and red under the repeated color name. Clear both checkboxes and only size remains.
3. Press the button that changes the hidden value to small and submit again: size=small appears. Hidden values can be changed through JavaScript too.
4. Restore big with the restore button and submit to confirm. The change button is for observing the example, not a feature that every real service needs.

Send the form to a real server

For a real service, set action to an existing processing route and choose a supported method such as method="post". The example’s submit handler blocks requests; remove it or replace it with server-request code to send data. Server form-processing features receive hidden fields like ordinary text fields.

When receiving several checkboxes with one name, check the server framework’s array and multiple-value rules. Some parsers read only the last repeated value. The JavaScript output preserves repeated names so you can observe the difference.

Do not confuse hiding with security

Hidden values are visible in HTML source, developer tools, and network requests. HTTPS does not hide the value from the user sending it. When receiving a product ID, look up the product and price on the server and validate allowed size values against trusted server information.

A hidden field can carry a CSRF (Cross-Site Request Forgery) token. Protection comes from proper server-side token issuance and validation. Putting an arbitrary fixed string in a hidden input does not by itself prevent forged requests.

The MDN hidden input reference explains its behavior and exclusion from validation.