HTML：活文档标准

面向 Web 开发人员版 — 最后更新于 2024 年 9 月 12 日

1. 1. 4.10 表单
      1. 4.10.1 简介
         1. 4.10.1.1 编写表单的用户界面
         2. 4.10.1.2 实现表单的服务器端处理
         3. 4.10.1.3 配置表单以与服务器通信
         4. 4.10.1.4 客户端表单验证
         5. 4.10.1.5 启用客户端表单控件的自动填充
         6. 4.10.1.6 改善移动设备上的用户体验
         7. 4.10.1.7 字段类型、自动填充字段名称和输入模式之间的区别
         8. 4.10.1.8 日期、时间和数字格式
      2. 4.10.2 类别
      3. 4.10.3 form 元素
      4. 4.10.4 label 元素

4.10 表单

4.10.1 简介

表单是网页的一个组件，它包含表单控件，例如文本、按钮、复选框、范围或颜色选择器控件。用户可以与这样的表单交互，提供数据，然后可以将这些数据发送到服务器进行进一步处理（例如，返回搜索或计算的结果）。在许多情况下，不需要客户端脚本，尽管提供了一个 API，以便脚本可以增强用户体验或将表单用于除将数据提交到服务器之外的其他目的。

编写表单包括几个步骤，这些步骤可以按任意顺序执行：编写用户界面、实现服务器端处理以及配置用户界面以与服务器通信。

4.10.1.1 编写表单的用户界面

出于本简要介绍的目的，我们将创建一个披萨订购表单。

任何表单都以一个form元素开始，其中包含控件。大多数控件都由input元素表示，默认情况下它提供一个文本控件。要标记控件，使用label元素；标签文本和控件本身都放在label元素内。表单的每个部分都被视为一个段落，并且通常使用p元素与其他部分分隔。将这些组合在一起，以下是询问客户姓名的一种方法

<form>
 <p><label>Customer name: <input></label></p>
</form>

要让用户选择披萨的大小，我们可以使用一组单选按钮。单选按钮也使用input元素，这次使用type属性，其值为radio。为了使单选按钮作为一个组工作，它们使用name属性赋予一个共同的名称。要将一批控件组合在一起，例如，在这种情况下，单选按钮，可以使用fieldset元素。这样的控件组的标题由fieldset中的第一个元素给出，该元素必须是legend元素。

<form>
 <p><label>Customer name: <input></label></p>
 <fieldset>
  <legend> Pizza Size </legend>
  <p><label> <input type=radio name=size> Small </label></p>
  <p><label> <input type=radio name=size> Medium </label></p>
  <p><label> <input type=radio name=size> Large </label></p>
 </fieldset>
</form>

突出显示了与上一步的更改。

要选择配料，我们可以使用复选框。这些使用input元素，并使用type属性，其值为checkbox

<form>
 <p><label>Customer name: <input></label></p>
 <fieldset>
  <legend> Pizza Size </legend>
  <p><label> <input type=radio name=size> Small </label></p>
  <p><label> <input type=radio name=size> Medium </label></p>
  <p><label> <input type=radio name=size> Large </label></p>
 </fieldset>
 <fieldset>
  <legend> Pizza Toppings </legend>
  <p><label> <input type=checkbox> Bacon </label></p>
  <p><label> <input type=checkbox> Extra Cheese </label></p>
  <p><label> <input type=checkbox> Onion </label></p>
  <p><label> <input type=checkbox> Mushroom </label></p>
 </fieldset>
</form>

正在为此表单编写代码的比萨店总是出错，因此它需要一种与客户联系的方式。为此，我们可以使用专门用于电话号码（input元素，其type属性设置为tel）和电子邮件地址（input元素，其type属性设置为email）的表单控件。

<form>
 <p><label>Customer name: <input></label></p>
 <p><label>Telephone: <input type=tel></label></p>
 <p><label>Email address: <input type=email></label></p>
 <fieldset>
  <legend> Pizza Size </legend>
  <p><label> <input type=radio name=size> Small </label></p>
  <p><label> <input type=radio name=size> Medium </label></p>
  <p><label> <input type=radio name=size> Large </label></p>
 </fieldset>
 <fieldset>
  <legend> Pizza Toppings </legend>
  <p><label> <input type=checkbox> Bacon </label></p>
  <p><label> <input type=checkbox> Extra Cheese </label></p>
  <p><label> <input type=checkbox> Onion </label></p>
  <p><label> <input type=checkbox> Mushroom </label></p>
 </fieldset>
