form

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

尝试一下

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

属性

此元素拥有全局属性。

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

表单的名称。该值不能是空字符串，而且在其所在的表单集合中的所有表单（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 类型。可能的取值有：

method

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

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

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>

技术概要

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

规范

Specification
HTML Standard
# the-form-element

浏览器兼容性

BCD tables only load in the browser

参见