<input type="hidden">
The <input type="hidden"> HTML element represents a form field that is not shown visually but is still included in the form submission. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.
Overview
The <input type="hidden"> HTML element represents a form field that is not shown visually but is still included in the form submission. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.
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.
Related links
Powered by web-features