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

Next lesson: File upload

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies