<input type="hidden">

值

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

附加属性

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

name

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

使用隐藏输入

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

跟踪编辑内容

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

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

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

您可以在下面的示例部分中看到这可能是什么样子的完整示例。

提高网站安全性

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

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

验证

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

示例

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

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

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

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，并在表单返回时使用该信息来知道要用修改后的信息更新哪个数据库记录。内容中不需要脚本来处理这个问题。

输出如下所示

提交时，发送到服务器的表单数据将看起来像这样：

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

即使隐藏输入完全不可见，其数据仍然会提交。

技术摘要

规范

浏览器兼容性

另见

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