试一试
<div class="preference">
<label for="cheese">I like cheese.</label>
<input type="checkbox" name="cheese" id="cheese" />
</div>
<div class="preference">
<label for="peas">I like peas.</label>
<input type="checkbox" name="peas" id="peas" />
</div>
.preference {
display: flex;
justify-content: space-between;
width: 60%;
margin: 0.5rem;
}
属性
此元素包含全局属性。
for-
该值是同一文档中可标记表单控件的
id，将<label>与该表单控件关联起来。请注意，其 JavaScript 反射属性是htmlFor。
用法说明
将标签与表单控件关联
文档中第一个 id 属性与 for 属性值匹配的元素是此 label 元素的带标签控件——如果具有该 id 的元素实际上是可标记元素。如果它不是可标记元素，则 for 属性无效。如果文档中后面还有其他元素也匹配 id 值，则不予考虑。
通过多个 <label> 元素具有相同的 for 属性值，可以使多个 <label> 元素与同一个表单控件关联，从而为表单控件提供多个标签。
将 <label> 与表单控件（例如 <input> 或 <textarea>）关联具有一些主要优势
- 标签文本不仅在视觉上与其对应的文本输入相关联；它也在程序上与其相关联。这意味着，例如，当用户聚焦于表单输入时，屏幕阅读器会读出标签，这使得辅助技术用户更容易理解应该输入什么数据。
- 当用户点击或触摸/轻触标签时，浏览器会将焦点传递给其关联的输入（相应的事件也会针对该输入触发）。这种增加的聚焦输入的点击区域为任何尝试激活它的人（包括使用触摸屏设备的人）提供了优势。
有两种方法可以将 <label> 与表单控件关联，通常称为显式关联和隐式关联。
要将 <label> 元素与 <input> 元素显式关联，首先需要向 <input> 元素添加 id 属性。接下来，向 <label> 元素添加 for 属性，其中 for 的值与 <input> 元素中的 id 相同。
<label for="peas">I like peas.</label>
<input type="checkbox" name="peas" id="peas" />
或者，您可以将 <input> 直接嵌套在 <label> 内部，在这种情况下不需要 for 和 id 属性，因为关联是隐式的
<label>
I like peas.
<input type="checkbox" name="peas" />
</label>
注意： <label> 元素可以同时具有 for 属性和包含的控件元素，只要 for 属性指向包含的控件元素。
这两种方法是等效的，但有一些注意事项
- 虽然常见的浏览器和屏幕阅读器组合支持隐式关联，但并非所有辅助技术都支持。
- 根据您的设计，关联类型可能会影响样式设置。将
<label>和表单控件设置为同级元素而不是父子关系意味着它们是独立的、相邻的框，从而可以通过网格或弹性布局方法实现更可定制的布局，例如将它们对齐。 - 显式关联要求表单控件具有
id，该id在整个文档中必须是唯一的。这尤其在组件化应用程序中很难做到。框架通常提供自己的解决方案，例如 React 的useId()，但这仍然需要额外的协调才能正确实现。
通常，我们建议使用带有 for 属性的显式关联，以确保与外部工具和辅助技术的兼容性。实际上，您可以同时嵌套并提供 id/for 以实现最大兼容性。
标签所标记的表单控件称为标签元素的带标签控件。多个标签可以与同一个表单控件关联
<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>。
无障碍
交互式内容
除了隐式关联的表单控件之外，不要在 <label> 内部放置其他交互式元素，例如 锚点 或 按钮。这样做会使人们难以激活与 label 关联的表单输入。
不要这样做
<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>
更喜欢这样做
<p>
<a href="terms-and-conditions.html">Read our Terms and Conditions</a>
</p>
<label for="tac">
<input id="tac" type="checkbox" name="terms-and-conditions" />
I agree to the Terms and Conditions
</label>
注意： 最好将任何必要的上下文（例如条款和条件的链接）放在表单控件之前，以便用户在与控件交互之前可以阅读它。
标题
在 <label> 中放置标题元素会干扰多种辅助技术，因为标题通常用作导航辅助。如果需要视觉上调整标签的文本，请改用应用于 <label> 元素的 CSS 类。
如果表单或表单的某个部分需要标题，请使用放置在 <fieldset> 中的 <legend> 元素。
不要这样做
<label for="your-name">
<h3>Your name</h3>
<input id="your-name" name="your-name" type="text" />
</label>
更喜欢这样做
<label class="large-label" for="your-name">
Your name
<input id="your-name" name="your-name" type="text" />
</label>
按钮
具有 type="button" 声明和有效 value 属性的 <input> 元素不需要关联标签。这样做实际上可能会干扰辅助技术解析按钮输入的方式。这同样适用于 <button> 元素。
示例
定义隐式标签
<label>Click me <input type="text" /></label>
使用“for”属性定义显式标签
<label for="username">Click me to focus on the input field</label>
<input type="text" id="username" />
技术摘要
规范
| 规范 |
|---|
| HTML # the-label-element |
浏览器兼容性
加载中…