HTML <form> 元素

HTML <form> 元素表示一个文档部分，其中包含交互控件，用于向 Web 服务器提交信息。

带有两个输入字段和一个提交按钮的 HTML 表单：

<form action="/plays/html-form-submit" method="get">
  姓：<input type="text" name="lname">
  <br>名：<input type="text" name="fname">
  <br><input type="submit" value="提交">
</form>

尝试一下 »

可以使用 :valid 和 :invalid CSS 伪类来给 <form> 元素添加样式。

特性

内容类别	流式内容，可触知内容。
允许的内容	流式内容，但不能包含 <form> 元素
标签省略	不允许，开始标签和结束标签都不能省略。
允许的父元素	任何接受流式内容的元素
允许的 ARIA 角色	group，presentation
DOM 接口	HTMLFormElement

属性

该元素包含了全局属性。

accept

HTML 4 已过时 HTML5

服务器接受的内容类型的逗号分隔列表。

使用说明： 该属性已在 HTML5 中删除，不再使用。应该使用 <input> 元素的 accept 属性。

accept-charset

服务器接受的字符编码的空格或逗号分隔的列表。浏览器按照列出的顺序使用它们。默认值，是一个保留字符串 UNKNOWN，表示与包含表单元素的文档相同的编码。
在之前的 HTML 版本中，不同的字符编码可以用空格或逗号分隔。在 HTML5 中，只能使用空格作为分隔符。

action

处理表单信息的程序的 URI。该值可以被 <button> 或 <input> 元素上的 formaction 属性覆盖。

autocapitalize

非标准

这是 iOS Safari Mobile 使用的非标准属性，它控制了文本形式的表单控件后代的文本值，是否以及如何自动按用户输入/编辑进行大小写转换。如果在一个单独的表单控件后代指定了 autocapitalize 属性，那么它将覆盖整个表单范围的 autocapitalize 设置。下列未废弃的值在 iOS 5 及更高版本中可用。默认值为 sentences 。可选的值如下：

• none：完全禁用自动大写
• sentences：自动将第一个字母大写。
• words：自动大写每个字的第一个字母。
• characters：自动大写所有字符。
• on: 自 iOS 5 以来已弃用。
• off: 自 iOS 5 以来已弃用。

autocomplete

HTML5

表示输入元素是否可以默认使用浏览器自动完成其值。该设置可以被属于该表单的元素上的 autocomplete 属性覆盖。可选的值如下：

• off：用户必须显式地在每个字段中输入值，或者文档提供自己的自动完成方法（注：例如浏览器自动填写用户名和密码）；浏览器不会自动完成条目。
• on：浏览器可以根据用户先前在表单中输入的值自动完成值。

对于大多数现代浏览器（包括 Firefox 38+，Google Chrome 34+，IE 11+）设置自动完成属性不会阻止浏览器的密码管理器询问用户是否要存储登录字段（用户名和密码），如果用户允许存储浏览器将在下次用户访问该页面时自动填写登录。参阅自动完成属性和登录字段.

注意： 如果您将表单的 autocomplete 设置为 off，因为文档提供了自身的自动完成功能，那么您也应该将表单中的每一个 input 元素设置 autocomplete 为 off 。有关详细信息，请参阅Google Chrome 注意。

enctype

当 method 属性的值为 post 时，enctype 是用于将表单提交到服务器的内容的MIME 类型。可能的值是：

• application/x-www-form-urlencoded：如果未指定属性时的默认值。
• multipart/form-data：当表单中有 type 属性为 file 的 <input> 元素时使用。
• text/plain (HTML5)

该值可以被 <button> 或 <input> 元素上的 formenctype 属性覆盖。

method

浏览器用于提交表单的 HTTP 方法。可能的值是：

• post：对应于 HTTP POST 方法；表单数据包含在表单的正文中并发送到服务器。
• get：对应于 HTTP GET 方法；表单数据附加到 action 属性 URI，以 ？ 作为分隔符，并将生成的 URI 发送到服务器。当表单没有副作用并且只包含 ASCII 字符时，使用该方法。

