Original purpose of ?

Question

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.

HTML 2.0 was released in November 1995, containing already the specification for input type="hidden"
JavaScript was released March 1996

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.

Off topic for SO though maintaining state would also be my pick — Phil, Apr 30 '13 at 06:41
Agreed, to allow tracking of pre-populated state (e.g. of a Surrogate PK during an edit) which would be automatically included in a submitted form POST / GET — StuartLC, Apr 30 '13 at 06:44
Existing *before* JavaScript *supports* reasons to have them even more (that is, it doesn't detract from any reason as this question seems to imply) - there was no JavaScript to "store variables" or call AJAX or stub in "non hidden" input fields before a form submit .. there was also no CSS for other perverse hacks such as making a normal text input hidden. — user2246674, Apr 30 '13 at 06:45

score 108 · Accepted Answer · edited Jun 20 '20 at 09:12

108

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.

edited Jun 20 '20 at 09:12

Community

1
1

answered Apr 30 '13 at 06:43

BoltClock

700,868
160
1,392
1,356

The one thing I don't like about using 'hidden' inputs to store data is that that data can be manipulated by users, granted, probably only someone that understands HTML and how to modify it via dev tools, but could have bad implications on the database if modification of those values corrupts other data (for instance, if you're storing the primary key reference and it's manually changed by the user). – HaulinOats Jun 16 '16 at 15:53
3

@Brett84c: That's why you should always validate your input and never trust the client ;) – BoltClock Jun 16 '16 at 17:31
Exactly, I was just throwing that out there for new developers to be aware of the possible dangers involved. – HaulinOats Jun 16 '16 at 21:03
2

Nothing about those dangers is specific to 'hidden' inputs - *anything* sent to the client can be manipulated before it comes back. Cookies or JS-based alternatives are just the same. – FLHerne Dec 09 '16 at 09:58

score 10 · Answer 2 · answered Apr 30 '13 at 06:45

I'll provide a simple Server Side Real World Example here, say if the records are looped and each record has a form with a delete button and you need to delete a specific record, so here comes the hidden field in action, else you won't get the reference of the record to be deleted in this case, it will be id

For example

<?php
    if(isset($_POST['delete_action'])) {
        mysqli_query($connection, "DELETE FROM table_name 
                                   WHERE record_id = ".$_POST['row_to_be_deleted']);
                                   //Here is where hidden field value is used
    }

    while(condition) {
?>
    <span><?php echo 'Looped Record Name'; ?>
    <form method="post">
        <input type="hidden" name="row_to_be_deleted" value="<?php echo $record_id; ?>" />
        <input type="submit" name="delete_action" />
    </form>
<?php
    }
?>

Good example, except real code should use prepared statements or another way to securely handle SQL input. — Matthew Flaschen, Apr 22 '14 at 01:16

Chuck Norris · Answer 3 · 2013-04-30T07:02:57.547

8

In short, the original purpose was to make a field which will be submitted with form's submit. Sometimes, there were need to store some information in hidden field(for example, id of user) and submit it with form's submit.

From HTML September 22, 1995 specification

An INPUT element with `TYPE=HIDDEN' represents a hidden field.The user does not interact with this field; instead, the VALUE attribute specifies the value of the field. The NAME and VALUE attributes are required.

edited Apr 30 '13 at 07:02

answered Apr 30 '13 at 06:42

Chuck Norris

15,207
15
92
123

1

Could you please elaborate on that answer and/or give some reference to this behavior of submitting the hidden fields after a form's submit? – GitaarLAB Apr 30 '13 at 06:46
@GitaarLAB, I gave an example(user Id)... Anyway, there are a lot of examples in web. For example http://www.echoecho.com/htmlforms07.htm – Chuck Norris Apr 30 '13 at 06:49
1

I'm sorry, to me the line: `original purpose was to make a field which will be submitted *after* form's submit` is ambiguous. It can be interpreted as: 'after the form is done posting its data, *then* the hidden field will be submitted (to a mysterious place)'. Hence, my comment above. – GitaarLAB Apr 30 '13 at 06:56
1

I get it :) Thanks for your comment, I've edited my answer. It was just misspelling (haven't reach guru level in english yet :D). – Chuck Norris Apr 30 '13 at 07:04

score 6 · Answer 4 · answered Apr 30 '13 at 06:49

6

The values of form elements including type='hidden' are submitted to the server when the form is posted. input type="hidden" values are not visible in the page. Maintaining User IDs in hidden fields, for example, is one of the many uses.

SO uses a hidden field for the upvote click.

<input value="16293741" name="postId" type="hidden">

Using this value, the server-side script can store the upvote.

answered Apr 30 '13 at 06:49

c.P.u1

16,664
6
46
41

Haha, good catch! And when I append an "x" at the end of the value an error occurs when upvoting :D – Uooo Apr 30 '13 at 06:55
@Uooo And you can unhide it or directly change the value. You can change the value to a different answer. You can then click on the upvote button and it's logged as an upvote for a different answer. ;) – Geoffrey Hale Jun 25 '15 at 18:49

score 5 · Answer 5 · edited Jul 13 '18 at 20:09

basically hidden fields will be more useful and advantages to use with multi step form. we can use hidden fields to pass one step information to next step using hidden and keep it forwarding till the end step.

CSRF tokens.

Cross-site request forgery is a very common website vulnerability. Requiring a secret, user-specific token in all form submissions will prevent CSRF attacks since attack sites cannot guess what the proper token is and any form submissions they perform on the behalf of the user will always fail.

Save state in multi-page forms.

If you need to store what step in a multi-page form the user is currently on, use hidden input fields. The user doesn't need to see this information, so hide it in a hidden input field.

General rule: Use the field to store anything that the user doesn't need to see, but that you want to send to the server on form submission.

Original purpose of ?

5 Answers5

Linked

Related