HTML
动态标准 — 最后更新于 2024 年 9 月 12 日
动态标准 — 最后更新于 2024 年 9 月 12 日
所有当前引擎都支持。
本节是非规范性的。
表单是网页的一个组件，它包含表单控件，例如文本、按钮、复选框、范围或颜色选择器控件。用户可以与这样的表单交互，提供数据，然后可以将这些数据发送到服务器进行进一步处理（例如，返回搜索或计算的结果）。在许多情况下，不需要客户端脚本，尽管提供了一个 API，以便脚本可以增强用户体验或将表单用于除向服务器提交数据以外的其他目的。
编写表单包括几个步骤，这些步骤可以按任何顺序执行：编写用户界面、实现服务器端处理和配置用户界面以与服务器通信。
本节是非规范性的。
为了简要介绍，我们将创建一个披萨订购表单。
任何表单都从一个 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 > 本节是非规范性的。
编写服务器端处理程序的具体细节超出了本规范的范围。为了简要介绍，我们将假设位于 https://pizza.example.com/order.cgi 上的脚本配置为使用 application/x-www-form-urlencoded 格式接受提交，并期望在 HTTP POST 正文中发送以下参数
custnamecusttelcustemailsizesmall、medium 或 largetoppingbacon、cheese、onion 和 mushroomdeliverycomments本节是非规范性的。
表单提交以多种方式暴露给服务器，最常见的是作为 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”，没有指定电子邮件地址，要求一个中号披萨，选择了“Extra Cheese”和“Mushroom”配料，输入了晚上 7 点的送货时间，并将送货说明文本控件留空，那么用户代理会将以下内容提交给在线网络服务
custname=Denise+Lawrence&custtel=555-321-8642&custemail=&size=medium&topping=cheese&topping=mushroom&delivery=19%3A00&comments=所有当前引擎都支持。
本节是非规范性的。
表单可以被标注，这样用户代理在表单提交之前就会检查用户的输入。服务器仍然需要验证输入是否有效（因为恶意用户可以轻松绕过表单验证），但它允许用户避免服务器作为唯一检查者而产生的等待。
最简单的标注是 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 事件将在每个无效的表单控件上触发。这对于显示表单问题的摘要很有用，因为通常浏览器本身一次只会报告一个问题。
本节是非规范性的。
一些浏览器尝试通过自动填充表单控件来帮助用户，而不是让用户每次都重新输入他们的信息。例如，一个询问用户电话号码的字段可以自动填充用户的电话号码。
为了帮助用户代理实现这一点，可以使用 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 > 本节是非规范性的。
一些设备，特别是那些带有虚拟键盘的设备，可以为用户提供多种输入模式。例如，在输入信用卡号码时，用户可能希望只看到数字 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 > 本节是非规范性的。
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 > 本节是非规范性的。
在此披萨外送示例中，时间以“HH:MM”格式指定：两位数表示小时，采用 24 小时制，两位数表示分钟。（也可以指定秒，尽管在本示例中不需要。）
然而，在某些地区，当向用户展示时间时，时间通常以不同的方式表达。例如，在美国，仍然普遍使用 12 小时制，并带有 am/pm 指示器，例如“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 或提交。
这允许页面和服务器中的脚本以一致的方式处理时、日期和数字，而无需支持数十种不同的格式，同时仍然满足用户的需求。
另请参阅 实现说明，了解有关表单控件本地化的内容。
出于历史原因，本节中的元素除了通常的类别（如 流内容、短语内容 和 交互内容）之外，还属于几个重叠（但略有不同）的类别。
许多元素是 与表单相关的元素，这意味着它们可以拥有 表单所有者。
这些 与表单相关的元素 分为几个子类别。
表示在 form.elements 和 fieldset.elements API 中列出的元素。这些元素还具有 form 内容属性和匹配的 form IDL 属性，允许作者指定显式的 表单所有者。
表示在 form 元素 提交 时，可用于 构建条目列表 的元素。
某些 可提交元素 可以根据其属性成为 按钮。下面的文字定义了元素何时为按钮。某些按钮是专门的 提交按钮。
表示从其 表单所有者 继承 autocapitalize 和 autocorrect 属性的元素。
某些元素（并非所有与表单相关的元素）被归类为 可标记元素。这些元素可以与 label 元素相关联。
form 元素 所有当前引擎都支持。
所有当前引擎都支持。
form 元素后代。accept-charset — 用于 表单提交 的字符编码。action — 用于 表单提交 的 URL。autocomplete — 表单中控件自动填充功能的默认设置。enctype — 用于 表单提交 的 条目列表 编码类型。method — 用于 表单提交 的变体。name — 在 document.forms API 中使用的表单名称。novalidate — 在 表单提交 时绕过表单控件验证。target — 用于 表单提交 的 可导航。rel[Exposed =Window ,
LegacyOverrideBuiltIns ,
LegacyUnenumerableNamedProperties ]
interface HTMLFormElement : HTMLElement {
[HTMLConstructor ] constructor ();
[CEReactions ] attribute DOMString acceptCharset ;
[CEReactions ] attribute USVString action ;
[CEReactions ] attribute DOMString autocomplete ;
[CEReactions ] attribute DOMString enctype ;
[CEReactions ] attribute DOMString encoding ;
[CEReactions ] attribute DOMString method ;
[CEReactions ] attribute DOMString name ;
[CEReactions ] attribute boolean noValidate ;
[CEReactions ] attribute DOMString target ;
[CEReactions ] attribute DOMString rel ;
[SameObject , PutForwards =value ] readonly attribute DOMTokenList relList ;
[SameObject ] readonly attribute HTMLFormControlsCollection elements ;
readonly attribute unsigned long length ;
getter Element (unsigned long index );
getter (RadioNodeList or Element ) (DOMString name );
undefined submit ();
undefined requestSubmit (optional HTMLElement ? submitter = null );
[CEReactions ] undefined reset ();
boolean checkValidity ();
boolean reportValidity ();
};该 form 元素 表示 一个 超链接，可以通过一系列 与表单相关的元素 进行操作，其中一些元素可以表示可编辑的值，这些值可以提交到服务器进行处理。
该 accept-charset 属性指定用于提交的字符编码。如果指定了该属性，则其值必须与 "UTF-8" 匹配，区分大小写。 [编码]
该 name 属性表示 form 在 forms 集合中的名称。该值不能是空字符串，并且在它所在的 forms 集合中，该值必须在所有 form 元素中是唯一的。
该 autocomplete 属性是 枚举属性，具有以下关键字和状态。
| 关键字 | 状态 | 简要描述 |
|---|---|---|
on
| on | 默认情况下，表单控件的 自动填充字段名称 将设置为 " |
off
| off | 默认情况下，表单控件的 自动填充字段名称 将设置为 " |
该属性的 缺失值默认值 和 无效值默认值 均为 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()所有当前引擎都支持。
form.requestSubmit([ submitter ])所有当前引擎都支持。
请求提交表单。与 submit() 不同，此方法包含 交互式约束验证 和触发 submit 事件，这两个事件都可以取消提交。
submitter 参数可用于指向特定的 提交按钮，其 formaction、formenctype、formmethod、formnovalidate 和 formtarget 属性可能会影响提交。此外，在 构建条目列表 用于提交时，将包含提交者；通常，按钮会排除在外。
form.reset()所有当前引擎都支持。
重置表单。
form.checkValidity()如果表单的控件全部有效，则返回 true；否则，返回 false。
form.reportValidity()如果表单的控件全部有效，则返回 true；否则，返回 false 并通知用户。
autocomplete IDL 属性必须 反映 同名内容属性，仅限于已知值。
所有当前引擎都支持。
name 和 rel IDL 属性必须 反映 同名内容属性。
所有当前引擎都支持。
acceptCharset IDL 属性必须 反映 accept-charset 内容属性。
elements IDL 属性必须返回一个以 form 元素的 根 为根的 HTMLFormControlsCollection，其过滤器匹配 列出元素，其 表单所有者 是 form 元素，除了 input 元素，其 type 属性处于 图像按钮 状态，出于历史原因，必须从这个特定的集合中排除。
length IDL 属性必须返回 elements 集合 表示 的节点数。
在任何时刻，支持的属性索引 是在该时刻由 elements 属性返回的对象支持的索引。
要 确定索引属性的值，用于 form 元素，用户代理必须返回 item 方法在 elements 集合上返回的值，当使用给定索引作为其参数调用时。
每个 form 元素都有一个将名称映射到元素的映射，称为 过去名称映射。它用于即使控件更改名称也保留控件的名称。
支持的属性名称 由从以下算法获得的名称组成，按从该算法获得的顺序
设 sourced names 为一个最初为空的排序列表，该列表由以下组成：一个字符串、一个元素、一个源，其中源是 id、name 或 past，并且，如果源是 past，则为一个年龄。
对于每个 列出元素 candidate，其 表单所有者 是 form 元素，除了任何 input 元素，其 type 属性处于 图像按钮 状态
对于 过去名称映射 中的每个条目 past entry，在 sourced names 中添加一个条目，该条目具有 past entry 的名称作为字符串，past entry 的元素作为元素，past 作为源，以及 past entry 在 过去名称映射 中的时间长度作为年龄。
按每个元组的元素条目的 树序 对 sourced names 进行排序，对具有相同元素的条目进行排序，将源为 id 的条目放在最前面，然后是源为 name 的条目，最后是源为 past 的条目，并按年龄对具有相同元素和源的条目进行排序，最老的条目放在最前面。
删除 sourced names 中名称为空字符串的任何条目。
删除 sourced names 中与映射中先前条目具有相同名称的任何条目。
返回来自 sourced names 的名称列表，保持其相对顺序。
要 确定命名属性的值 name，用于 form 元素，用户代理必须运行以下步骤
设 candidates 为一个 活动 RadioNodeList 对象，该对象包含所有 列出元素，其 表单所有者 是 form 元素，这些元素的 id 属性或 name 属性等于 name，除了 input 元素，其 type 属性处于 图像按钮 状态，以 树序 进行排序。
如果 candidates 为空，则令 candidates 为一个 实时 RadioNodeList 对象，其中包含所有 img 元素，其 表单所有者 为 form 元素，并且其 id 属性或 name 属性等于 name，按照 树状顺序 排列。
如果 candidates 为空，且 name 是 form 元素 过去名称映射 中的某个条目的名称：返回该映射中与 name 关联的对象。
如果 candidates 包含多个节点，则返回 candidates。
否则，candidates 恰好包含一个节点。在 form 元素的 过去名称映射 中添加一个从 name 到 candidates 中节点的映射，替换先前具有相同名称的条目（如果有）。
返回 candidates 中的节点。
如果 form 元素的 过去名称映射 中列出的元素更改了 表单所有者，则必须从该映射中删除其条目。
submit() 方法的步骤是 提交 this，从 this 中，将 提交来源为 submit() 方法 设置为 true。
requestSubmit(submitter) 方法在调用时，必须运行以下步骤
如果 submitter 不为 null，则
如果 submitter 的 表单所有者 不是此 form 元素，则抛出 "NotFoundError" DOMException。
否则，将 submitter 设置为此 form 元素。
reset() 方法在调用时，必须运行以下步骤
如果调用了 checkValidity() 方法，则用户代理必须 静态验证 form 元素的约束，如果约束验证返回一个 积极 的结果，则返回 true；如果返回一个 消极 的结果，则返回 false。
如果调用了 reportValidity() 方法，则用户代理必须 交互式验证 form 元素的约束，如果约束验证返回一个 积极 的结果，则返回 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 > label 元素所有当前引擎都支持。
所有当前引擎都支持。
label 元素。for — 将标签与表单控件关联[Exposed =Window ]
interface HTMLLabelElement : HTMLElement {
[HTMLConstructor ] constructor ();
readonly attribute HTMLFormElement ? form ;
[CEReactions ] attribute DOMString htmlFor ;
readonly attribute HTMLElement ? control ;
};label 元素 表示 用户界面中的标题。该标题可以与特定的表单控件相关联，称为 label 元素的 已标记控件，可以通过使用 for 属性或将表单控件放在 label 元素本身中来实现。
除了以下规则中另有说明外，label 元素没有 已标记控件。
所有当前引擎都支持。
for 属性可以指定来指示要与该标题相关联的表单控件。如果指定了该属性，则该属性的值必须是 ID，它是在与 label 元素相同的 树 中的 可标记元素。如果指定了该属性，并且在该 树 中存在一个元素，其 ID 等于 for 属性的值，并且按照 树状顺序 排列的第一个这样的元素是 可标记元素，则该元素是 label 元素的 已标记控件。
如果未指定 for 属性，但 label 元素具有 可标记元素 后代，则按照 树状顺序 排列的第一个这样的后代是 label 元素的 已标记控件。
label 元素的确切默认显示方式和行为，尤其是其 激活行为 可能是什么（如果有的话），应该与平台的标签行为相匹配。对于针对 label 元素的 交互式内容 后代以及这些 交互式内容 后代的任何后代的事件，label 元素的 激活行为 必须是无操作。
与表单相关的自定义元素 是 可标记元素，因此对于用户代理而言，如果 label 元素的 激活行为 会影响 已标记控件，那么内置元素和自定义元素都会受到影响。
例如，在平台上，如果单击标签会激活表单控件，则单击以下代码片段中的 label 可能会触发用户代理在 input 元素上 触发一个 click 事件，就好像该元素本身被用户触发一样
< label >< input type = checkbox name = lost > Lost</ label > 类似地，假设 my-checkbox 被声明为一个 与表单相关的自定义元素（就像 此示例 中一样），则以下代码
< label >< my-checkbox name = lost ></ my-checkbox > Lost</ label > 将具有相同的行为，即在 my-checkbox 元素上 触发一个 click 事件。
在其他平台上，这两种情况的行为可能只是将焦点设置到控件上，或者无操作。
以下示例展示了三个表单控件，每个控件都有一个标签，其中两个标签带有少量文字，显示用户应使用的正确格式。
< 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。
所有当前引擎都支持。
control IDL 属性必须返回 label 元素的 已标记控件（如果有），否则返回 null。
form IDL 属性必须运行以下步骤
formlabelform列出的表单关联元素 上不同，并且labelform
control.labels所有当前引擎都支持。
所有当前引擎都支持。
所有当前引擎都支持。
所有当前引擎都支持。
所有当前引擎都支持。
所有当前引擎都支持。
所有当前引擎都支持。
可标记的元素 和所有input实时NodeListlabel树状顺序），其关联的控件 是该元素。labels可标记的元素 上（不是表单关联的自定义元素），以及在inputNodeListinputtype 状态，在这种情况下，它必须返回 null。
所有当前引擎都支持。
表单关联的自定义元素 没有labelsElementInternalslabels目标元素 不是表单关联的自定义元素，则必须抛出一个"NotSupportedError"DOMExceptionNodeList
此（非符合标准的）示例显示了当inputtypeNodeListlabels
<!doctype html>
< p >< label >< input ></ label ></ p >
< script >
const input = document. querySelector( 'input' );
const labels = input. labels;
console. assert( labels. length === 1 );
input. type = 'hidden' ;
console. assert( labels. length === 0 ); // the input is no longer the label's labeled control
console. assert( input. labels === null );
input. type = 'checkbox' ;
console. assert( labels. length === 1 ); // the input is once again the label's labeled control
console. assert( input. labels === labels); // same value as returned originally
</ script >