label 的 for 属性必须严格匹配 input 的 id 才能触发聚焦，二者需完全一致（区分大小写）、不可含空格或特殊字符；嵌套方式要求 input 为 label 直接子元素；JS 方案应避免重复绑定，优先用 querySelector；移动端需排查 pointer-events 和 disabled 状态。
label 的 for 属性必须匹配 input 的 id
这是最常出错的地方：点击 label 没反应，根本原因是 for 值和 input 的 id 不一致，或漏写 id。
浏览器只认这个绑定关系，不依赖位置、嵌套或 class 名。哪怕 label 和 input 相隔十个 div，只要 for="xxx" 和 id="xxx" 对得上，点击就聚焦。
-
label必须有for属性，且值为字符串（不能是变量名或表达式） -
input必须有id，且值与for完全一致（区分大小写） - 避免用空格、中文、特殊符号作
id，推荐用username-input这类连字符格式
<label for="email-field">邮箱</label> <input type="email" id="email-field">
用嵌套方式也能触发聚焦
如果不想写 for 和 id，可以把 input 直接包进 label 里。这种写法更简洁，且天然绑定，不用配对检查。
但要注意：只有直接子元素才可靠；中间插了 span 或换行符可能在某些旧浏览器中失效。
立即学习“前端免费学习笔记（深入）”；
- 支持所有现代浏览器，包括 Safari 15+ 和 Edge 102+
-
input必须是label的**直接子节点**，不能隔着其他标签 - 适合表单字段少、结构固定的场景；动态生成时容易漏掉闭合标签
<label>用户名 <input type="text" name="username"> </label>
JavaScript 补充方案：当 label 和 input 无法配对时
有些框架（比如 Vue 渲染时自动加前缀、React 使用 key 生成随机 id）会让静态 for/id 难以维护。这时可手动绑定 click 事件。
关键点不是“模拟聚焦”，而是调用 focus() 方法 —— 浏览器原生行为不会被覆盖，仍能触发 focus 事件和样式变化。
- 给
label加onclick="document.getElementById('xxx').focus(); return false;"最快见效 - 更健壮的做法是用
addEventListener绑定，避免内联脚本污染 HTML - 注意：别在
label上同时写for和 JS 聚焦，否则可能触发两次
<label onclick="document.querySelector('[name=username]').focus()">用户名</label>
<input type="text" name="username">
移动端点击无响应？检查 pointer-events 和 disabled 状态
在 iOS 或 Android 上点不动，大概率不是绑定问题，而是 CSS 或状态拦截了点击。
pointer-events: none 是隐形杀手，它让元素完全不响应任何鼠标/触摸事件，label 就算绑对了也白搭。
- 检查
label及其父容器是否设置了pointer-events: none -
input若设了disabled或readonly，点击label仍会聚焦，但无法输入 —— 这是预期行为，不是 bug - 部分 UI 库（如 Ant Design）会给
label加user-select: none，不影响聚焦，但别误以为它阻止了点击
for 和 id 拼写不一致，或者用了框架却忘了把 id 同步传给 input。真要加 JS，优先用 querySelector 找元素，比硬编码字符串更耐改。 
