<input type="hidden">

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

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

这实际上是常用属性之一，但它对隐藏输入有特殊的含义。通常，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;
}

服务器会在将表单发送到用户的浏览器之前，将隐藏输入“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 接口