label 元素提高表单的可访问性

label 标签的文本内容通常会是表单组件的名称或标签 。

 

这些文本表明了组件的意义，也提升了表单的可访问性。 label 标签的 for 属性将标签与表单组件绑定；同时，屏幕阅读器也会读取 for 属性的属性值。

在 HTML 基础章节中，我们已经学习使用了单选按钮标签。 在那个挑战中，为了让标签可以在点击的时候也选中输入框，我们将单选按钮 input 标签嵌套在了 label 标签里面。 在本节课程中，我们介绍了另外一种实现这个功能的方法，那就是使用 for 属性。

for 的属性值必须与表单组件的 id 属性值相同。 举个例子：

<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
</form>