</form>

我们可以使用input元素，其type属性设置为time来询问送达时间。许多这些表单控件都有属性来控制可以指定的确切值；在这种情况下，三个特别感兴趣的属性是min、max和step。这些设置最小时间、最大时间和允许值之间的间隔（以秒为单位）。这家比萨店只在上午 11 点到晚上 9 点之间送货，并且不承诺比 15 分钟的增量更好，我们可以将其标记如下

<form>
 <p><label>Customer name: <input></label></p>
 <p><label>Telephone: <input type=tel></label></p>
 <p><label>Email address: <input type=email></label></p>
 <fieldset>
  <legend> Pizza Size </legend>
  <p><label> <input type=radio name=size> Small </label></p>
  <p><label> <input type=radio name=size> Medium </label></p>
  <p><label> <input type=radio name=size> Large </label></p>
 </fieldset>
 <fieldset>
  <legend> Pizza Toppings </legend>
  <p><label> <input type=checkbox> Bacon </label></p>
  <p><label> <input type=checkbox> Extra Cheese </label></p>
  <p><label> <input type=checkbox> Onion </label></p>
  <p><label> <input type=checkbox> Mushroom </label></p>
 </fieldset>
 <p><label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900"></label></p>
</form>

textarea元素可用于提供多行文本控件。在本例中，我们将使用它来提供一个空间，供客户提供送货说明。

<form>
 <p><label>Customer name: <input></label></p>
 <p><label>Telephone: <input type=tel></label></p>
 <p><label>Email address: <input type=email></label></p>
 <fieldset>
  <legend> Pizza Size </legend>
  <p><label> <input type=radio name=size> Small </label></p>
  <p><label> <input type=radio name=size> Medium </label></p>
  <p><label> <input type=radio name=size> Large </label></p>
 </fieldset>
 <fieldset>
  <legend> Pizza Toppings </legend>
  <p><label> <input type=checkbox> Bacon </label></p>
  <p><label> <input type=checkbox> Extra Cheese </label></p>
  <p><label> <input type=checkbox> Onion </label></p>
  <p><label> <input type=checkbox> Mushroom </label></p>
 </fieldset>
 <p><label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900"></label></p>
 <p><label>Delivery instructions: <textarea></textarea></label></p>
</form>

最后，为了使表单可提交，我们使用button元素。

<form>
 <p><label>Customer name: <input></label></p>
 <p><label>Telephone: <input type=tel></label></p>
 <p><label>Email address: <input type=email></label></p>
 <fieldset>
  <legend> Pizza Size </legend>
  <p><label> <input type=radio name=size> Small </label></p>
  <p><label> <input type=radio name=size> Medium </label></p>
  <p><label> <input type=radio name=size> Large </label></p>
 </fieldset>
 <fieldset>
  <legend> Pizza Toppings </legend>
  <p><label> <input type=checkbox> Bacon </label></p>
  <p><label> <input type=checkbox> Extra Cheese </label></p>
  <p><label> <input type=checkbox> Onion </label></p>
  <p><label> <input type=checkbox> Mushroom </label></p>
 </fieldset>
 <p><label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900"></label></p>
 <p><label>Delivery instructions: <textarea></textarea></label></p>
 <p><button>Submit order</button></p>
</form>

4.10.1.2 实现表单的服务器端处理

编写服务器端处理程序的确切细节超出了本规范的范围。出于本介绍的目的，我们假设位于https://pizza.example.com/order.cgi的脚本已配置为使用application/x-www-form-urlencoded格式接受提交，并期望在 HTTP POST 主体中发送以下参数。

custname

客户姓名

custtel

客户电话号码

custemail

客户电子邮件地址

size

披萨尺寸，可以是small、medium或large

topping

配料，为每个选定的配料指定一次，允许的值为bacon、cheese、onion和mushroom

delivery

所需的送达时间

comments

送货说明

4.10.1.3 配置表单以与服务器通信

表单提交以多种方式公开给服务器，最常见的是作为 HTTP GET 或 POST 请求。要指定使用的确切方法，在form元素上指定method属性。但这不会指定表单数据是如何编码的；要指定这一点，您需要使用enctype属性。您还必须使用action属性指定将处理提交数据的服务的URL。

