<label>:标签元素

将 <label> 与表单控件（例如 <input> 或 <textarea>）相关联具有一些主要优点：

¥Associating a <label> with a form control, such as <input> or <textarea> offers some major advantages:

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

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

¥To explicitly associate a <label> element with an <input> element, you first need to add the id attribute to the <input> element. Next, you add the for attribute to the <label> element, where the value of for is the same as the id in the <input> element.

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

¥Alternatively, you can nest the <input> directly inside the <label>, in which case the for and id attributes are not needed because the association is implicit:

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

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

¥The form control that a label is labeling is called the labeled control of the label element. Multiple labels can be associated with the same form control:

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

¥Elements that can be associated with a <label> element include <button>, <input> (except for type="hidden"), <meter>, <output>, <progress>, <select> and <textarea>.

¥Attributes

该元素包括 全局属性。

¥This element includes the global attributes.

for

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

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

¥Note: To programmatically set the for attribute, use htmlFor.

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

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

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

¥Note: A <label> element can have both a for attribute and a contained control element, as long as the for attribute points to the contained control element.

¥Styling with CSS

<label> 元素没有特殊的样式考虑因素 - 从结构上讲，它们是简单的内联元素，因此可以采用与 <span> 或 <a> 元素大致相同的方式设置样式。你可以按照你想要的任何方式对它们应用样式，只要不导致文本变得难以阅读即可。

¥There are no special styling considerations for <label> elements — structurally they are simple inline elements, and so can be styled in much the same way as a <span> or <a> element. You can apply styling to them in any way you want, as long as you don't cause the text to become difficult to read.

¥Accessibility

¥Interactive content

不要将交互元素（例如 anchors 或 buttons）放置在 label 中。这样做会使人们很难激活与 label 相关的表单输入。

¥Don't place interactive elements such as anchors or buttons inside a label. Doing so makes it difficult for people to activate the form input associated with the label.

不要这样做：

¥Don't do this:

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

更喜欢这个：

¥Prefer this:

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

¥Headings

将 标题元素 放在 <label> 中会干扰多种辅助技术，因为标题通常用作 导航设备。如果需要在视觉上调整标签的文本，请改用应用于 <label> 元素的 CSS 类。

¥Placing heading elements within a <label> interferes with many kinds of assistive technology, because headings are commonly used as a navigation aid. If the label's text needs to be adjusted visually, use CSS classes applied to the <label> element instead.

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

¥If a form, or a section of a form needs a title, use the <legend> element placed within a <fieldset>.

不要这样做：

¥Don't do this:

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

更喜欢这个：

¥Prefer this:

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

¥Buttons

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

¥An <input> element with a type="button" declaration and a valid value attribute does not need a label associated with it. Doing so may actually interfere with how assistive technology parses the button input. The same applies for the <button> element.

¥Examples

¥Defining an implicit label

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

¥Defining an explicit label with the "for" attribute

<label for="username">Click me to focus on the input field</label>
<input type="text" id="username" />

¥Technical summary