<form>：表单元素

基线 广泛可用

此功能已得到良好建立，并在许多设备和浏览器版本中都能正常运行。它自以下时间起在浏览器中可用： 2015 年 7 月.

<form> HTML 元素表示包含用于提交信息的交互式控件的文档部分。

试一试

可以使用 :valid 和 :invalid CSS 伪类 根据表单内的 elements 是否有效来设置 <form> 元素的样式。

属性

此元素包含 全局属性。

accept

服务器接受的以逗号分隔的内容类型。

注意：此属性已弃用，不应使用。请改用<input type=file>元素上的accept属性。

accept-charset

服务器接受的以空格分隔的字符编码。浏览器按照它们列出的顺序使用它们。默认值表示与页面相同的编码。（在早期版本的 HTML 中，字符编码也可以用逗号分隔。）

autocapitalize

控制输入文本是否自动大写，以及如果自动大写，以何种方式大写。有关更多信息，请参阅autocapitalize全局属性页面。

autocomplete

指示输入元素是否可以默认情况下由浏览器自动填充其值。表单元素上的autocomplete属性会覆盖<form>上的属性。可能的值

  • 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属性覆盖。当设置method="dialog"时，此属性将被忽略。

enctype

如果method属性的值为post，则enctype是表单提交的MIME 类型。可能的值

  • application/x-www-form-urlencoded：默认值。
  • multipart/form-data：如果表单包含type=file的<input>元素，请使用此值。
  • text/plain：用于调试目的。

此值可以被<button>、<input type="submit">或<input type="image">元素上的formenctype属性覆盖。

method

提交表单时使用的HTTP方法。唯一允许的方法/值是（不区分大小写）

  • post：POST方法；表单数据作为请求正文发送。
  • get（默认）：GET；表单数据附加到action URL，并使用?分隔符。当表单没有副作用时，请使用此方法。
  • dialog：当表单位于<dialog>内部时，关闭对话框并导致在提交时触发submit事件，而无需提交数据或清除表单。

此值会被<button>、<input type="submit">或<input type="image">元素上的formmethod属性覆盖。

novalidate

此布尔属性指示表单在提交时不应进行验证。如果未设置此属性（因此表单**将**进行验证），则可以被属于表单的<button>、<input type="submit">或<input type="image">元素上的formnovalidate属性覆盖。

target

指示在提交表单后在何处显示响应。它是浏览上下文（例如，选项卡、窗口或 iframe）的名称/关键字。以下关键字具有特殊含义

  • _self（默认）：加载到与当前浏览上下文相同的浏览上下文。
  • _blank：加载到一个新的未命名的浏览上下文。这提供了与设置rel="noopener"相同的行为，该行为不会设置window.opener。
  • _parent：加载到当前浏览上下文的父浏览上下文。如果没有父级，则行为与_self相同。
  • _top：加载到顶级浏览上下文（即，是当前浏览上下文的祖先并且没有父级的浏览上下文）。如果没有父级，则行为与_self相同。
  • _unfencedTop：将嵌入式受限框架内表单的响应加载到顶级框架（即，与其他保留的目标不同，遍历受限框架的根之外）。仅在受限框架内可用。

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

示例

html
<!-- Form which will send a GET request to the current URL -->
<form method="get">
  <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>Do you agree to the terms?</legend>
    <label><input type="radio" name="radio" value="yes" /> Yes</label>
    <label><input type="radio" name="radio" value="no" /> No</label>
  </fieldset>
</form>

结果

技术摘要

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

规范

规范
HTML 标准
# the-form-element

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