input type="hidden"
An <input type="hidden"> submits a name and value with a form without displaying an editable field to the user.
What you will learn
- What a hidden input sends with a form
- Good uses such as identifiers and workflow state
- Why hidden inputs cannot protect secrets or trusted values
Basic example
<form action="/cart" method="post">
<input type="hidden" name="productId" value="42">
<button type="submit">Add to cart</button>
</form>When the form is submitted, the browser includes productId=42 in the form data. The field is not rendered like a text box, and it cannot receive focus from the user.
Hidden does not mean secret
Anyone can inspect the page source or developer tools and change the value before submitting the form. Never place passwords, API keys, authorization decisions, or unverified prices in a hidden input. Validate permissions and important values on the server.
Good uses
- Passing a record identifier between steps of a form.
- Including a non-visual form state that the server can verify.
- Carrying a CSRF token when it is generated and checked securely by the server.