labelfor 关联不上控件怎么查？id 必须逐字符匹配、placeholder 不能替代标签
label 的 for 属性看似只是"文字说明"，实际承担点击热区扩展与屏幕阅读器关联两件事。写错 for 会让整个复选框在无障碍上"消失"，也造成移动端"点文字没反应"的常见体验问题。本文依据 MDN 与 W3C WAI 表单教程原文整理。
一、显式关联：for 必须精确等于控件的 id
MDN 的 label 元素页说明 label 表示界面上某一项的标题（caption），并给出显式关联的标准结构：
<input type="checkbox" name="cheese" id="cheese" /><label for="cheese">I like cheese.</label>
W3C 表单标签教程 w3.org/WAI/tutorials/forms/labels/在 "Associating labels explicitly" 一节给出硬性规则："The for attribute of the label must exactly match the id of the form control." 注意是 exactly——大小写、空格、前缀任何差异都会静默失效，浏览器不会报错，这是最难发现的一类 bug。
一个 label 的 for 只能指向一个控件（id 在文档内必须唯一）；反之一个控件可以被多个 label 关联，此时可访问名称由关联文本共同构成。
二、隐式关联：把控件包进 label
把 input 写在 label 内部即可省略 for：
<label>订阅 <input type="checkbox" name="sub" /></label>
两种方式各有取舍。显式更稳，因为控件与文字可以被 CSS 拆到不同位置（左侧标签、右侧输入框的布局很常见），隐式则依赖 DOM 嵌套，一旦重构模板就容易断关联。工程上更推荐显式。
三、点击热区与焦点行为
关联成功后，点击 label 文本会触发控件：点文字即可勾选复选框、单选组里点选项名会选中对应项、点 label 会把焦点移到关联控件。对只有十几像素的 checkbox 来说，这等于把可点区域扩大数倍，对触屏与运动障碍用户是实质改进。两个副作用要知道：
- label 内若还有其他可点击元素，可能干扰预期，此时应拆分或改用显式关联避开嵌套。
- 用 for 指向
type="hidden"或禁用控件没有意义，禁用控件本来也不接受焦点。
四、没有可见文字时怎么办
搜索框、图标按钮常常不想显示标题。WAI 教程给出两条路径，目录原文包含 "Hiding label text" 与 "Using aria-label" 两节：其一保留 label 元素但做视觉隐藏（教程示例给的是 visuallyhidden 这类样式，绝不能用 display:none，那会让辅助技术也读不到）；其二直接用 aria-label 提供可访问名称。
需要强调：placeholder 不能替代 label。它颜色浅、对比度差，一旦输入就消失，屏幕阅读器对它的处理各家不一致，把它当唯一标签是典型的无障碍缺陷。
五、常见失效场景
- 组件库自动生成 id：服务端渲染与客户端 hydration 生成的 id 不一致，for 就指向了不存在的 id。应显式传 id 而非依赖随机值。
- 动态插入的行：模板复制出多个相同 id，违反唯一性，只有第一个能关联成功。
- for 写成了 name：label 关联的是 id 而不是 name 属性。
- 单选组只有分组标题：应用
fieldset+legend描述整组，再为每个选项单独写 label。
六、常见问题 FAQ
问：for 和 aria-labelledby 选哪个？
答：有真实表单控件时用 for，它是原生语义；aria-labelledby 用于引用其他元素文本作为名称的复合组件场景。
问：不写 label 会怎样？
答：屏幕阅读器只报"编辑框""复选框"而不报用途，用户无法理解；这也是自动化无障碍检测最常报的错误之一。
问：label 能跨 shadow DOM 关联吗？
答：不能，for 与 id 需在同一文档树内匹配，自定义元素内部要自己处理可访问名称。
七、总结
label 的要点是：显式关联时 for 必须与控件 id 逐字符一致（W3C 原文 exactly match），且 id 全文档唯一；一个 label 对一个控件，控件可被多个 label 引用；隐式关联靠嵌套、重构易断，工程建议显式；label 提供点击热区扩展与焦点转移，对触屏用户价值明显；placeholder 不能当标签，视觉隐藏 label 时不要用 display:none，或改用 aria-label；分组用 fieldset 加 legend，组件库必须显式传 id。关联失效不报错，只能靠检测与实测确认。
生产内容，同时打通搜索引擎（SEO）与AI搜索引擎（GEO）流量入口的软件！ 点击进入365建站器 »