对于要提交的每个表单控件，您都需要提供一个名称，该名称将用于在提交中引用数据。我们已经为单选按钮组指定了名称；相同的属性（name）也指定了提交名称。可以通过使用value属性赋予它们不同的值来区分提交中的单选按钮。

多个控件可以具有相同的名称；例如，这里我们为所有复选框赋予相同的名称，服务器通过查看使用该名称提交的值来区分哪个复选框被选中 - 与单选按钮一样，它们也使用value属性赋予唯一的值。

鉴于上一节中的设置，这都变成了

<form method="post"
      enctype="application/x-www-form-urlencoded"
      action="https://pizza.example.com/order.cgi">
 <p><label>Customer name: <input name="custname"></label></p>
 <p><label>Telephone: <input type=tel name="custtel"></label></p>
 <p><label>Email address: <input type=email name="custemail"></label></p>
 <fieldset>
  <legend> Pizza Size </legend>
  <p><label> <input type=radio name=size value="small"> Small </label></p>
  <p><label> <input type=radio name=size value="medium"> Medium </label></p>
  <p><label> <input type=radio name=size value="large"> Large </label></p>
 </fieldset>
 <fieldset>
  <legend> Pizza Toppings </legend>
  <p><label> <input type=checkbox name="topping" value="bacon"> Bacon </label></p>
  <p><label> <input type=checkbox name="topping" value="cheese"> Extra Cheese </label></p>
  <p><label> <input type=checkbox name="topping" value="onion"> Onion </label></p>
  <p><label> <input type=checkbox name="topping" value="mushroom"> Mushroom </label></p>
 </fieldset>
 <p><label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900" name="delivery"></label></p>
 <p><label>Delivery instructions: <textarea name="comments"></textarea></label></p>
 <p><button>Submit order</button></p>
</form>

某些属性如何使用引号括起其值而其他属性则没有，这没有特别的意义。HTML 语法允许使用各种等效的有效方法来指定属性，如语法部分所述。

例如，如果客户输入“Denise Lawrence”作为其姓名，“555-321-8642”作为其电话号码，未指定电子邮件地址，要求一个中号披萨，选择了额外奶酪和蘑菇配料，输入送达时间为晚上 7 点，并留下送货说明文本控件为空，则用户代理将以下内容提交到在线 Web 服务

custname=Denise+Lawrence&custtel=555-321-8642&custemail=&size=medium&topping=cheese&topping=mushroom&delivery=19%3A00&comments=

4.10.1.4 客户端表单验证

表单可以以这样一种方式进行注释，即用户代理将在提交表单之前检查用户的输入。服务器仍然必须验证输入是否有效（因为恶意用户可以轻松绕过表单验证），但这允许用户避免因服务器成为用户输入的唯一检查器而产生的等待。

最简单的注释是required 属性，它可以指定在 input 元素上，表示只有在提供值的情况下才能提交表单。通过将此属性添加到客户姓名、披萨尺寸和送达时间字段，我们允许用户代理在用户未填写这些字段的情况下提交表单时通知用户。

<form method="post"
      enctype="application/x-www-form-urlencoded"
      action="https://pizza.example.com/order.cgi">
 <p><label>Customer name: <input name="custname" required></label></p>
 <p><label>Telephone: <input type=tel name="custtel"></label></p>
 <p><label>Email address: <input type=email name="custemail"></label></p>
 <fieldset>
  <legend> Pizza Size </legend>
  <p><label> <input type=radio name=size required value="small"> Small </label></p>
  <p><label> <input type=radio name=size required value="medium"> Medium </label></p>
  <p><label> <input type=radio name=size required value="large"> Large </label></p>
 </fieldset>
 <fieldset>
  <legend> Pizza Toppings </legend>
  <p><label> <input type=checkbox name="topping" value="bacon"> Bacon </label></p>
  <p><label> <input type=checkbox name="topping" value="cheese"> Extra Cheese </label></p>
  <p><label> <input type=checkbox name="topping" value="onion"> Onion </label></p>
  <p><label> <input type=checkbox name="topping" value="mushroom"> Mushroom </label></p>
 </fieldset>
 <p><label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900" name="delivery" required></label></p>
 <p><label>Delivery instructions: <textarea name="comments"></textarea></label></p>
 <p><button>Submit order</button></p>
</form>

