In this section, we will learn what <input type = “hidden”> element is and how to use it.

What is input type hidden in HTML?

HTML <input type = “hidden”> allows the developer to insert a value to a form in a document that is hidden from users to see and un-modifiable as well (which means users can’t see the element and its value).

The value of the hidden element will be submitted along with other form data when users submit that form.

You might be wondering what’s the use case of this element if users can’t add any value directly? Well, sometimes we want to send the result of users’ interaction in a document as a value that is calculated, to a server! For example, let’s say you have a form in which sends the shopping orders of users to a server! In this form, we might also want to send the id of that user along with its orders.

So this id value could be set as the value of the hidden element programmatically (with the help of programming languages like JavaScript) without bothering users!

Basically, if there’s a form that needs more information other than those that users add, we can use input elements of type hidden to add those data to the form without bothering our users.

Note: browsers won’t render anything on a page as a replacement for using a hidden element.

HTML input type hidden Syntax:

<input type = ”hidden” value = “value”>

HTML input type hidden Values

As mentioned before, elements of type hidden, does not take values directly from users! So we need to add the value ourselves! This is done with the help of the value attribute.

Just put the value you want to send to a server in the `value` attribute and that will be sent to a server at submit time.

Example: using <input type=”hidden “> in HTML

See the Pen using <input type="hidden "> in HTML by Omid Dehghan (@odehghan) on CodePen.