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

尝试一下

<form action="" method="get">  <div>    <label for="name">Enter your name: </label>    <input type="text" name="name" required />  </div>  <div>    <label for="email">Enter your email: </label>    <input type="email" name="email" required />  </div>  <div>    <input type="submit" value="Subscribe!" />  </div></form>

form.form-example {  display: table;}div.form-example {  display: table-row;}label,input {  display: table-cell;  margin-bottom: 10px;}label {  padding-right: 10px;}

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

属性

此元素拥有全局属性。

accept已弃用

一个逗号分隔的列表，包括服务器能接受的内容类型。

备注：此属性已在 HTML5 中被移除并且不再被使用。作为替代，可以使用<input type=file> 元素中的accept 属性。

accept-charset

服务器接受的字符编码。规范允许使用单个不区分大小写的值——"UTF-8"，反应了这种编码的普遍性（历史上，可以以逗号分隔列表或空格分隔列表的形式指定多个字符编码）。

autocapitalize非标准

这是一个被 iOS Safari 使用的非标准属性。当用户在一些表单的文本后代控件中，输入/编辑一些文本值时，此属性控制了这些文本值的首字母是否大写或者使用其他的大写样式。如果autocapitalize 属性在某个单独的表单后代控件被指定的话，那么此单独的设定会覆盖原来表单范围内的autocapitalize 设定。默认值为sentences。可以选择的值如下：

• none：完全禁用自动首字母大写。
• sentences：自动对每句话首字母大写。
• words：自动对每个单词首字母大写。
• characters：自动大写所有的字母。

autocomplete

用于指示 input 元素是否能够拥有一个默认值，此默认值是由浏览器自动补全的。此设定可以被属于此表单的子元素的autocomplete 属性覆盖。可能的值有：

• off：浏览器可能不会自动补全条目（在疑似登录表单中，浏览器倾向于忽略该值，而提供密码自动填充功能，参见自动填充属性和登录）
• on：浏览器可自动补全条目

name

表单的名称。该值不能是空字符串，而且在其所在的表单集合中的所有表单（form）元素之中必须是独一无二的（如果有的话）。

rel

控制注释和表单创建的链接类型。注释包括external、nofollow、opener、noopener 和noreferrer。链接类型包括help、prev、next、search 和license。rel 值是这些枚举值的空格分隔列表。

关于提交表单的属性

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

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"> 元素上的formenctype 属性覆盖。

method

浏览器使用这种HTTP 方法来提交 表单。可能的值有：

• post：POST 方法；表单数据会包含在表单体内然后发送给服务器。
• get（默认）：GET 方法；表单数据会附加在action 属性的 URL 中，并以? 作为分隔符，没有副作用时使用这个方法。
• dialog：如果表单在<dialog> 元素中，提交时关闭对话框。此值可以被<button>、<input type="submit"> 或<input type="image"> 元素中的formmethod 属性覆盖。

novalidate

此布尔值属性表示提交表单时不需要验证表单。如果没有声明该属性（因此表单需要通过验证）。该属性可以被表单中的<button>、<input type="submit"> 或<input type="image"> 元素中的formnovalidate 属性覆盖。

target

表示在提交表单之后，在哪里显示响应信息。这是一个浏览上下文的名字/关键字（如标签页、窗口或 iframe）。下述关键字有特别含义：

• _self（默认）：在相同浏览上下文中加载。
• _blank：在新的未命名的浏览上下文中加载。
• _parent：在当前上下文的父级浏览上下文中加载，如果没有父级，则与_self 表现一致。
• _top：在最顶级的浏览上下文中（即当前上下文的一个没有父级的祖先浏览上下文），如果没有父级，则与_self 表现一致。此值可以被<button>、<input type="submit"> 或<input type="image"> 元素中的formtarget 属性覆盖。

示例

HTML

<!-- 向当前 URL 发送 GET 请求的表单 --><form method="get">  <label> 姓名：<input name="submitted-name" autocomplete="name" /> </label>  <button>保存</button></form><!-- 向当前 URL 发送 POST 请求的表单 --><form method="post">  <label> 姓名：<input name="submitted-name" autocomplete="name" /> </label>  <button>保存</button></form><!-- 带有字段集（fieldset）、标题（legend）和标签（label）的表单 --><form method="post">  <fieldset>    <legend>是否同意该条款？</legend>    <label><input type="radio" name="radio" value="yes" />是</label>    <label><input type="radio" name="radio" value="no" />否</label>  </fieldset></form>

技术概要

规范

浏览器兼容性

参见

• HTML 表单指南
• 还有其他的一些元素也用于创建表单：<button>、<datalist>、<fieldset>、<input>、<label>、<legend>、<meter>、<optgroup>、<option>、<output>、<progress>、<select>、<textarea>。
• 获取表单中的元素列表：HTMLFormElement.elements
• ARIA：Form 角色
• ARIA：Search 角色