还可以使用 maxlength 属性限制输入的长度。通过将其添加到 textarea 元素，我们可以将用户限制在 1000 个字符以内，防止他们向忙碌的送货司机写冗长的文章，而不是保持专注和重点。

<form method="post"
      enctype="application/x-www-form-urlencoded"
      action="https://pizza.example.com/order.cgi">
 <p><label>Customer name: <input name="custname" required></label></p>
 <p><label>Telephone: <input type=tel name="custtel"></label></p>
 <p><label>Email address: <input type=email name="custemail"></label></p>
 <fieldset>
  <legend> Pizza Size </legend>
  <p><label> <input type=radio name=size required value="small"> Small </label></p>
  <p><label> <input type=radio name=size required value="medium"> Medium </label></p>
  <p><label> <input type=radio name=size required value="large"> Large </label></p>
 </fieldset>
 <fieldset>
  <legend> Pizza Toppings </legend>
  <p><label> <input type=checkbox name="topping" value="bacon"> Bacon </label></p>
  <p><label> <input type=checkbox name="topping" value="cheese"> Extra Cheese </label></p>
  <p><label> <input type=checkbox name="topping" value="onion"> Onion </label></p>
  <p><label> <input type=checkbox name="topping" value="mushroom"> Mushroom </label></p>
 </fieldset>
 <p><label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900" name="delivery" required></label></p>
 <p><label>Delivery instructions: <textarea name="comments" maxlength=1000></textarea></label></p>
 <p><button>Submit order</button></p>
</form>

当提交表单时，每个无效的表单控件都会触发 invalid 事件。这对于显示表单问题的摘要很有用，因为通常浏览器本身一次只会报告一个问题。

4.10.1.5 启用客户端表单控件的自动填充

某些浏览器试图通过自动填充表单控件来帮助用户，而不是让用户每次都重新输入信息。例如，一个询问用户电话号码的字段可以自动填充用户的电话号码。

为了帮助用户代理执行此操作，可以使用 autocomplete 属性来描述字段的用途。在本表单中，我们有三个字段可以以这种方式进行有用的注释：有关谁将收到披萨的信息。添加此信息如下所示

<form method="post"
      enctype="application/x-www-form-urlencoded"
      action="https://pizza.example.com/order.cgi">
 <p><label>Customer name: <input name="custname" required autocomplete="shipping name"></label></p>
 <p><label>Telephone: <input type=tel name="custtel" autocomplete="shipping tel"></label></p>
 <p><label>Email address: <input type=email name="custemail" autocomplete="shipping email"></label></p>
 <fieldset>
  <legend> Pizza Size </legend>
  <p><label> <input type=radio name=size required value="small"> Small </label></p>
  <p><label> <input type=radio name=size required value="medium"> Medium </label></p>
  <p><label> <input type=radio name=size required value="large"> Large </label></p>
 </fieldset>
 <fieldset>
  <legend> Pizza Toppings </legend>
  <p><label> <input type=checkbox name="topping" value="bacon"> Bacon </label></p>
  <p><label> <input type=checkbox name="topping" value="cheese"> Extra Cheese </label></p>
  <p><label> <input type=checkbox name="topping" value="onion"> Onion </label></p>
  <p><label> <input type=checkbox name="topping" value="mushroom"> Mushroom </label></p>
 </fieldset>
 <p><label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900" name="delivery" required></label></p>
 <p><label>Delivery instructions: <textarea name="comments" maxlength=1000></textarea></label></p>
 <p><button>Submit order</button></p>
</form>

4.10.1.6 改善移动设备上的用户体验

某些设备，特别是带有虚拟键盘的设备，可以为用户提供多种输入模式。例如，在键入信用卡号码时，用户可能只想看到数字 0-9 的按键，而在键入姓名时，他们可能希望看到一个默认情况下将每个单词的首字母大写的表单字段。

使用 inputmode 属性，我们可以选择合适的输入模式。

