<label>

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

尝试一下

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

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

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

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

<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 元素内部放置可交互的元素,比如 anchorsbuttons。这样做会让用户更难激活/触发与 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 (en-US) Flow content (en-US), phrasing content (en-US), interactive content (en-US), form-associated element (en-US), palpable content.
Permitted content Phrasing content (en-US), 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 (en-US).
Implicit ARIA role No corresponding role
Permitted ARIA roles No role permitted
DOM interface HTMLLabelElement

规范

Specification
HTML Standard
# the-label-element

浏览器兼容性

BCD tables only load in the browser

参见