<label>: 表单标签元素

最后更新：2026-10-13

<label>表单标签元素

<label>（标签）元素为表单控件定义说明文字。通过 for 属性关联控件的 id，点击标签文字可以聚焦/触发对应的控件，对可访问性和触屏体验都很重要。

<label for="username">用户名：</label>
<input type="text" id="username">

该元素支持全局属性及以下专有属性：

属性	值	描述
`for`	元素 ID	关联的表单控件 ID。

编辑下方代码，在 playground 中查看实时效果：

浏览器	Chrome	Edge	Firefox	Safari	Opera
<label>	✓ v1	✓ v12	✓ v1	✓ v1	✓ v1
所有主流浏览器均支持

Qlabel 的 for 属性有什么用？

Afor 指向输入框的 id，建立显式关联：点击 label 文字即可聚焦/选中输入框，屏幕阅读器也会朗读 label 作为输入名称。写法：<label for='email'>邮箱</label><input id='email'>。

Qlabel 包裹 input 就不用写 for 了吗？

A可以。label 包裹控件时是隐式关联，无需 for 和 id；但一个 label 只能包一个控件。隐式关联对复杂布局不友好（label 常与控件分开摆放），显式 for 关联更灵活，两种方式别混用于同一控件。

Qlabel 里可以放标题或链接吗？

A不应放标题（h1-h6）和交互元素（链接、按钮）。label 的语义是「控件名称」，嵌套交互元素会导致点击行为冲突、屏幕阅读器朗读混乱。辅助说明放 label 外或用 aria-describedby 关联。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。