<form method="post"
      enctype="application/x-www-form-urlencoded"
      action="https://pizza.example.com/order.cgi">
 <p><label>Customer name: <input name="custname" required autocomplete="shipping name"></label></p>
 <p><label>Telephone: <input type=tel name="custtel" autocomplete="shipping tel"></label></p>
 <p><label>Buzzer code: <input name="custbuzz" inputmode="numeric"></label></p>
 <p><label>Email address: <input type=email name="custemail" autocomplete="shipping email"></label></p>
 <fieldset>
  <legend> Pizza Size </legend>
  <p><label> <input type=radio name=size required value="small"> Small </label></p>
  <p><label> <input type=radio name=size required value="medium"> Medium </label></p>
  <p><label> <input type=radio name=size required value="large"> Large </label></p>
 </fieldset>
 <fieldset>
  <legend> Pizza Toppings </legend>
  <p><label> <input type=checkbox name="topping" value="bacon"> Bacon </label></p>
  <p><label> <input type=checkbox name="topping" value="cheese"> Extra Cheese </label></p>
  <p><label> <input type=checkbox name="topping" value="onion"> Onion </label></p>
  <p><label> <input type=checkbox name="topping" value="mushroom"> Mushroom </label></p>
 </fieldset>
 <p><label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900" name="delivery" required></label></p>
 <p><label>Delivery instructions: <textarea name="comments" maxlength=1000></textarea></label></p>
 <p><button>Submit order</button></p>
</form>

4.10.1.7 字段类型、自动填充字段名称和输入模式之间的区别

type、autocomplete 和 inputmode 属性看起来可能令人困惑地相似。例如，在这三种情况下，字符串“email”都是有效值。本节试图说明这三个属性之间的区别，并提供建议，说明如何使用它们。

type 属性在 input 元素上决定用户代理将使用哪种控件来显示字段。在该属性的不同值之间进行选择，与选择是否使用 input 元素、textarea 元素、select 元素等相同。

autocomplete 属性则描述了用户将输入的值的实际含义。在该属性的不同值之间进行选择，与选择元素的标签相同。

首先，考虑电话号码。如果页面正在向用户索取电话号码，则应使用的正确表单控件是 <input type=tel>。但是，要使用哪个 autocomplete 值取决于页面索取的是哪个电话号码，他们是否期望国际格式的电话号码或仅本地格式，等等。

例如，电子商务网站上结账流程的一部分页面，用于客户购买要运送给朋友的礼物，可能需要购买者的电话号码（以防付款问题）和朋友的电话号码（以防送货问题）。如果网站期望国际电话号码（带有国家代码前缀），则可能如下所示

<p><label>Your phone number: <input type=tel name=custtel autocomplete="billing tel"></label>
<p><label>Recipient's phone number: <input type=tel name=shiptel autocomplete="shipping tel"></label>
<p>Please enter complete phone numbers including the country code prefix, as in "+1 555 123 4567".

但如果网站仅支持英国客户和收件人，则可能如下所示（请注意使用了 tel-national 而不是 tel）

<p><label>Your phone number: <input type=tel name=custtel autocomplete="billing tel-national"></label>
<p><label>Recipient's phone number: <input type=tel name=shiptel autocomplete="shipping tel-national"></label>
<p>Please enter complete UK phone numbers, as in "(01632) 960 123".

现在，考虑一个人的首选语言。正确的 autocomplete 值是 language。但是，可以有多种不同的表单控件用于此目的：文本控件 (<input type=text>)、下拉列表 (<select>)、单选按钮 (<input type=radio>) 等。它仅取决于所需的界面类型。

最后，考虑姓名。如果页面只需要用户的姓名，则相关控件是 <input type=text>。如果页面正在询问用户的全名，则相关 autocomplete 值是 name。

<p><label>Japanese name: <input name="j" type="text" autocomplete="section-jp name"></label>
<label>Romanized name: <input name="e" type="text" autocomplete="section-en name"></label>

在此示例中，section-* 关键字在 autocomplete 属性的值中告诉用户代理这两个字段期望的是不同的姓名。如果没有它们，当用户为第一个字段提供值时，用户代理可能会自动用第一个字段中的值填充第二个字段。

关键字的“-jp”和“-en”部分对用户代理是不可见的；用户代理无法从这些关键字推断出这两个姓名分别需要用日语和英语表示。

除了关于 type 和 autocomplete 的选择之外，inputmode 属性决定在控件为文本控件时使用哪种输入模式（例如，虚拟键盘）。

考虑信用卡号码。合适的输入类型不是 <input type=number>，如下所述；而是 <input type=text>。为了鼓励用户代理无论如何使用数字输入模式（例如，仅显示数字的虚拟键盘），页面将使用

<p><label>Credit card number:
                <input name="cc" type="text" inputmode="numeric" pattern="[0-9]{8,19}" autocomplete="cc-number">
</label></p>

4.10.1.8 日期、时间和数字格式

