<label>

尝试一下

<div class="preference">
  <label for="cheese">Do you like cheese?</label>
  <input type="checkbox" name="cheese" id="cheese" />
</div>

<div class="preference">
  <label for="peas">Do you like peas?</label>
  <input type="checkbox" name="peas" id="peas" />
</div>

.preference {
  display: flex;
  justify-content: space-between;
  width: 60%;
  margin: 0.5rem;
}

将一个 <label> 和一个 <input> 元素相关联主要有这些优点：

• 标签文本不仅与其相应的文本输入元素在视觉上相关联，程序中也是如此。这意味着，当用户聚焦到这个表单输入元素时，屏幕阅读器可以读出标签，让使用辅助技术的用户更容易理解应输入什么数据。
• 你可以点击关联的标签来聚焦或者激活这个输入元素，就像直接点击输入元素一样。这扩大了元素的可点击区域，让包括使用触屏设备在内的用户更容易激活这个元素。

将一个 <label> 和一个 <input> 元素匹配在一起，你需要给 <input> 一个 id 属性。而 <label> 需要一个 for 属性，其值和 <input> 的 id 一样。

另外，你也可以将 <input> 直接放在 <label> 里，此时则不需要 for 和 id 属性，因为关联已隐含存在：

<label
  >Do you like peas?
  <input type="checkbox" name="peas" />
</label>

其他使用事项：

• 关联标签的表单控件称为这个标签的已关联标签的控件。一个 input 可以与多个标签相关联。
• 点击或者轻触（tap）与表单控件相关联的 <label> 也可以触发关联控件的 click 事件。

属性

该元素包含 全局属性。

for

即和 <label> 元素在同一文档中的 可关联标签的元素 的 id。文档中第一个 id 值与 <label> 元素 for 属性值相同的元素，如果可关联标签（labelable），则为已关联标签的控件，其标签就是这个 <label> 元素。如果这个元素不可关联标签，则 for 属性没有效果。如果文档中还有其他元素的 id 值也和 for 属性相同，for 属性对这些元素也没有影响。

备注：<label> 元素可同时有一个 for 属性和一个子代控件元素，只是 for 属性需要指向这个控件元素。

form

表示与 label 元素关联的 <form> 元素（即它的表单拥有者）。如果声明了该属性，其值应是同一文档中 <form> 元素的 id。因此你可以将 label 元素放在文档的任何位置，而不仅作为 <form> 元素的后代。

使用 CSS 样式

<label> 元素没有特别的样式考虑——结构上，<label> 是简单的行内元素，所以可使用和 <span> 或 <a> 元素大致相同的方式来应用样式。你也可以任意方式为 <label> 应用样式，只是不要让文本难以阅读。

示例

简单的 label

<label>Click me <input type="text" /></label>

使用 for 属性

<label for="username">Click me</label> <input type="text" id="username" />

无障碍问题

交互内容

不要在 label 元素内部放置可交互的元素，比如 anchors 或 buttons。这样做会让用户更难激活/触发与 label 相关联的表单输入元素。

Don't

<label for="tac">
  <input id="tac" type="checkbox" name="terms-and-conditions" />
  I agree to the <a href="terms-and-conditions.html">Terms and Conditions</a>
</label>

Do

<label for="tac">
  <input id="tac" type="checkbox" name="terms-and-conditions" />
  I agree to the Terms and Conditions
</label>
<p>
  <a href="terms-and-conditions.html">Read our Terms and Conditions</a>
</p>

标题

在一个 <label> 元素内部放置标题元素（heading elements）会干扰许多辅助技术，原因是标题通常被用于辅助导航（a navigation aid）。若标签内的文本需要做视觉上的调整，应该使用适用于 <label> 元素的 CSS 类。

若一个 表单，或表单中的一部分需要一个标题，应使用 <legend> 元素置于 <fieldset> 元素中。

Don't

<label for="your-name">
  <h3>Your name</h3>
  <input id="your-name" name="your-name" type="text" />
</label>

Do

<label class="large-label" for="your-name">
  Your name
  <input id="your-name" name="your-name" type="text" />
</label>

按钮

若 <input> 元素声明了 type="button" 和有效的 value 属性，则不需要为其添加标签。添加标签可能会影响辅助技术理解这个输入按钮的语义。<button> 元素也一样。

技术概览

规范

浏览器兼容性

参见

其他表单相关的元素：

• <form>
• <input>
• <button>
• <datalist>
• <legend>
• <select>
• <optgroup>
• <option>
• <textarea>
• <fieldset>
• <output>
• <progress>
• <meter>