<label> - HTML（超文本标记语言） 编辑

HTML <label> 元素（标签）表示用户界面中某个元素的说明。

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

将一个 <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> 元素也一样。

技术概览

Content categories	Flow content, phrasing content, interactive content, form-associated element, palpable content.
Permitted content	Phrasing content, but no descendant label elements. No labelable elements other than the labeled control are allowed.
Tag omission	不允许，开始标签和结束标签都不能省略。
Permitted parents	Any element that accepts phrasing content.
Implicit ARIA role	No corresponding role
Permitted ARIA roles	No role permitted
DOM interface	HTMLLabelElement

规范

规范	状态	注释
HTML Living Standard <label>	Living Standard
HTML5 <label>	Recommendation
HTML 4.01 Specification <label>	Recommendation
HTML 4.0 Specification The definition of '<label>' in that specification.	Recommendation	Initial definition

浏览器兼容性

BCD tables only load in the browser

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

参见

其他表单相关的元素：

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