在此披萨送达示例中，时间采用“HH:MM”格式指定：24 小时制的小时两位数字和分钟两位数字。（也可以指定秒，但在此示例中不是必需的。）

但是，在某些地区，向用户呈现时间时通常会以不同的方式表达。例如，在美国，使用带 am/pm 指示符的 12 小时制时钟仍然很常见，例如“2pm”。在法国，通常使用“h”字符将小时与分钟分开，例如“14h00”。

日期也存在类似的问题，并且还增加了以下复杂性：即使组件的顺序也不总是保持一致——例如，在塞浦路斯，2003 年 2 月 1 日通常写成“1/2/03”，而在日本，同一日期通常写成“2003年02月01日”——甚至在数字中，地区也存在差异，例如，使用什么标点符号作为小数点分隔符和千位分隔符。

因此，必须区分 HTML 和表单提交中使用的时间、日期和数字格式（始终是本规范中定义的格式，并且基于完善的 ISO 8601 标准，用于计算机可读的日期和时间格式），以及浏览器向用户呈现的时间、日期和数字格式以及浏览器从用户处接受的输入格式。

“在线”使用的格式，即在 HTML 标记和表单提交中使用的格式，旨在可供计算机读取，并且与用户的区域设置无关。例如，日期始终以“YYYY-MM-DD”格式编写，例如“2003-02-01”。虽然某些用户可能会看到此格式，但其他用户可能会看到“01.02.2003”或“February 1, 2003”。

页面以线格式提供的时间、日期或数字将在显示给用户之前转换为用户的首选表示形式（基于用户首选项或页面本身的区域设置）。类似地，在用户使用其首选格式输入时间、日期或数字后，用户代理会将其转换回线格式，然后再将其放入 DOM 或提交。

这允许页面和服务器中的脚本以一致的方式处理时间、日期和数字，而无需支持数十种不同的格式，同时仍然支持用户的需求。

4.10.2 类别

出于历史原因，除了通常的类别（如流内容、短语内容和交互式内容）外，本节中的元素还属于几个重叠（但细微差别）的类别。

许多元素是与表单关联的元素，这意味着它们可以具有表单所有者。

• 按钮
• 字段集
• 输入
• 对象
• 输出
• 选择
• 文本区域
• 图像
• 与表单关联的自定义元素

与表单关联的元素分为几个子类别。

列出的元素

表示在form.elements和fieldset.elements API 中列出的元素。这些元素还具有form内容属性和匹配的form IDL 属性，允许作者指定显式的表单所有者。

• 按钮
• 字段集
• 输入
• 对象
• 输出
• 选择
• 文本区域
• 与表单关联的自定义元素

可提交的元素

表示当form元素提交时，可用于构建条目列表的元素。

• 按钮
• 输入
• 选择
• 文本区域
• 与表单关联的自定义元素

某些可提交的元素可以根据其属性成为按钮。下面的文字定义了何时元素是按钮。某些按钮专门是提交按钮。

可重置的元素

表示当form元素重置时可能受到影响的元素。

• 输入
• 输出
• 选择
• 文本区域
• 与表单关联的自定义元素

继承自动大写和小写更正的元素

表示从其表单所有者继承autocapitalize和autocorrect属性的元素。

• 按钮
• 字段集
• 输入
• 输出
• 选择
• 文本区域

某些元素（并非所有与表单关联的元素）被归类为可标记元素。这些是可以与label元素关联的元素。

• 按钮
• input（如果type属性不处于隐藏状态）
• 计量器
• 输出
• 进度条
• 选择
• 文本区域
• 与表单关联的自定义元素

4.10.3 form元素

类别:

流内容.

可感知内容.

可以使用此元素的上下文:

在预期流内容的地方。

内容模型:

流内容，但没有form元素后代。

在 text/html 中省略标签:

两个标签都不能省略。

内容属性:

全局属性

accept-charset — 用于表单提交的字符编码

action — 用于表单提交的URL

autocomplete — 表单中控件的自动填充功能的默认设置

enctype — 用于表单提交的条目列表编码类型

method — 用于表单提交的变体

name — 用于document.forms API 的表单名称

novalidate — 绕过表单控件验证以进行表单提交

target — 用于表单提交的可导航

rel

可访问性注意事项:

对于作者.

对于实现者.

DOM 接口:

使用 HTMLFormElement。

