label 标签是表单可访问性的核心，必须通过 for/id 严格匹配、嵌套或 aria-labelledby 正确关联控件；radio/checkbox 组需每个选项单独配 label 并共用 name，否则键盘与屏幕阅读器将失效。
label 标签不是装饰，它直接决定表单能否被键盘操作、屏幕阅读器识别，以及点击体验是否可靠——没正确关联 label 和控件，等于把表单“半废”了。
label for 属性必须严格匹配 input id
这是最常出错的地方：写错大小写、多空格、加了前缀后缀，或者用了 class 名代替 id。
常见错误现象：label 点击无反应，screen reader 读不出标签文字，Tab 键跳过该控件。
-
for值必须和对应input的id完全一致（包括连字符、下划线、大小写） - 不能用
class、name或其他属性替代id - 每个
id在页面中必须唯一；重复id会让for指向不可预测的元素
示例：
立即学习“前端免费学习笔记（深入）”；
<label for="user-email">邮箱</label> <input type="email" id="user-email" name="email">
嵌套写法比 for/id 更安全但有局限
把 input 直接包进 label，不用 for 和 id，逻辑更紧凑，也避免匹配错误。
使用场景：简单表单项、动态生成且不需复用 label 文字的场景（比如单个开关、搜索框）。
容易踩的坑：
- 嵌套后，
label内不能再放其他交互元素（如按钮、链接），否则语义混乱，部分辅助技术会忽略 - 无法跨容器复用同一个
label（例如一个提示文字要关联多个 radio） - 某些 CSS 样式（如
display: inline-flex）可能意外影响input的聚焦行为
示例：
立即学习“前端免费学习笔记（深入）”；
<label> 订阅邮件通知 <input type="checkbox" name="subscribe"> </label>
aria-labelledby 是复杂表单的兜底方案
当 label 文字分散在多个元素中（比如表格头 + 单元格说明），或需要复用已有文本时，aria-labelledby 是唯一合规解法。
性能 / 兼容性影响：所有现代浏览器和主流读屏器都支持，但旧版 IE 不支持；它不触发原生聚焦行为，依赖 JS 补充逻辑才能让点击生效。
-
aria-labelledby值是空格分隔的多个id，顺序即朗读顺序 - 必须确保所有引用的
id存在且可访问（不能是display: none或aria-hidden="true"） - 不能和
for同时用在一个控件上，优先级以aria-labelledby为准
示例：
立即学习“前端免费学习笔记（深入）”；
<span id="date-label">日期</span> <span id="range-hint">（起止时间）</span> <input type="text" aria-labelledby="date-label range-hint">
radio/checkbox 组别必须共用 name，label 关联要逐个写
很多人以为给一组 radio 写一个 label 就够了，其实每个选项都需要独立 label —— 否则只有第一个能被点击/朗读，其余形同虚设。
关键点：
-
name属性必须相同，才能构成互斥组；id必须各不相同 - 每个
input都得配一个专属label（用for或嵌套），不能只靠组名 - 组标题建议用
legend包在fieldset里，而不是靠额外label
示例：
立即学习“前端免费学习笔记（深入）”；
<fieldset> <legend>偏好通知方式</legend> <label><input type="radio" name="notify" value="email"> 邮箱</label> <label><input type="radio" name="notify" value="sms"> 短信</label> </fieldset>
真正难的不是写对语法，而是意识到：label 不是“加个文字”，而是定义控件的语义边界。少一个 id 匹配，就可能让键盘用户卡在表单中间；多一个嵌套层级，就可能让屏幕阅读器跳过关键信息。这些细节不在控制台报错，却在真实使用中层层累积成障碍。
