HTML 中的表单和按钮

正如前面提到的， 元素作为表单的外层容器，用于将所有的表单控件组织到一起。当点击 按钮时，所有在表单控件中填写的数据将会被提交到服务器。 元素可以包含多个属性，我们在示例中使用的两个最重要的属性是：

action：包含一个路径，用于指定提交的表单数据将发送到哪个页面进行处理。稍后，当你提交表单时，你会在 URL 中看到 /submit_page。你还会收到一个 404 错误响应，因为处理数据的页面实际上并不存在，但目前这样做是没有问题的。

method：指定将表单数据发送到服务器时使用的数据传输方法。现在你不必太过担心这个属性；当值为 get 时，数据会作为参数附加在 URL 的末尾进行发送。

检查提交的数据

在单独的浏览器标签页打开示例，尝试输入姓名“Bob”，电子邮件地址为“bob@bob.com”。

点击

。

action 和 method 属性会使表单数据以下列 URL 形式提交：

/some/url/submit_page?name=Bob&email=bob%40bob.com

结构化表单

你可以在 元素中包含任意的 HTML 元素，用于组织表单控件本身，并为 CSS 样式提供可定位的容器，以便进行样式设置等操作。

在示例中，我们使用了一个标题元素（

）来描述该表单的用途。

我们还将每一对输入框/标签和提交按钮分别放在一个单独的

元素中，这样每一组控件就会独占一行上。这些元素默认是行内（inline）的，这意味着如果我们不这么做，所有的控件将会处于同一行上。

这是表单结构化的常见形式。一些人使用

元素来分割表单控件，一些人使用

、

甚至是

元素。只要使用的元素在语义上合理，这些其实并没有太大区别。例如，将表单项分组放在不同的段落或者内容区块中，或者作为列表项是合乎语义的。但使用块级引用元素、侧边栏元素或者是联系人地址元素来表示就不太合适。

还有一个专门用来对表单控件进行分组的元素：

。当表单较复杂，或需要把多个复选框、单选按钮归为一组时，它就非常有用。稍后我们会给出几个

的示例。

元素

元素表示用户在表单中输入的各种数据项。让我们来看一个基础表单中的例子：

html

这些属性的含义如下：

type：指定要创建的表单控件类型。表单控件类型有很多，从各种简单的文本字段，到单选按钮、复选框等。当值为 text 时，会渲染一个可接受任意文本的基本文本框。

name：为该数据项指定一个名称。当表单提交时，数据会以名值对（name/value pairs）的形式发送。一般来说，name 属性的值就是这个数据项的“名称”，而用户在文本框输入的数据就是这个数据项的“值”。

id：指定一个用于标识该元素的 ID。在这里，它用于将该表单控件与对应的 标签关联起来。

required：指定该表单控件在提交表单前必须填写。这应仅用于必填字段，而不应设置在可选字段上。

你需要知道的是，有些输入类型的值并不是用户直接在字段中输入的。例如 会显示一个取色器，你可以从中选择颜色； 会显示一个单选按钮，可以被选中也可以不被选中。

对于单选按钮，一般需要在 value 属性中指定一个具体的值，表示当该按钮被选中时，提交到服务器的实际内容。注意，你可以在 text 和 color 等输入类型上也设置 value 属性，其效果是：表单控件在初次渲染完成时就预先填充这个值。

required 和 value 属性的实际效果

再次打开你之前在单独的浏览器标签页中加载的示例，尝试在两个字段都未填写任何内容的情况下提交表单。你会在“Name”字段旁看到一条错误提示，例如“请填写此字段”（不同浏览器的提示内容可能会有所不同）。这就是 required 属性和浏览器默认的客户端表单验证机制在起作用。

接着，尝试在第一个字段中输入一个有效的名字，但在第二个字段中输入一个无效的邮箱地址（例如“aaaa”）。这时你会在“Email”字段旁看到另一条错误提示，例如“请输入邮箱地址”。

现在尝试修改表单，在第一个 中加入 value="Bob"。当你重新加载页面时，会看到第一个输入框中默认填入了“Bob”。

特定类型的文本输入框

上面的第二个练习引出了一个有趣的问题。第二个输入字段特别要求输入一个邮箱地址，并会对填写的内容进行邮件格式的验证。如果你再次查看表单代码，就能发现原因——第二个 元素的 type 为 email。实际上，有许多专门用于处理特定类型数据的文本字段输入类型，例如：、 和 等等。

你可以点击以上链接，了解这些输入类型的用途。建议你也浏览一下我们的 参考，看看是否能发现其他更多专用的文本输入类型。

元素

如上所述， 元素为表单控件提供了标识性标签，用于描述应该在控件中输入的数据。你可以在 元素中放置任意文本内容，但这些内容应准确描述关联表单控件所期望的数据类型。标签与控件之间的关联方式是：给表单控件设置一个 id 属性，然后给 设置 for 属性，其值与该控件的 id 相同。

