Original purpose of <input type="hidden">?

javascript html history
Uooo picture Uooo · Apr 30, 2013 · Viewed 134.3k times · Source

I am curious about the original purpose of the <input type="hidden"> tag.

Nowadays it is often used together with JavaScript to store variables in it which are sent to the server and things like that.

Therefore, the <input type="hidden"> existed before JavaScript, so what was its original purpose? 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. Or do I get something wrong in the history of it and <input type="hidden"> was always supposed to be used together with JavaScript?

If possible, please also give references in your answers.

Answer

BoltClock picture BoltClock · Apr 30, 2013

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.

Related questions

SecurityError: The operation is insecure - window.history.pushState()

I'm getting this error in Firefox's Console: SecurityError: The operation is insecure and the guilty is HTML5 feature: window.history.pushState() when I try to load something with AJAX. It is supposed to load some data but Javascript stops executing …

Read More
When the back button triggers popState how can I prevent a page refresh?

I am trying to modify the content in my page without a reload. Currently my code reads: window.onpopstate = function(event){ // Ajax Request the Page and replace content with new content }; This works when I push a state then trigger …

Read More
window bind POPSTATE

Given the following: $(window).bind("popstate", function() { alert('popstate'); }); On first load, the alert fires with FireFox and Chrome but not Safari. Why is that? Anyone else seen this and know how to best solve for this?

Read More