<input type="hidden">

¥Value

<input> 元素的 value 属性包含一个字符串，其中包含你希望在将表单提交到服务器时包含的隐藏数据。尽管你可以通过浏览器开发者工具编辑该值，但用户无法通过用户界面具体编辑或查看该值。

¥The <input> element's value attribute holds a string that contains the hidden data you want to include when the form is submitted to the server. This specifically can't be edited or seen by the user via the user interface, although you could edit the value via browser developer tools.

警告：虽然该值不会在页面内容中向用户显示，但它是可见的，并且可以使用任何浏览器的开发者工具或 "查看源代码" 功能进行编辑。不要依赖 hidden 输入作为一种安全形式。

¥Warning: While the value isn't displayed to the user in the page's content, it is visible—and can be edited—using any browser's developer tools or "View Source" functionality. Do not rely on hidden inputs as a form of security.

¥Additional attributes

除了所有 <input> 元素共有的属性外，hidden 输入还提供以下属性。

¥In addition to the attributes common to all <input> elements, hidden inputs offer the following attributes.

这实际上是常见属性之一，但它对于隐藏输入具有特殊含义。通常，name 属性在隐藏输入上起作用，就像在任何其他输入上一样。但是，当提交表单时，将自动报告 name 设置为 _charset_ 的隐藏输入，并将该值设置为用于提交表单的字符编码。

¥This is actually one of the common attributes, but it has a special meaning available for hidden inputs. Normally, the name attribute functions on hidden inputs just like on any other input. However, when the form is submitted, a hidden input whose name is set to _charset_ will automatically be reported with the value set to the character encoding used to submit the form.

¥Using hidden inputs

如上所述，隐藏输入可以用在你想要包含用户在提交到服务器时无法与表单一起查看或编辑的数据的任何地方。让我们看一些说明其用途的示例。

¥As mentioned above, hidden inputs can be used anywhere that you want to include data the user can't see or edit along with the form when it's submitted to the server. Let's look at some examples that illustrate its use.

¥Tracking edited content

隐藏输入最常见的用途之一是跟踪提交编辑表单时需要更新哪些数据库记录。典型的工作流程如下所示：

¥One of the most common uses for hidden inputs is to keep track of what database record needs to be updated when an edit form is submitted. A typical workflow looks like this:

1. 用户决定编辑他们可以控制的一些内容，例如博客文章或产品条目。他们通过按下编辑按钮开始。
2. 要编辑的内容从数据库中获取并加载到 HTML 表单中以允许用户进行更改。
3. 编辑完成后，用户提交表单，更新后的数据被发送回服务器以在数据库中进行更新。

这里的想法是，在第 2 步中，正在更新的记录的 ID 保存在隐藏输入中。当第 3 步提交表单时，ID 会与记录内容一起自动发送回服务器。该 ID 使站点的服务器端组件能够准确地知道哪条记录需要使用提交的数据进行更新。

¥The idea here is that during step 2, the ID of the record being updated is kept in a hidden input. When the form is submitted in step 3, the ID is automatically sent back to the server with the record content. The ID lets the site's server-side component know exactly which record needs to be updated with the submitted data.

你可以在下面的 示例 部分中查看完整示例。

¥You can see a full example of what this might look like in the Examples section below.

¥Improving website security

隐藏输入还用于存储和提交安全令牌或秘密，以提高网站安全性。基本思想是，如果用户填写敏感表格，例如银行网站上的表格以将一些钱转入另一个账户，那么他们将获得的秘密将证明他们就是他们所说的人，并且 他们使用正确的表格来提交转移请求。

¥Hidden inputs are also used to store and submit security tokens or secrets, for the purposes of improving website security. The basic idea is that if a user is filling in a sensitive form, such as a form on their banking website to transfer some money to another account, the secret they would be provided with would prove that they are who they say they are, and that they are using the correct form to submit the transfer request.

