<label>：标签元素

将<label>与表单控件（如<input>或<textarea>）关联可以带来一些主要优势。

• 标签文本不仅在视觉上与相应的文本输入相关联，而且在程序上也与之相关联。这意味着，例如，当用户将焦点放在表单输入上时，屏幕阅读器会读出标签，使辅助技术用户更容易理解应该输入什么数据。
• 当用户点击或触摸/点击标签时，浏览器会将焦点传递到其关联的输入（相应的事件也会为输入触发）。这种增加的输入聚焦区域为任何试图激活它的人提供了优势——包括使用触摸屏设备的人。

要显式地将<label>元素与<input>元素关联，首先需要将id属性添加到<input>元素。接下来，将for属性添加到<label>元素，其中for的值与<input>元素中的id相同。

或者，您可以将<input>直接嵌套在<label>内部，在这种情况下，不需要for和id属性，因为关联是隐式的。

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

标签所标记的表单控件称为标签元素的被标记控件。多个标签可以与同一个表单控件关联。

<label for="username">Enter your username:</label>
<input id="username" name="username" type="text" />
<label for="username">Forgot your username?</label>

可以与<label>元素关联的元素包括<button>、<input>（除了type="hidden"）、<meter>、<output>、<progress>、<select>和<textarea>。

此元素包含全局属性。

for

for属性的值必须是与<label>元素在同一文档中的可标记表单相关元素的单个id。因此，任何给定的label元素只能与一个表单控件关联。

注意：要以编程方式设置for属性，请使用htmlFor。

文档中第一个具有与for属性值匹配的id属性的元素是此label元素的被标记控件——如果具有该id的元素实际上是可标记元素。如果它不是可标记元素，则for属性无效。如果文档中还有其他元素也匹配id值，则不会考虑它们。

多个label元素可以为其for属性赋予相同的值；这样做会导致关联的表单控件（for值引用的表单控件）具有多个标签。

注意：只要for属性指向包含的控件元素，<label>元素就可以同时具有for属性和包含的控件元素。

<label>元素没有特殊的样式考虑——结构上它们是简单的内联元素，因此可以像<span>或<a>元素一样进行样式设置。您可以通过任何方式应用样式，只要您不会导致文本难以阅读。

不要在label内放置交互式元素，例如锚点或按钮。这样做会使人们难以激活与label关联的表单输入。

不要这样做

<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>

更喜欢这样做

<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>内放置标题元素会干扰许多类型的辅助技术，因为标题通常用作导航辅助。如果需要调整标签的视觉文本，请改用应用于<label>元素的CSS类。

如果表单或表单的一部分需要标题，请使用放置在<fieldset>内的<legend>元素。

不要这样做

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

更喜欢这样做

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

具有type="button"声明和有效value属性的<input>元素不需要与其关联的标签。这样做实际上可能会干扰辅助技术解析按钮输入的方式。对于<button>元素，情况也是如此。