What's The Point of Having Hidden Input in HTML? What Are Common Uses for This

What's the point of having hidden input in HTML? What are common uses for this?

They're used to pass data that will be needed when the form is submitted. One of the more common cases would be a form allowing users to edit some existing entry. You'll need to know which entry they're editing so that you can update the correct row in the database when they submit the form. The user doesn't need to edit (or even know) the ID of the entry though, so a hidden field works well here.

Other options

URL parameters:
This could also be done by building the parameters into the url that the form is being submitted to:

<form action="save.php?entry_id=1234">

but this means you have to handle building the URL properly and escaping the data yourself, and the length of URLs servers will accept is limited so it may not work for longer data. So generally using hidden form fields is the easier way to go.

Session variables: When the edit page loads you'd store the entry ID in a session variable, and then retrieve it on the page that saves the changes. That's a lot easier to mess up though; setting up and maintaining sessions may require adding code in several different places, and then their session could expire in between loading and saving, and you have to make sure it works if they have multiple windows or tabs open, and you have to make sure it doesn't do weird things when they hit back/forward. Because of all these potential pitfalls it isn't a great way to solve this problem--passing the id with the data being submitted is a lot more robust.

Cookies: In many languages/frameworks sessions are tracked using cookies, so they're basically the same solution. The pitfalls are the same as for session variables even when sessions are tracked by other methods though.

Original purpose of input type=hidden?

I can only imagine of sending a value from the server to the client which is (unchanged) sent back to maintain a kind of a state.

Precisely. In fact, it's still being used for this purpose today because HTTP as we know it today is still, at least fundamentally, a stateless protocol.

This use case was actually first described in HTML 3.2 (I'm surprised HTML 2.0 didn't include such a description):

type=hidden

These fields should not be rendered and provide a means for servers to store state information with a form. This will be passed back to the server when the form is submitted, using the name/value pair defined by the corresponding attributes. This is a work around for the statelessness of HTTP. Another approach is to use HTTP "Cookies".

<input type=hidden name=customerid value="c2415-345-8563">

While it's worth mentioning that HTML 3.2 became a W3C Recommendation only after JavaScript's initial release, it's safe to assume that hidden fields have pretty much always served the same purpose.

What is input type=hidden used for in HTML?

it is specifying a form value that will including with the post, but not shown on the screen to the user, hence the hidden. In this case it is specifying the max file size that the form should allow to upload. It isn't very secure, since you can craft your own post to send.

Does a hidden input field have to be in a form?

You can place the hidden input outside of the form if you are retrieving the value for an ajax post with jquery. However, if your application must degrade (meaning work without javascript) you should have the hidden input in the form so it gets posted to the server on form submit.

What is the purpose of a read-only input field in HTML?

For dynamic sites, it's great to be able to set the input to read only. There are times when you can't currently accept user input, and want to prevent that. So "readonly" gives you a mechanism. It sometimes is used while an async form is submitting, so that the user can't make changes until the page can confirm that the form was submitted successfully. Or sometimes the page needs to do some other work, and doesn't want the user to change the form until it is done.

Also, sometimes your page is displaying data that is in the current case, well, read-only, but you want to keep it a field. For example, maybe you have a profile form with a user name that can't be changed after the first save, or by the particular user. So you can set it to read-only for the cases it can't be changed. The user can still see it, but can't change it.

Read only also gives you much the same benefits of a hidden field, except that it's not, well, hidden. So if you need information to be submitted with a form, but don't want the user to change it, then using hidden or read only works well. Both of these approaches let you send extra data to the server that I doesn't make sense for the user to provide, but the server needs to know.

As far as an example, look no further than your stack overflow story preferences. That example is another somewhat common case: a field that is selectable but not editable. (However, they chose to not use a real input, just make it look like one, but other times that is not the case)

HTML form rendering with weird hidden input fields

What you describe looks like CSRF Tokens.

What are CSRF tokens?

A CSRF token is a unique, secret, unpredictable value that is generated by the server-side application
and transmitted to the client in such a way that it is included in a
subsequent HTTP request made by the client. When the later request is
made, the server-side application validates that the request includes
the expected token and rejects the request if the token is missing or
invalid.

[...]

How should CSRF tokens be transmitted?

CSRF tokens should be treated as secrets and handled in a secure
manner throughout their lifecycle. An approach that is normally
effective is to transmit the token to the client within a hidden field
of an HTML form that is submitted using the POST method. The token
will then be included as a request parameter when the form is
submitted:

<input type="hidden" name="csrf-token"
value="CIwNZNlR4XbisJF39I8yWnWX9wX4WFoz" />

Source: https://portswigger.net/web-security/csrf/tokens

HTML form with multiple hidden control elements of the same name

The browsers are OK with it. However, how the application library parses it may vary.

Programs are supposed to group identically named items together. While the HTML specification doesn't explicitly say this, it is implicitly stated in the documentation on checkboxes:

Several checkboxes in a form may share
the same control name. Thus, for
example, checkboxes allow users to
select several values for the same
property.

---

Related Topics