如何构建 HTML 表单

元素

元素按照一定的格式定义了表单和确定表单行为的属性。每次创建 HTML 表单时，都必须使用该元素，并将所有内容嵌套在表单中。许多辅助技术和浏览器插件都能发现 元素，并实施特殊钩子使其更易于使用。

我们早在之前的文章中就遇见过它了。

警告：

严禁在一个表单内嵌套另一个表单。嵌套会导致表单出现不可预测的行为。

在 元素之外也可以使用表单控件，但是如果你这样做了，那么除非使用 form 属性将其与表单关联，否则该控件与任何表单都没有任何关系。引入该特性是为了显式地将控件与表单绑定，即使控件没有嵌套在表单中。

下面我们来介绍一下嵌套在表单中的结构元素。

和 元素

元素是一种方便的用于创建具有相同目的（出于样式和语义目的）的微件组的方式。你可以在
起始标签后加上一个 元素，来给
做标签。 的文本内容形式地描述了
里所含有微件的用途。

许多辅助技术在使用 元素时，会将其视为相应

元素中每个控件标签的一部分。例如，Jaws 和 NVDA 等屏幕阅读器会在说出每个控件的标签之前先说出图例的内容。

这里有一个小例子：

html

Fruit juice size

备注：

你可以在 fieldset-legend.html（也可以查看在线示例）中看到该例。

当阅读上述表格时，屏幕阅读器将会为第一个微件读出“Fruit juice size small”，“Fruit juice size medium”为第二个，“Fruit juice size large”为第三个。

本例中的用例是最重要的。每当使用一组单选按钮时，都应该将它们嵌套在

元素中。还有其他用例，一般来说，
元素也可以用来对表单进行分段。理想情况下，长表单应该在拆分为多个页面，但是如果表单很长，却必须在单个页面上，那么将以不同的关联关系划分的分段，分别放在不同的 fieldset 里，可以提高可用性。

因为它对辅助技术的影响，

元素是构建无障碍表单的关键元素之一。无论如何，你有责任不去滥用它。如果可能，每次构建表单时，请尝试听一听屏幕阅读器如何解释它。如果听起来很奇怪，请尝试改进表单结构。

正如我们在前一篇文章中看到的，

html

当

还有另一种方法可以将表单控件与标签关联起来——将表单控件嵌套在

html

Name:

不过，即使在这种情况下，最佳做法也是设置 for 属性，以确保所有辅助技术都能理解标签和微件之间的关系。

如果没有设置标签，或者表单控件既没有隐式关联标签，也没有显式关联标签，屏幕阅读器只会读出“编辑”之类的东西，这样会没什么帮助。

标签也可点击！

正确设置标签的另一个好处是可以在所有浏览器中单击标签来激活相应的微件。这对于像文本输入这样的例子很有用，这样你可以通过点击标签，和点击输入区效果一样，来聚焦于它，这对于单选按钮和复选框尤其有用——这种控件的可点击区域可能非常小，设置标签来使它们可点击区域变大是非常有用的。

例如，点击下面示例中的“I like cherry”标签文本，就会切换 taste_cherry 复选框的选定状态：

html

备注：

你可以在 checkbox-label.html（也可以查看在线示例）中看到该例。

多个标签

严格地说，你可以在单个微件上放置多个标签，但是这不是一个好主意，因为一些辅助技术可能难以处理它们。在多个标签的情况下，你应该将微件和它的标签嵌套在一个

让我们考虑下面这个例子：

html

必填字段后随 *。

顶部的段落定义了必填元素的规则。该规则必须在使用之前列入，以便视力正常的用户和屏幕阅读器等辅助技术的用户在遇到必填元素之前就能了解其含义。虽然这有助于告知用户星号的含义，但不能依赖它。屏幕阅读器在遇到星号时会将其说成“星号”。当视力正常的鼠标用户悬停鼠标时，应显示“必须”，这可以通过使用 title 属性来实现。标题是否被朗读取决于屏幕阅读器的设置，因此同时包含 aria-label 属性更为可靠，屏幕阅读器始终会读取该属性。

上述变体的效果会随着时间的推移而增强：

在第一个例子中，标签根本没有和 input 一起被念出来——读出来的只是“编辑”和单独被念出的标签。多个

在第二个例子中，稍微显得清晰一点了——标签和输入一起，读出的是“名字 星号 名字 编辑 必须”，但标签仍然是单独读出的。这还是有点令人困惑，但这次还是稍微好一点了，因为 和 label 联系起来了。

第三个例子是最好的——实际标签是一起读出的，标签和输入读出的是“名字 必须 编辑 必须”。

备注：

你可能会得到一些不同的结果，这取决于你的屏幕阅读器。这是在 VoiceOver 上测试的（NVDA 的行为也类似）。我们也乐于听听你的试验结果。

备注：

你可以在 GitHub 上看到 required-labels.html（也可以查看在线示例）。不要运行 2 个或 3 个未注释版本的示例——如果你有多个标签和多个输入相同的 ID，那么屏幕阅读器肯定会感到困惑！

用于表单的通用 HTML 结构

除了特定于 HTML 表单的结构之外，还应该记住表单同样是 HTML。这意味着你可以使用 HTML 的所有强大功能来构造一个 HTML 表单。

正如你在示例中可以看到的，通常的做法是用

    或
      列表中的
    1. 元素来封装标签及其微件。

      和

      元素也很常用。建议使用列表来构建多个复选框或单选按钮。

      除了

      元素之外，使用 HTML 标题（如 h1、h2）和分段（如
      ）来构造一个复杂的表单也是一种常见的做法。

      最重要的是，要找到一种舒适的编码风格，使表单易于访问和使用。每个独立的功能部分都应包含在一个单独的

      元素中，
      元素包含单选按钮。

      动手练习：构建一个表单结构

      让我们把这些想法付诸实践，建立一个稍微复杂一点的表单结构——一个支付表单。这个表单将包含许多你可能还不了解的微件类型——现在不要担心这个，在下一篇文章（基本的原生表单控件）中，你将了解它们是如何工作的。现在，当你遵循下面的指令时，请仔细阅读这些描述，并开始理解我们使用的包装器元素是如何构造表单的，以及为什么这么做。

      在开始之前，在计算机上的一个新目录中，创建一个空白模板文件的本地副本。

      接下来，通过添加

      元素来创建一张表单：

      html

      在 标签内，以添加一个标题和段落开始，告诉用户必填的字段是如何标记的：

      html

      付款表单

      必需的字段已使用 * 标示。

      接下来，我们将在表单中添加一个更大的代码段，在我们之前的代码下面。在这里，你将看到，我们正在将联系人信息字段包装在一个单独的

      元素中。此外，我们有一组三个单选按钮，每个单选按钮都放在自己的列表中（
    2. ）元素。最后，我们有两个标准文本 和它们相关的