<form>: 表单元素

试一试

<form action="" method="get" class="form-example">
  <div class="form-example">
    <label for="name">Enter your name: </label>
    <input type="text" name="name" id="name" required />
  </div>
  <div class="form-example">
    <label for="email">Enter your email: </label>
    <input type="email" name="email" id="email" required />
  </div>
  <div class="form-example">
    <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 伪类，根据表单内的 elements 是否有效来设置 <form> 元素的样式。

属性

此元素包含全局属性。

accept 已废弃

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

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

accept-charset

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

autocapitalize

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

autocomplete

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

• off：浏览器可能不会自动完成条目。（浏览器倾向于忽略可疑的登录表单；请参见管理登录字段的自动填充。）
• on：浏览器可以自动完成条目。

name

表单的名称。该值不能为空字符串，并且在它所属的表单集合中的 form 元素中必须是唯一的（如果有）。该名称成为 Window、Document 和 document.forms 对象的属性，包含对表单元素的引用。

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 属性覆盖。

目标

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

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

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

示例

<!-- 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>

结果

技术摘要

规范

浏览器兼容性

另见

• HTML 表单指南
• 创建表单时使用的其他元素：<button>、<datalist>、<fieldset>、<input>、<label>、<legend>、<meter>、<optgroup>、<option>、<output>、<progress>、<select>、<textarea>。
• 获取表单中元素的列表：HTMLFormElement.elements
• ARIA：表单角色
• ARIA：搜索角色