form元素表示一个超链接，可以通过一系列与表单关联的元素进行操作，其中一些元素可以表示可编辑的值，这些值可以提交到服务器进行处理。

accept-charset属性提供了用于提交的字符编码。如果指定，则该值必须与“UTF-8”进行不区分大小写的 ASCII匹配。[ENCODING]

name属性表示form在forms集合中的名称。该值不能是空字符串，并且在它所在的forms集合中，如果存在，该值在form元素之间必须是唯一的。

autocomplete属性是一个枚举属性，具有以下关键字和状态。

该属性的缺失值默认值和无效值默认值均为on状态。

action、enctype、method、novalidate和target属性是表单提交属性。

rel属性在form元素上控制元素创建的链接类型。该属性的值必须是一组唯一的以空格分隔的标记。允许的关键字及其含义在前面部分定义。

rel的支持的标记是在HTML 链接类型中定义的，这些类型在form元素上是允许的，会影响处理模型，并且受用户代理支持。可能的支持的标记是noreferrer、noopener和opener。rel的支持的标记必须仅包含用户代理为其实现处理模型的此列表中的标记。

form.elements

返回表单中表单控件的 HTMLFormControlsCollection（出于历史原因，不包括图像按钮）。

form.length

返回表单中表单控件的数量（出于历史原因，不包括图像按钮）。

form[index]

返回表单中第 index 个元素（出于历史原因，不包括图像按钮）。

form[name]

返回表单中具有给定ID或name的表单控件（或者，如果有多个，则返回表单控件的 RadioNodeList）（出于历史原因，不包括图像按钮）；或者，如果没有，则返回具有给定 ID 的img元素。

一旦使用特定名称引用了某个元素，该名称将继续可用作在此方法中引用该元素的方式，即使元素的实际ID或name发生更改，只要该元素保留在树中。

如果有多个匹配项，则返回包含所有这些元素的 RadioNodeList 对象。

form.submit()

提交表单，绕过交互式约束验证，并且不触发submit事件。

form.requestSubmit([ submitter ])

请求提交表单。与submit()不同，此方法包括交互式约束验证和触发submit事件，这两者都可能取消提交。

可以使用 submitter 参数指向特定的 提交按钮，其 formaction、formenctype、formmethod、formnovalidate 和 formtarget 属性会影响提交。此外，在 构建提交的条目列表 时，将包含 submitter；通常，按钮会被排除。

form.reset()

重置表单。

form.checkValidity()

如果表单的所有控件都有效，则返回 true；否则，返回 false。

form.reportValidity()

如果表单的所有控件都有效，则返回 true；否则，返回 false 并通知用户。

<form action="https://www.google.com/search" method="get">
 <label>Google: <input type="search" name="q"></label> <input type="submit" value="Search...">
</form>
<form action="https://www.bing.com/search" method="get">
 <label>Bing: <input type="search" name="q"></label> <input type="submit" value="Search...">
</form>

4.10.4 label 元素

类别:

流内容.

短语内容.

交互式内容.

可感知内容.

可以使用此元素的上下文:

在预期 短语内容 的地方。

内容模型:

短语内容，但没有后代 可标记元素（除非它是元素的 已标记控件），并且没有后代 label 元素。

在 text/html 中省略标签:

两个标签都不能省略。

内容属性:

全局属性

for — 将标签与表单控件关联

可访问性注意事项:

对于作者.

对于实现者.

DOM 接口:

使用 HTMLLabelElement。

label 元素 表示 用户界面中的标题。可以使用 for 属性或将表单控件放在 label 元素本身内来将标题与特定的表单控件关联。

可以指定 for 属性以指示要与其关联标题的表单控件。如果指定了该属性，则该属性的值必须是与 label 元素位于同一 树 中的 可标记元素 的 ID。

<p><label>Full name: <input name=fn> <small>Format: First Last</small></label></p>
<p><label>Age: <input name=age type=number min=0></label></p>
<p><label>Post code: <input name=pc> <small>Format: AB12 3CD</small></label></p>

label.control

返回与此元素关联的表单控件。

label.form

返回与此元素关联的表单控件的 表单所有者。

如果没有，则返回 null。

form IDL 属性在 label 元素上与 已列出 的 与表单关联的元素 上的 form IDL 属性不同，并且 label 元素没有 form 内容属性。

control.labels

返回表单控件与其关联的所有 label 元素的 NodeList。