label 的 for 属性必须与控件 id 字符串完全一致才能生效；form 属性支持跨表单关联但需匹配真实 form id；隐式嵌套仅绑定首个可聚焦子元素，且不适用于 radio/checkbox 组或自定义组件。
label 的 for 属性必须字符串完全一致才能生效
点击 label 文字没反应，90% 是 for 和控件 id 没对上。浏览器只做字面匹配，不忽略大小写、空格、连字符或前后缀。
-
for="email"必须对应<input id="email">；写成id="Email"、id="user-email"或id="email-field"全部失效 - 控件没写
id（只写了name）——name不参与关联，for会找不到目标 -
for值为空、为不存在的id、含点号（.）、括号（()）或中文，解析时直接丢弃，等同于没写 - 动态渲染时，确保控件 DOM 节点已插入且
id未被 JS 覆盖或删改（例如 React 中 key 变化后旧节点残留）
form 属性支持跨表单关联但依赖真实 form id
form 是 HTML5 新增属性，允许 label 关联当前 <form> 外的控件，适用于模态框、弹出层、微前端组件等场景，但极易误配。
-
label[form="myForm"]必须与页面中某个<form id="myForm">的id完全一致；不能是类名、data-id或其他自定义属性 - 若目标控件自身也带
form属性（如<input form="myForm">），则它已脱离父form，此时label的form必须与之相同，否则关联失败 - 多个
form值用空格分隔（form="a b"），但浏览器仅支持第一个有效值，其余被忽略 - 不支持
form值为表达式或变量，纯静态字符串匹配
嵌套写法无需 for/id，但只绑定首个可聚焦子元素
把表单控件直接写进 label 内部（如 <label>密码<input type="password"></label>）是隐式关联，省去 for/id 管理，但有硬性限制。
- 只自动关联内部**第一个**可聚焦控件：比如
<label><span>年龄</span><input type="number"><input type="text"></label>，只有第一个input响应点击 - radio/checkbox 组不能共用一个
label包裹——每个选项必须独立控件+独立label，否则屏幕阅读器无法区分语义 - 不适用于
<fieldset>内部嵌套，会破坏分组结构和辅助技术识别 - 自定义封装组件（如
<MyInput>）不触发隐式绑定，仍需显式for+id
label 关联失效的三大隐藏原因
即使 HTML 结构正确，以下情况也会让 label 在实际运行中静默失效，尤其在移动端或辅助技术下。
立即学习“前端免费学习笔记（深入）”；
-
pointer-events: none设在label或任意父级上——事件被拦截，点击无响应 -
user-select: none在部分 Android WebView 中抑制 click 冒泡；应改用-webkit-user-select: none+-moz-user-select: none，保留标准属性为text - 目标控件设了
display: none或visibility: hidden——屏幕阅读器无法聚焦，用户也无法操作；可用position: absolute; opacity: 0; width: 1px; height: 1px;替代，保持可访问性
最常被忽略的是：label 不是视觉装饰，而是控件语义的唯一权威来源。for/id 错一位、动态插入漏补 id、CSS 隐藏控件却不保可访问性——这些都会让键盘用户和屏幕阅读器彻底“看不见”这个字段。
