<input type="hidden">
<input> elements of type hidden let web developers include data that cannot be seen or modified by users when a form is submitted. For example, the ID of the content that is currently being ordered or edited, or a unique security token. Hidden inputs are completely invisible in the rendered page, and there is no way to make it visible in the page's content.
Note: The input and change events do not apply to this input type. Hidden inputs cannot be focused even using JavaScript (e.g., hiddenInput.focus()).
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 1 | 18 | 1 | |
Syntax
<form action="/submit" method="post">
<input type="hidden" name="csrf_token" value="abc123">
<input type="hidden" name="user_id" value="42">
<button type="submit">Send</button>
</form>Live demo
Campaign metadata
Include tracking metadata in a form submission without exposing it in the UI.
Wizard step state
Persist a current step value in the form while only rendering the next action button.
Profile update token
Attach a server-issued token to a visible form and inspect the final payload.
Use cases
-
Improve form input
Use <input type="hidden"> to make data entry more efficient, guided, or predictable inside real forms.
-
Reduce friction
Apply <input type="hidden"> when the browser can help users complete a task with fewer mistakes or less repetitive work.
Cautions
- Test <input type="hidden"> in your target browsers and input environments before depending on it as a primary behavior.
- Browser assistance can vary, so verify the exact UX with real devices, keyboards, and autofill behavior.
Accessibility
- Keep labels, instructions, validation, and keyboard behavior clear so the enhancement helps rather than surprises users.