form

翻译不完整。 请帮助我们翻译这篇文章!

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

可以用 :valid:invalid CSS 伪类来设置 <form> 元素的样式,此时样式的表现取决于表单中的 elements 是否有效。

内容类别 Flow content, palpable content
可包含内容 Flow content, but not containing <form> elements
标签省略 不允许,开始标签和结束标签都不能省略。
允许的父级元素 可以是HTML的任何标签
Implicit ARIA role form if the form has an accessible name, otherwise no corresponding role
Permitted ARIA roles searchgroup, presentation
DOM 接口 HTMLFormElement

属性

此元素拥有 全局属性

accept
一个逗号分隔的列表,包括服务器能接受的内容类型。
此属性已在 HTML5 中被移除并且不再被使用。作为替代,可以使用 <input type=file> 元素中的 accept 属性。
accept-charset
一个空格分隔或逗号分隔的列表,此列表包括了服务器支持的字符编码。浏览器以这些编码被列举的顺序使用它们。默认值是一个保留字符串 "UNKNOWN"。此字符串指的是,和包含此表单元素的文档相同的编码。
在之前版本的 HTML 中,不同的字符编码可以用空格或逗号分隔。在 HTML5 中,只有空格可以允许作为分隔符。
autocapitalize
这是一个被 iOS Safari 使用的非标准属性。当用户在一些表单的文本后代控件中,输入/编辑一些文本值时,此属性控制了这些文本值的首字母是否大写或者使用其他的大写样式。如果 autocapitalize 属性在某个单独的表单后代控件被指定的话,那么此单独的设定会覆盖原来表单范围内的 autocapitalize 设定。默认值为 sentences。可以选择的值如下:
  • none:完全禁用自动首字母大写。
  • sentences:自动对每句话首字母大写。
  • words:自动对每个单词首字母大写。
  • characters:自动大写所有的字母。
autocomplete
用于指示 input 元素是否能够拥有一个默认值,此默认值是由浏览器自动补全的。此设定可以被属于此表单的子元素的 autocomplete 属性覆盖。 可能的值有:
  • off:浏览器可能不会自动补全条目(在疑似登录表单中,浏览器倾向于忽略该值,而提供密码自动填充功能,参见 自动填充属性和登录
  • on:浏览器可自动补全条目
name
表单的名称。HTML 4中不推荐(应使用 id)。在 HTML 5 中,该值必须是所有表单中独一无二的,而且不能是空字符串。
rel
根据 value 创建一个超链接或Creates a hyperlink or annotation depending on the value, see the rel attribute for details.

关于提交表单的属性

下列属性控制提交表单时的行为。

action
处理表单提交的 URL。这个值可被 <button><input type="submit"> 或 <input type="image"> 元素上的 formaction 属性覆盖。
enctype
method 属性值为 post 时,enctype 就是将表单的内容提交给服务器的 MIME 类型 。可能的取值有:
  • application/x-www-form-urlencoded:未指定属性时的默认值。
  • multipart/form-data:当表单包含 type=file 的 <input> 元素时使用此值。
  • text/plain:出现于 HTML5,用于调试。

这个值可被 <button><input type="submit"> 或 <input type="image"> 元素上的 formaction 属性覆盖。

method
浏览器使用这种 HTTP 方式来提交 表单. 可能的值有:
  • post:指的是 HTTP POST 方法;表单数据会包含在表单体内然后发送给服务器.
  • get:指的是 HTTP GET 方法;表单数据会附加在 action 属性的 URL 中,并以 '?' 作为分隔符,没有副作用 时使用这个方法。
  • dialog:如果表单在 <dialog> 元素中,提交时关闭对话框。

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

novalidate
此布尔值属性表示提交表单时不需要验证表单。 如果没有声明该属性 (因此表单需要通过验证)。该属性可以被表单中的 <button><input type="submit"><input type="image"> 元素中的 formnovalidate 属性覆盖。
target
表示在提交表单之后,在哪里显示响应信息。在 HTML 4 中, 这是一个 frame 的名字/关键字对。在 HTML5 里,这是一个浏览上下文 的名字/关键字(如标签页、窗口或 iframe)。下述关键字有特别含义:
  • _self:默认值。在相同浏览上下文中加载。
  • _blank:在新的未命名的浏览上下文中加载。
  • _parent:在当前上下文的父级浏览上下文中加载,如果没有父级,则与 _self 表现一致。
  • _top:在最顶级的浏览上下文中(即当前上下文的一个没有父级的祖先浏览上下文),如果没有父级,则与 _self 表现一致。

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

示例

HTML

<!-- Form which will send a GET request to the current URL -->
<form>
  <label>Name:
    <input name="submitted-name" autocomplete="name">
  </label>
  <button>Save</button>
</form>

<!-- Form which will send a POST request to the current URL -->
<form method="post">
  <label>Name:
    <input name="submitted-name" autocomplete="name">
  </label>
  <button>Save</button>
</form>

<!-- Form with fieldset, legend, and label -->
<form method="post">
  <fieldset>
    <legend>Title</legend>
    <label><input type="radio" name="radio"> Select 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 12Firefox 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 12Firefox 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 12Firefox 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 12Firefox 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 12Firefox 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 12Firefox 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 12Firefox 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 12Firefox 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 10Edge Full support 12Firefox Full support 4IE Full support 10Opera Full support 15Safari Full support 10.1WebView Android Full support 37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 14Safari iOS Full support 10.3Samsung Internet Android Full support 1.0
targetChrome Full support YesEdge Full support 12Firefox 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
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

参见