翻译正在进行中。

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

将一个 <label> 和一个 <input> 元素放在一起会有以下几点好处:

  • 标签文本不仅与其相应的文本输入在视觉上相关联; 它也以编程方式与它相关联。 这意味着,当用户点击到表单输入时,屏幕阅读器可以读出标签,使在使用辅助技术的用户更容易理解应输入哪些数据.
  • 你可以单击关联的标签来聚焦或者激活 input,以及 input 本身。这种增加的命中区域为激活 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
可标记的 form 相关元素的 id ,在同一文档中作为label元素。 第一个这样的元素在文档中有一个ID匹配属性值,作为这个label元素的labeled control
注意: label元素可同时有属性和包含控件元素(contained control element),只要此属性指向包含控件元素。
form
 表示label元素关联的form元素(它的表单拥有者)。此属性值必须是同一文档中<form> 元素的ID。如果未指定此属性值,<label>元素必须是<form>元素的后代。应用此属性值,你可以将label元素放置在文档的任何位置,而不仅仅是作为它的拥有者<form>元素的后代。 

CSS 样式

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.

示例

简单的label

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

使用 for 属性

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

可访问性问题

相互影响的内容

不要在label元素内部放置会相互影响的元素,比如anchors,或者buttons。这样做会让用户更难激活/触发与label相关联的表单元素input

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)。若标签内的文本需要在视觉上做些调整,应该使用CSS伪类更改样式并应用到<label>元素中。

若一个form元素,或者form元素中的一部分需要一个标题,此时应该使用<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> 

Buttons

<input> 元素若有着 type="button" 的宣告和有效的 value 属性,则不需要添加 label. 若添加了,则可能会干扰辅助技术如何解析 button input. <button>元素也同样。

Technical summary

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.
Permitted ARIA roles None
DOM interface HTMLLabelElement

Specifications

Specification Status Comment
HTML Living Standard
<label>
Living Standard
HTML5
<label>
Recommendation
HTML 4.01 Specification
<label>
Recommendation Initial definition

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
labelChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
forChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
form
Deprecated
Chrome Full support YesEdge Full support YesFirefox No support ? — 49IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android No support ? — 49Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support
No support  
No support
Deprecated. Not for use in new websites.
Deprecated. Not for use in new websites.

See also

Other form-related elements:

文档标签和贡献者

最后编辑者: kuei0221,