form

HTML <form> 元素表示了文档中的一个区域,此区域包含有交互控制元件,用来向 Web 服务器提交信息。

可以用 :valid:invalid CSS 伪类来按照表单是否正确填涂来给 <form> 元素指定样式。

旧信息栏:

新信息栏(未翻译):

内容类别 Flow content, palpable content
可包含内容 Flow content, but not containing <form> elements
标签省略 不允许,开始标签和结束标签都不能省略。
允许的父级元素 Any element that accepts flow content
Permitted ARIA roles group, presentation
DOM 接口 HTMLFormElement

属性

此元素拥有 全局属性

accept HTML 4
一个逗号分隔的列表,包括服务器能接受的内容类型。
兼容性备注: 此属性将会在 HTML5 中被移除并且不再被使用。作为替代,可以使用 <input> 元素中的 accept 属性。
accept-charset
一个空格分隔或逗号分隔的列表,此列表包括了服务器支持的字符编码。浏览器以这些编码被列举的顺序使用它们。默认值是一个保留字符串 "UNKNOWN"。此字符串指的是,和包含此表单元素的文档相同的编码。
在之前版本的 HTML 中,不同的字符编码可以用空格或逗号分隔。在 HTML5 中,只有空格可以允许作为分隔符。
action
一个处理此表单信息的程序所在的URL。此值可以被 <button> 或者 <input> 元素中的 formaction 属性覆盖。
autocapitalize
这是一个被 iOS Safari Mobile 使用的非标准属性。当用户在一些表单的文本后代控件中,输入/编辑一些文本值时,此属性控制了这些文本值的首字母是否大写或者使用其他的大写样式。如果 autocapitalize 属性在某个单独的表单后代控件被指定的话,那么此单独的设定会覆盖原来表单范围内的 autocapitalize 设定。此非不推荐的值从 iOS 5 及其之后可用。默认值为 sentences。可以选择的值如下:
  • none:完全禁用自动首字母大写。
  • sentences:自动对每句话首字母大写。
  • words:自动对每个单词首字母大写。
  • characters:自动大写所有的字母。
  • on 从 iOS 5 以后不被推荐使用。
  • off 从 iOS 5 以后不被推荐使用。
autocomplete HTML5
用于指示 input 元素是否能够拥有一个默认值,此默认值是由浏览器自动补全的。此设定可以被属于此表单的子元素的 autocomplete 属性覆盖。 可能的值有:
  • off:在每一个用到的输入域里,用户必须显式的输入一个值,或者document 以它自己的方式提供自动补全;浏览器不会自动补全输入。
  • on:浏览器能够根据用户之前在表单里输入的值自动补全。
For most modern browsers (including Firefox 38+, Google Chrome 34+, IE 11+) setting the autocomplete attribute will not prevent a browser's password manager from asking the user if they want to store login fields (username and password), if the user permits the storage the browser will autofill the login the next time the user visits the page. See The autocomplete attribute and login fields.

注意: 如果你在一个表单里把 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 再发送给服务器。如果这样做(数据暴露在 URI 中)没什么副作用,或者表单仅包含ASCII字符时,再考虑使用这种方法吧。
  • dialog:Use when the form is inside a <dialog> element to close the dialog when submitted.

此值可以被 <button><input type="submit"><input type="image"> 元素中的 formmethod 属性覆盖。

name
表单的名称。在 HTML 4 中,此用法不被推荐(作为替代,应该使用id)。HTML5中,一个文档中的多个表单当中,name必须唯一而不仅仅是一个空字符串。
novalidate HTML5
此布尔类型的属性指的是提交时表单是否处于未验证状态。 如果此属性没有指定 (因此此 表单 是验证通过的),此默认设置可以被属于此表单的 <button><input type="submit"><input type="image"> 元素中的 formnovalidate 属性覆盖。
target
一个名字或者说关键字,用来指示在提交表单之后,在哪里显示收到的回复. 在 HTML 4 里, 这是一个用于 frame 的名字/关键字. 在 HTML5 里,这是一个用于 browsing context 浏览器上下文 的名字/关键字(举例来说,标签页,窗口,或者行内 frame)。如下的关键字含有特别的含义:
  • _self:在当前 HTML 4 或 HTML5 文档页面重新加载返回值。是默认值。译注:也就是说,如果此文档在一个frame中的话,self是在当前frame(document)中重新加载的,而不是整个页面(window)。
  • _blank:以新的 HTML 4 或 HTML5 文档窗口加载返回值。
  • _parent:在父级的 frame 中以 HTML 4 或 HTML 5 文档形式加载返回值,如果没有父级的frame,行为和_self一致。
  • _top:如果是 HTML 4 文档:清空当前文档,加载返回内容;HTML5:在当前文档的最高级内加载返回值,如果没有父级,和_self的行为一致。
  • iframename:返回值在指定 <iframe> 中显示。

HTML5:此值可以被 <button><input type="submit"><input type="image"> 元素中的 formtarget 属性覆盖。

例子

HTML

<!-- 一个简单的表单,会发送一个 GET 请求 -->
<form action="" method="get">
  <label for="GET-name">Name:</label>
  <input id="GET-name" type="text" name="name">
  <input type="submit" value="Save">
</form>

<!-- 一个简单的表单,发送 POST 请求 -->
<form action="" method="post">
  <label for="POST-name">Name:</label>
  <input id="POST-name" type="text" name="name">
  <input type="submit" value="Save">
</form>

<!-- 使用 fieldset、legend,和 label 的表单 -->
<form action="" method="post">
  <fieldset>
    <legend>Title</legend>
    <input type="radio" name="radio" id="radio">
    <label for="radio">Click me</label>
  </fieldset>
</form>

规范

规范 状态 备注
HTML Living Standard
<form>
Living Standard
HTML5
<form>
Recommendation
HTML 4.01 Specification
<form>
Recommendation Initial definition

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
formChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
accept
Deprecated
Chrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
accept-charsetChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
actionChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
autocapitalize
Non-standard
Chrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS Full support YesSamsung Internet Android No support No
autocompleteChrome Full support Yes
Notes
Full support Yes
Notes
Notes The Google Chrome UI for auto-complete request varies, depending on whether autocomplete is set to off on <input> elements as well as their form. Specifically, when a form has autocomplete set to off and its <input> element's autocomplete attribute is not set, then if the user asks for autofill suggestions for the <input> element, Chrome might display a message saying 'autocomplete has been disabled for this form.' On the other hand, if both the form and the input element have autocomplete set to off, the browser will not display that message. For this reason, you should set autocomplete to off for each <input> that has custom auto-completion.
Edge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
enctypeChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
methodChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
nameChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
novalidateChrome Full support 1Edge Full support YesFirefox Full support 4IE Full support 10Opera Full support 15Safari ? WebView Android Full support 37Chrome Android Full support 18Firefox Android Full support 4Opera Android ? Safari iOS ? Samsung Internet Android Full support Yes
targetChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.
Deprecated. Not for use in new websites.
Deprecated. Not for use in new websites.
See implementation notes.
See implementation notes.

对于自动完成的请求,Google Chrome UI 是不一样的,取决于在 input 元素及其表单上,autocomplete 是否设为 off 。特别是,如果表单的 autocomplete 设为 off ,并且它的输入元素的 autocomplete 字段没有设置,如果用户请求该输入元素的自动填充建议,Chrome 就可能展示一个消息,“自动完成已关闭”。另一方面,如果表单和输入元素的 autocomplete 都设为 off,浏览器就不会展示此消息。出于此原因,你应该将每个拥有自定义自动完成的输入元素的 autocomplete 设为 off

参见