概述

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

可以用 :valid:invalid CSS 伪类 来给一个元素指定样式。

属性

这个元素包括一些 全局属性.

accept HTML 4
一个逗号分隔的列表,包括服务器能接受的内容类型。
可用性备注: 这个属性将会在HTML5中被移除并且不再被使用。作为替代,使用 <input> 元素中的 accept 属性。
accept-charset
一个空格分隔或逗号分隔的列表,这个列表包括了服务器支持的字符编码。浏览器以这些编码被列举的顺序使用它们。默认值是一个保留字符串“UNKNOWN”。这个字符串指的是,和包含这个form元素的文档相同的编码。
在之前版本的HTML中,不同的字符编码可以用空格或逗号分隔。在HTML5中,只有空格可以允许作为分隔符。
action
一个处理这个form信息的程序所在的URL。这个值可以被 <button> 或者 <input> 元素中的 formaction 属性重载(覆盖)。
autocapitalize
这是一个被 iOS Safari Mobile 使用的非标准属性。当用户在一些form的文本后代控件中,输入/编辑一些文本值时,这个属性控制了这些文本值的首字母是否大写或者使用其他的大写样式。如果 autocapitalize 属性在某个单独的form后代控件被指定的话,那么这个单独的设定会覆盖原来form范围内的 autocapitalize 设定. 这个非不推荐的值从 iOS 5 及其之后可用. 默认值为 sentences. 可以选择的值如下:
  • none: 完全禁用自动首字母大写.
  • sentences: 自动对每句话首字母大写.
  • words: 自动对每个单词首字母大写.
  • characters: 自动大写所有的字母.
  • on: 从 iOS 5 以后不被推荐使用.
  • off: 从 iOS 5 以后不被推荐使用.
autocomplete HTML5
用于指示 input 元素是否能够拥有一个默认值,这个默认值是由浏览器自动补全的。这个设定可以被属于这个form的子元素的 autocomplete 属性重载(覆盖)。 可能的值有:
  • off: 在每一个用到的输入域里,用户必须显式的输入一个值,或者document 以它自己的方式提供自动补全;浏览器不会自动补全输入。
  • on: 浏览器能够根据用户之前在form里输入的值自动补全。

注意: 如果你在一个表单里把 autocomplete 设置成 off 是因为 document 提供了它独有的自动补全,那么你也应该把这个表单里每一个 input 元素的 autocomplete 设成 off 来让 document 能够自动补全. 想要了解详细信息, 参见 Google Chrome notes.

enctype
method 属性值为 post 时, enctype 是将form的内容提交给服务器的 MIME 类型 。可能的取值有:
  • application/x-www-form-urlencoded: 未指定属性时的默认值。
  • multipart/form-data: 这个值用于一个 type 属性设置为 "file" 的 <input> 元素。
  • text/plain (HTML5)

这个值可以被 <button> 或者 <input> 元素中的 formenctype 属性重载(覆盖)。

method
浏览器使用这种 HTTP 方式来提交 form. 可能的值有:
  • post: 指的是 HTTP POST 方法 ; 表单数据会包含在表单体内然后发送给服务器.
  • get: 指的是 HTTP GET 方法; 表单数据会附加在 action 属性的URI中,并以 '?' 作为分隔符, 然后这样得到的 URI 再发送给服务器. 当这样做(数据暴露在URI里面)没什么副作用,或者表单仅包含ASCII字符时,再使用这种方法吧。

这个值可以被 <button> 或者 <input> 元素中的 formmethod 属性重载(覆盖)。

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

HTML5: 这个值可以被 <button> 或者 <input> 元素中的 formtarget 属性重载(覆盖)。

例子

<!-- 一个简单的表单,这个表单会发送一个 GET 请求 -->
<form action="">
  <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, and label 的表单 -->
<form action="" method="post">
  <fieldset>
    <legend>Title</legend>
    <input type="radio" name="radio" id="radio"> <label for="radio">Click me</label>
  </fieldset>
</form>

Title

规范

浏览器兼容性

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.

autocomplete 

参见

文档标签和贡献者

最后编辑者: gafish,