例如：

html姓名（必填）：

元素的重要性体现在多个方面，尤其包括以下几点：

当视力障碍用户使用屏幕阅读器浏览和操作网页内容时，屏幕阅读器在遇到每个控件时，会朗读与之关联的标签文本。这能让用户更容易理解每个控件需要输入什么内容。

它们允许用户不仅可以点击控件本身，还可以点击标签文本来聚焦表单控件。这对移动设备用户尤其有用，因为在触摸屏上用手指精确选择表单控件可能比较困难。在这种情况下，扩大 可点击区域 会非常有帮助。

显式与隐式表单标签

你在上文中看到的标签样式被称为显式表单标签——控件与标签之间的关联是通过 id 和 for 属性显式建立的。你也可以通过将控件嵌套在标签内的方式实现 隐式表单标签，如下所示：

html

姓名（必填）：

通过嵌套方式，控件与标签之间的关联是隐式建立的，因此你不再需要使用 id 和 for 属性。

这两种方式都可以使用，但我们建议你使用显式标签的方式。因为显式标签关联更容易识别和理解，尤其当你的 HTML 代码变得复杂时。此外，屏幕阅读器（以及其他辅助技术）有时不能正常处理隐式标签。

你可以在这篇文章中阅读更多关于表单标签的最佳实践：HTML Inputs and Labels: A Love Story，发表于 csstricks.com（2021 年）。

元素

当一个

元素被放在 form 元素中时，它的默认行为是提交表单，只要没有无效数据阻止客户端表单验证。你在之前的基础表单示例中已经见过了这种行为。

通过

元素的 type 属性可以指定按钮的其他行为：

明确声明该按钮是“提交按钮”。一般来说不需要显式声明，除非你的 中包含了多个按钮，并且你想明确表示哪个按钮是用于提交表单的。这种情况非常罕见。

创建一个重置按钮——这会立即清空表单中输入的所有内容，将表单恢复到初始状态。不建议使用重置按钮——在早期的网页中它们比较常见，但通常会造成更多困扰。许多人曾经经历过填写完长长的表单后，不小心点击了“重置”按钮而不是“提交”，结果只能重新填写表单。

创建一个普通按钮，其行为和 外的按钮一样。正如之前所见，普通按钮默认什么都不做，需要使用 JavaScript 来给它们添加功能。

备注：

你也可以通过 元素配合不同的 type 属性来创建上述三种按钮：、 和 。但与

相比，它们存在许多限制，因此推荐使用 元素。

关于无障碍的小提示

我们之前已经提到过表单标签在无障碍性方面的重要性，但我们还想补充一些关于正确使用语义化 HTML 元素创建表单的重要性。（例如，使用

提交表单，而不是使用一个借助 CSS 和 JavaScript 模拟出来的

元素）。你确实可以利用 CSS 和 JavaScript 把几乎任何 HTML 元素“伪装成”表单控件，看起来像是一个按钮、输入框、下拉菜单等。开发者这么做通常是出于设计上的考虑——某些原生表单控件确实比较难自定义样式。

然而，这么做反而会增加你和用户的负担。事实上，浏览器已经默认为

和其他表单控件提供了许多便利功能，无需额外的 JavaScript 或代码，就能让表单更易于使用。

例如：

语义化元素可以被屏幕阅读器等辅助技术识别，并将内容传递给视觉障碍的用户。

表单控件和按钮默认支持键盘访问。在先前的示例中，你可以尝试使用 Tab 和 Shift + Tab 切换表单元素（这种操作被称为“Tab 键导航”）。

你还会注意到，当你使用 Tab 在表单元素间进行切换时，当前聚焦的元素会被蓝色轮廓标记出来（称为焦点轮廓）。这对于使用键盘进行操作的用户来说非常重要，因为它帮助用户知道自己目前操作的是哪一项。

如果你使用错误的语义化元素来构建表单，你就得自己手动实现这些功能，否则这些表单元素就无法按照用户预期的方式工作，甚至会被认为是“坏掉了”。所有这些细节都会影响用户体验。

其他控件类型

有很多其他类型的控件可以用来在表单中收集数据。我们来看一个稍微复杂点的例子，然后对其逐步解析和说明。

备注：

在这个例子中，我们假设用户已经注册并处于登录状态，因此无需收集姓名和邮箱地址等信息。

html

报名参见见面会

选择酒店房型：

type="radio"

id="hotelChoice1"

name="hotel"

value="economy"

checked />

经济型（+$0）

高级型（+$50）

type="radio"

id="hotelChoice3"

name="hotel"

value="penthouse"

disabled />

顶级套房（+$150）

要参加的课程：

瑜伽（+$10）

咖啡烘焙（+$20）

气球动物艺术（+$5）

出行方式：

--请选择一项--

乘坐飞机

骑自行车

徒步

乘坐公交

搭乘火车

使用喷气背包

其他备注：

去结账