翻译正在进行中。

"hidden" 类型的 <input> 元素允许 Web 开发者存放一些用户不可见、不可改的数据,在用户提交表单时,这些数据会一并发送出。比如,正被请求或编辑的内容的 ID,或是一个唯一的安全令牌。这些隐藏的 <input> 元素在渲染完成的页面中完全不可见,而且没有方法可以使它重新变为可见。

注意:本警告框下面的代码下,就有一个 <input type="hidden"> 的 live example 可交互示例——如果它正常运作的话,你应当什么也看不到!

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

Value A DOMString representing the value of the hidden data you want to pass back to the server.
Events None.
Supported Common Attributes autocomplete
IDL attributes value
Methods None.

属性值

The <input> element's value attribute holds a DOMString 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.

Important: 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.

额外属性

除所有 <input> 元素所共有的属性之外,带有 hidden 属性的 <input> 提供以下额外属性:

属性 描述
name 与所有输入类型一样,这可以是提交表单时反馈给服务器的 <input> 的名称;使用特殊属性值 _charset_ 则会使当前隐藏 <input> 的值被反馈为表单内容的字符编码

name

这实际上是常见属性之一,但它对于隐藏的 <input> 具有一个特殊含义。一般来说,name 的属性在隐藏 <input> 上的作用和任何其他 <input> 上的一样;但是,在提交表单时, name 属性被设置为 _charset_ 的隐藏 <input> ,其值会被自动设置为被提交表单的字符编码。

使用隐藏 <input>

如上所述,隐藏的 <input> 可以用于任何有需要提交给服务器的、用户无法查看或编辑的数据的地方。让我们看一些说明其用法的例子吧。

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. User decides to edit some content they have control over, such as a blog post, or a product entry. They get started by pressing the edit button.
  2. The content to be edited is taken from the database and loaded into an HTML form to allow the user to make changes.
  3. After editing, the user submits the form, and the updated data is sent back to the server to be updated in the database.

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.

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.

As stated previously, 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.

验证

隐藏的 <input> 不参与约束验证;他们没有可受到约束的属性值。

例子

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.

The edit form's HTML might look a little 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>

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;
}

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:

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

即使根本看不到隐藏的 <input>,它所包含的数据仍然会被提交给服务器。

规范

规范 状态 备注
HTML Living Standard
<input type="hidden">
Living Standard Initial definition
HTML 5.1
<input type="hidden">
Recommendation Initial definition

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome Full support 1Edge Full support YesFirefox Full support 1IE Full support YesOpera Full support 2Safari Full support 1WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown

参见

文档标签和贡献者

标签: 
此页面的贡献者: mdnwebdocs-bot, RainSlide
最后编辑者: mdnwebdocs-bot,