< 输入类型 = “隐藏”> 的原始用途?

我对 <input type="hidden">标签的原始用途很好奇。

现在它经常和 JavaScript 一起用来存储发送到服务器的变量之类的东西。

因此,<input type="hidden">已经存在了 之前 JavaScript,那么它最初的用途是什么呢?我只能想象将一个值从服务器发送到客户端,然后(不变地)将其发送回去以维持某种状态。或者我在它的历史中犯了错误,而 <input type="hidden">总是应该与 JavaScript 一起使用?

如果可能的话,请在回答中提供参考资料。

136315 次浏览

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.

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.

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
}
?>

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.

  1. 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.

  1. 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.

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.