label 的 for 属性必须与目标控件的 id 完全一致，因浏览器内部调用 document.getElementById() 查找元素，仅认 id 不认 name 或 class；radio/checkbox 需每个选项独立 id+for；嵌套写法脆弱且限制多；disabled 或 tabindex="-1" 会使 label 点击失效。
label 的 for 属性必须和目标控件的 id 字符串完全一致，否则点击无效、屏幕阅读器无法识别——这不是兼容性问题，是浏览器规范强制行为。
为什么for只认id，不认name或class
浏览器内部通过 document.getElementById() 查找目标元素，for 值就是传给这个 API 的参数。它不解析 CSS 选择器，也不匹配表单提交字段名。
-
for="email"必须对应<input id="email">；写成id="user_email"或id="Email"都失败 -
name="email"只影响表单提交数据，对for绑定毫无作用 -
class="email-input"同样被忽略，哪怕样式或 JS 里用了它 - 复制粘贴时容易混入不可见空格或全角字符，建议在 DevTools 中右键 label → “Edit as HTML” 直接复制
for值，再用document.getElementById("xxx")验证
radio/checkbox 每个选项都要独立配 id + for
一组 radio 共享 name 是为了互斥，但 for 关联是逐个绑定的——没有“组绑定”这种事。
- 错误：
<label for="gender">男</label><input type="radio" name="gender" id="gender">+ 另一个同id="gender"的 radio → 第二个永远点不动 - 正确：每个选项用唯一
id，如id="gender-m"、id="gender-f"，对应for="gender-m"、for="gender-f" - 共用说明文字（如“请选择性别”）应放在
<fieldset><legend>里，而不是塞进某个label - 动态渲染时，
id拼接逻辑要稳定，避免用随机数或未定义变量，比如 React 中id={`gender-${item.value}`}比id={`gender-${Math.random()}`}可靠
嵌套写法看似省事，但限制多、易静默断裂
把 input 直接写进 label 标签内，确实绕过 for/id 匹配，但它的语义绑定非常脆弱。
立即学习“前端免费学习笔记（深入）”；
- 只绑定第一个可聚焦子元素：
<label>年龄<input type="number"><input type="text"></label>→ 只有第一个input响应点击 - 中间插入
<div>、<span>或注释节点不影响绑定，但若第一个子节点不是表单控件（比如先写了图标 SVG），部分读屏可能无法识别 - JS 动态插入内容（如加载中状态）、CSS 设置
display: none都会断开关联；改用visibility: hidden或opacity: 0保留 DOM 结构 - 自定义组件或框架封装中，嵌套结构常被模板编译破坏，显式
for+id更可控
最常被忽略的是：即使 for 和 id 完全匹配，如果目标控件被 disabled 或 tabindex="-1" 锁死，点击 label 依然不会聚焦——label 只转发焦点，不绕过控件自身的可交互限制。
