Hidden input
Send form metadata with <input type="hidden">.
What is a hidden input?
Sometimes a form carries data the user does not see but the server still needs: an order id, a CSRF token, a session value. For these you use <input type="hidden">.
A hidden input takes no space on screen. Still, with its name and value it travels to the server when the form is submitted.
Example: <input type="hidden" name="product_id" value="4271">. The user does not see it; yet on submit the server receives product_id=4271.
Uses of a hidden input
A hidden input has three common uses:
- CSRF token: a random value from the server to block forged submissions.
- Record id: telling the server which record is being edited (for example
product_id). - Session or step: marking which step a multi-step form is on.
A hidden input is not a security measure; a user can inspect the HTML and read the value. Use it only for data the user should not need to change.
Exercise Write an order form with hidden inputs
Add a <form> inside body. Put a visible <input type="text" name="full_name"> in it. Then add two hidden inputs: one with name="product_id" and value="4271", the other with name="csrf_token" and value="abc123".
Show example solution
<body>
<form>
<label for="name">Full name</label>
<input type="text" id="name" name="full_name">
<input type="hidden" name="product_id" value="4271">
<input type="hidden" name="csrf_token" value="abc123">
</form>
</body>Test yourself
-
When is <input type="hidden"> a good fit?
- To hide the page title
- To hide a button
- To send a form id to the server
- To hide a paragraph
Show answer
To send a form id to the server — Correct. A hidden input carries data (such as a form id) to the server without showing it.
-
Complete the hidden input
<input type="____" name="product_id" value="4271">Show answer
<input type="hidden" name="product_id" value="4271"> -
Match each use to its value
- CSRF token
- Random security value
- product_id
- Record id
- step
- Form step
- session_id
- Session id