这将阻止恶意用户创建虚假表格，冒充银行，并将表格通过电子邮件发送给毫无戒心的用户，诱骗他们将资金转移到错误的地方。这种攻击称为 跨站请求伪造 (CSRF)；几乎所有信誉良好的服务器端框架都使用隐藏的秘密来防止此类攻击。

¥This would stop a malicious user from creating a fake form, pretending to be a bank, and emailing the form to unsuspecting users to trick them into transferring money to the wrong place. This kind of attack is called a Cross Site Request Forgery (CSRF); pretty much any reputable server-side framework uses hidden secrets to prevent such attacks.

注意：将秘密放在隐藏输入中并不能本质上保证其安全。密钥的组合和编码可以做到这一点。隐藏输入的价值在于它保留与数据关联的秘密，并在表单发送到服务器时自动包含它。你需要使用精心设计的秘密来真正保护你的网站。

¥Note: Placing the secret in a hidden input doesn't inherently make it secure. The key's composition and encoding would do that. The value of the hidden input is that it keeps the secret associated with the data and automatically includes it when the form is sent to the server. You need to use well-designed secrets to actually secure your website.

¥Validation

隐藏输入不参与约束验证；它们没有真正的价值需要受到限制。

¥Hidden inputs don't participate in constraint validation; they have no real value to be constrained.

¥Examples

让我们看看如何实现前面描述的编辑表单的简单版本（参见 跟踪编辑的内容），使用隐藏输入来记住正在编辑的记录的 ID。

¥Let's look at how we might implement a simple version of the edit form we described earlier (see Tracking edited content), using a hidden input to remember the ID of the record being edited.

编辑表单的 HTML 可能看起来有点像这样：

¥The edit form's HTML might look a bit like this:

<form>
  <div>
    <label for="title">Post title:</label>
    <input type="text" id="title" name="title" value="My excellent blog post" />
  </div>
  <div>
    <label for="content">Post content:</label>
    <textarea id="content" name="content" cols="60" rows="5">
This is the content of my excellent blog post. I hope you enjoy it!
    </textarea>
  </div>
  <div>
    <button type="submit">Update post</button>
  </div>
  <input type="hidden" id="postId" name="postId" value="34657" />
</form>

我们还添加一些简单的 CSS：

¥Let's also add some simple CSS:

html {
  font-family: sans-serif;
}

form {
  width: 500px;
}

div {
  display: flex;
  margin-bottom: 10px;
}

label {
  flex: 2;
  line-height: 2;
  text-align: right;
  padding-right: 20px;
}

input,
textarea {
  flex: 7;
  font-family: sans-serif;
  font-size: 1.1rem;
  padding: 5px;
}

textarea {
  height: 60px;
}

在将表单发送到用户浏览器之前，服务器会将 ID 为“postID”的隐藏输入的值设置为其数据库中帖子的 ID，并在返回表单时使用该信息来了解要更新哪个数据库记录 并修改信息。内容中不需要编写脚本来处理此问题。

¥The server would set the value of the hidden input with the ID "postID" to the ID of the post in its database before sending the form to the user's browser and would use that information when the form is returned to know which database record to update with modified information. No scripting is needed in the content to handle this.

输出如下所示：

¥The output looks like this:

注意：你还可以在 GitHub 上找到该示例（请参阅 源代码 和 看到它实时运行）。

¥Note: You can also find the example on GitHub (see the source code, and also see it running live).

提交后，发送到服务器的表单数据将如下所示：

¥When submitted, the form data sent to the server will look something like this:

title=My+excellent+blog+post&content=This+is+the+content+of+my+excellent+blog+post.+I+hope+you+enjoy+it!&postId=34657

即使隐藏的输入根本看不到，它的数据仍然被提交。

¥Even though the hidden input cannot be seen at all, its data is still submitted.

¥Technical summary

¥See also

• HTML 表单指南
• <input> 及其所基于的 HTMLInputElement 接口