该值可以被 <button> 或 <input> 元素上的 formmethod 属性覆盖。

name

表单的名称。在 HTML 4 中，这个用法已被弃用（应该使用 id）。在 HTML 5 中，它在一个文档的多个表单中，必须是唯一的，且不是空字符串。

novalidate

HTML5

该布尔属性指示表单在提交时不被验证。如果未指定该属性（因而表单会被验证），则该默认设置可以由 <button> 或 <input> 元素上的 formnovalidate 属性覆盖。

target

一个名称或关键字，指出在提交表单后收到的响应的位置。在 HTML 4 中，这是一个框架的名称/关键字。在 HTML5 中，它是_浏览上下文_（例如，标签页，窗口或内联框架）的名称/关键字。以下关键字有特殊含义：

• _self：将响应加载到与当前 HTML 4 框架（或 HTML5 浏览上下文）相同的 HTML 页面中。如果未指定属性，则该值为默认值。
• _blank：将响应加载到新的未命名 HTML 4 窗口或 HTML5 浏览上下文中。
• _parent：将响应加载到当前框架的 HTML 4 框架父项或当前框架的 HTML5 父浏览上下文中。如果没有父级，则该选项的行为方式与 _self 相同。
• _top：HTML 4：将响应加载到完整的原始窗口，并取消所有其他框架。 HTML5：将响应加载到顶级浏览上下文（即，当前浏览上下文的上级浏览上下文，并且没有父级）。如果没有父级，则该选项的行为方式与 _self 相同。
• iframename：响应显示在一个命名的 <iframe> 中。

HTML5：该值可以被 <button> 或 <input> 元素的 formtarget 属性覆盖。

事件属性

<form> 元素支持 HTML 的事件属性。

更多实例

将发送 GET 请求的简单表单

<form action="/plays/html-form-submit" method="get">
  <label for="GET-name">名称:</label>
  <input id="GET-name" type="text" name="name" value="蜜蜂">
  <input type="submit" value="保存">
</form>

尝试一下 »

将发送 POST 请求的简单表单

<form action="/plays/html-form-submit" method="post">
  <label for="POST-name">名称:</label>
  <input id="POST-name" type="text" name="name" value="蜜蜂">
  <input type="submit" value="保存">
</form>

尝试一下 »

带有 fieldset，legend 和 label 的表单

<form action="/plays/html-form-submit" method="post">
  <fieldset>
    <legend>标题</legend>
    <input type="radio" name="radio" id="radio" value="1">
    <label for="radio">点我</label>
    <input type="submit" value="保存">
  </fieldset>
</form>

尝试一下 »

规范

规范	状态	备注
HTML Living Standard <form> 的定义	现行的标准	-
HTML5 <form> 的定义	推荐	-
HTML 4.01 Specification <form> 的定义	推荐	初始定义

HTML 4.01 与 HTML5 之间的差异

HTML5 新增了两个新的属性：autocomplete 和 novalidate，同时不再支持 HTML 4.01 中的某些属性。

HTML 与 XHTML 之间的差异

在 XHTML 中，name 属性已被废弃。使用全局 id 属性代替。

桌面浏览器兼容性

移动浏览器兼容性

1. Google Chrome 的自动完成的界面会因为 input 元素以及它们的表单上是否设置 autocomplete 为 off 而不同。具体来说，当一个表单的 autocomplete 设置为 off，其输入元素的 autocomplete 字段未设置时，如果用户请求该输入元素的自动填充建议，Chrome 可能会显示一条消息，指出 “该表单的自动完成已被禁用”。反过来，如果表单和输入元素都将 autocomplete 设置为 off，则浏览器将不会显示该消息。因此，您应该为每一个自定义自动完成的输入框设置 autocomplete 为 off。

相关链接

• HTML 教程：HTML 表单和输入
• HTML DOM 参考手册： Form 对象
• 用于创建表单的其他元素：<button>，<datalist>，<fieldset>，<input>，<keygen>，<label>，<legend>，<meter>，<optgroup>，<option>，<output>，<progress>，<select>，<textarea>。