Html <input type="hidden"> 的初衷？

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

提问by Uooo

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

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

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

如今，它经常与 JavaScript 一起使用，以在其中存储发送到服务器的变量等等。

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

• HTML 2.0 于1995年11 月发布，已经包含input type="hidden"的规范
• JavaScript 于1996 年 3 月发布

Therefore, the <input type="hidden">existed beforeJavaScript, 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?

所以，在JavaScript之前<input type="hidden">就存在了，那么它的初衷是什么呢？我只能想象从服务器向客户端发送一个值，该值被（不变）发回以保持某种状态。或者我在它的历史上有什么错误并且总是应该与 JavaScript 一起使用？<input type="hidden">

If possible, please also give references in your answers.

如果可能，请在您的答案中也提供参考。

回答by BoltClock

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.

恰恰。事实上，今天它仍然被用于这个目的，因为我们今天所知道的 HTTP 仍然是，至少从根本上说，是一种无状态协议。

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

这个用例实际上是在HTML 3.2 中首次描述的（我很惊讶 HTML 2.0 没有包含这样的描述）：

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">

type=hidden
这些字段不应被呈现，并为服务器提供一种方式来存储带有表单的状态信息。这将在提交表单时使用由相应属性定义的名称/值对传递回服务器。这是解决 HTTP 无状态的方法。另一种方法是使用 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 afterJavaScript's initial release, it's safe to assume that hidden fields have pretty much always served the same purpose.

虽然值得一提的是 HTML 3.2 仅在JavaScript 最初发布后才成为 W3C 推荐标准，但可以安全地假设隐藏字段几乎总是用于相同的目的。

回答by Mr. Alien

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 hiddenfield in action, else you won't get the reference of the record to be deleted in this case, it will be id

我将在这里提供一个简单的服务器端真实世界示例，假设记录是循环的，并且每条记录都有一个带有删除按钮的表单，并且您需要删除特定记录，因此该hidden字段正在起作用，否则您将不会在这种情况下，t 获取要删除的记录的引用，它将是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
    }
?>

回答by Chuck Norris

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.

简而言之，最初的目的是制作一个将随表单提交一起提交的字段。有时，需要在隐藏字段中存储一些信息（例如，用户的 id）并通过表单提交提交。

From HTML September 22, 1995 specification

来自 1995 年 9 月 22 日的 HTML 规范

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.

带有`TYPE=HIDDEN' 的INPUT 元素代表一个隐藏字段。用户不与该字段交互；相反，VALUE 属性指定字段的值。NAME 和 VALUE 属性是必需的。

回答by c.P.u1

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.

表单元素的值包括 type='hidden' 会在表单发布时提交给服务器。input type="hidden" 值在页面中不可见。例如，在隐藏字段中维护用户 ID 是众多用途之一。

SO uses a hidden field for the upvote click.

SO 使用隐藏字段进行投票点击。

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

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

使用此值，服务器端脚本可以存储赞成票。

回答by Ganesh Bora

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.

1. CSRF 代币。

Cross-site request forgeryis 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.

跨站请求伪造是一个非常常见的网站漏洞。在所有表单提交中都需要一个秘密的、用户特定的令牌将防止 CSRF 攻击，因为攻击站点无法猜测正确的令牌是什么，并且他们代表用户执行的任何表单提交都将始终失败。

1. Save state in multi-page forms.

2. 以多页形式保存状态。

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.

一般规则：使用该字段来存储用户不需要看到的任何内容，但您希望在表单提交时发送到服务器。