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

尝试一下

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

.preference {  display: flex;  justify-content: space-between;  width: 60%;  margin: 0.5rem;}

将一个<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" />

无障碍问题

交互内容

不要在label 元素内部放置可交互的元素，比如anchors 或buttons。这样做会让用户更难激活/触发与label 相关联的表单输入元素。

Don't

<label for="tac">  <input 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 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 name="your-name" type="text" /></label>

Do

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

按钮

若<input> 元素声明了type="button" 和有效的value 属性，则不需要为其添加标签。添加标签可能会影响辅助技术理解这个输入按钮的语义。<button> 元素也一样。

技术概览

规范

浏览器兼容性

参见

其他表单相关的元素：

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