《HTML标准》解读：详解表单及相关元素

本文为HTML标准解读系列文章，其他文章详见这里。

form元素是HTML表单的容器元素，HTML标准对它的含义是这么定义的：

The form element represents a hyperlink that can be manipulated through a collection of form-associated elements.

form元素代表了一个超链接，这个超链接可以使用表单相关元素的集合进行操作。

这里我加粗了两个关键词：

• 超链接：表示form元素可以导航到其他的页面，所以它也有其他超链接元素(a、area)所带有的特点，如使用target属性声明新页面使用的浏览上下文、使用rel属性声明超链接的语义。关于这一部分，我在《详解HTML链接元素》做了充分的讲解。
• 表单相关元素的集合：并不是所有form元素的子代都属于表单相关元素。可充当表单相关元素的有：button、fieldset、input、object、output、select、textarea、img以及表单相关的自定义元素，而其他的像label元素并不在这个集合之内。form元素可以通过elements属性访问它内部的表单相关元素的集合，反过来，表单相关元素可以通过form属性访问它所归属的form元素。

在表单相关元素中，你可能不太熟悉的是「表单相关的自定义元素」。当我们定义一个自定义元素的时候，可以使用static formAssociated = true表示这是一个表单相关的自定义元素，它会继承表单相关元素的语义以及功能:

// 声明表单相关的自定义元素
class MyCheckbox extends HTMLElement {
   
  static formAssociated = true;
  // ...
}

基于篇幅限制，我无法在这里展开表单相关的自定义元素的内容，让我们把注意力放回到更加核心的内容上。

可提交元素

在上面的form元素含义中，其实我省略后半句，完整的一句是这样的：

The form element represents a hyperlink that can be manipulated through a collection of form-associated elements, some of which can represent editable values that can be submitted to a server for processing.

form元素代表了一个超链接，这个超链接可以使用表单相关元素的集合进行操作，其中一些元素代表可编辑的值，且这些值可以提交到服务端进行处理。

这里的「一些元素」，指的是button、input、select、textarea以及表单相关的自定义元素，这些元素统称为「可提交元素（sumbittable elements）」，也只有这些元素可以作为表单的数据进行提交。

当表单进行提交的时候，浏览器会遍历表单内所有的可提交元素。如果一个可提交元素的name属性不为空，浏览器就会提取该元素的name属性值、value属性值，把这两个值结成对，称为一个「entry」。当所有可提交元素遍历完成后，就会得到一个「entry列表」，这个entry列表就是最终提交的数据的基础。

举个例子，在下面这个简易的登陆框中：

<form action="/login" method="POST">
    <p><label>用户名：<input type="text" name="username" required></label></p>
    <p><label>密码：<input type="password" name="password" required>