input type="hidden"

<input type="hidden">

<input>的"hidden"设web开发者包括能够当表单提交不会被用户看到或修改的数据。例如，当前正在订购或编辑的内容的ID，或唯一的安全令牌。隐藏的输入在呈现的页面中完全不可见，并且无法在页面的内容中显示。

注意：下面的代码行下面有一个实例 - 如果它正常工作，你什么也看不到！

<input id="prodId" name="prodId" type="hidden" value="xm234jq">

值

该<input>元素的value属性包含一个DOMString包含要当表单提交给服务器，包括隐藏的数据。尽管您可以通过浏览器开发工具编辑该值，但用户无法通过用户界面对其进行编辑或查看。

虽然该值不会显示给页面内容中的用户，但可以使用任何浏览器的开发人员工具或“查看源代码”功能进行查看并进行编辑。不要依赖hidden投入作为一种安全形式。

使用隐藏的输入

如上所述，隐藏的输入可以用在任何你希望包含数据的地方，用户在提交给服务器时不能看到或者与表单一起编辑。我们来看一些例子来说明它的用法。

跟踪编辑的内容

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

• 用户决定编辑他们控制的某些内容，例如博客文章或产品条目。他们通过按编辑按钮开始。

• 要编辑的内容从数据库中获取并加载到HTML表单中以允许用户进行更改。

• 编辑完成后，用户提交表单，并将更新后的数据发送回服务器，在数据库中进行更新。

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

您可以在下面的“示例”部分查看完整示例。

提高网站的安全性

隐藏的输入也用于存储和提交安全令牌或秘密，以提高网站的安全性。其基本思想是，如果用户正在填写一个敏感的表格，比如他们的银行网站上的一个表格，以便将一些钱转移到另一个帐户，那么他们将提供的秘密将证明他们是他们所说的那个人，他们正在使用正确的表单提交转移请求。

这样做可以阻止恶意用户伪造假表单，伪装成银行，并通过电子邮件将表单发送给不知情的用户，从而诱骗他们将资金转移到错误的地方。这种攻击称为跨站点请求伪造（CSRF）（https://developer.mozilla.org/en-US/docs/Learn/Server-side/First steps / Website_security＃Cross_Site_Request_Forgery（CSRF％29） ;漂亮许多有信誉的服务器端框架使用隐藏的秘密来防止这种攻击。

如前所述，将秘密置于隐藏的输入中本身不会使其安全。密钥的组成和编码将做到这一点。隐藏输入的值是保存与数据关联的秘密，并在表单发送到服务器时自动包含它。您需要使用精心设计的秘密来保护您的网站。

验证器

隐藏的输入不参与约束验证; 他们没有真正的价值被约束。

例子

让我们看看我们如何实现前面描述的编辑表单的简单版本（请参阅跟踪编辑的内容），使用隐藏的输入来记住正在编辑的记录的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，并且在表单返回时使用该信息来知道要更新哪个数据库记录信息。内容中不需要脚本处理。

输出如下所示：

注意：您也可以在GitHub上找到示例（请参阅源代码，也可以在线观看）。

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

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

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

规范

浏览器兼容性