label默认可聚焦关联控件，但仅限显式（for与id严格匹配）或隐式（控件嵌套在label内）两种合法绑定方式；其他写法无效，且仅可聚焦表单控件支持关联。
label 默认就能聚焦关联的表单控件，不需要额外 JS —— 但前提是绑定方式写对，否则点击完全没反应。
label 的两种合法绑定方式必须选其一
浏览器只认这两种结构，其他写法（比如只靠 class、name 或相邻位置）一律无效：
- 显式绑定：
label标签带for属性，值必须与目标input的id字符串完全一致（大小写、空格、符号全敏感） - 隐式绑定：
input（或其他可聚焦控件）直接写在label开始和结束标签之间，无需id或for
✅ 正确示例（显式）：<label for="email">邮箱</label><input type="email" id="email">
✅ 正确示例（隐式）：<label>邮箱<input type="email"></label>
立即学习“前端免费学习笔记（深入）”；
为什么点了 label 文字却没聚焦？常见失效点
绝大多数“不生效”问题都出在细节匹配或环境干扰上：
-
input缺少id，或id值为空、含中文/空格/-以外的特殊字符（如id="user name"） -
label的for值拼错，或与id大小写不一致（for="Email"≠id="email"） -
input被设为disabled（此时彻底不可聚焦），或 CSS 中误加了pointer-events: none到label或input - 动态渲染时，
input元素还没挂到 DOM 上，label就已存在（尤其 React/Vue 中未等id稳定就渲染label）
哪些表单控件支持 label 聚焦？
不是所有表单元素都能被 label 关联并自动聚焦：
- ✅ 支持：所有可获得焦点的控件 ——
input[type="text"]、input[type="password"]、input[type="email"]、textarea、select、input[type="checkbox"]、input[type="radio"] - ❌ 不支持：
input[type="hidden"]、button（它自己可聚焦，不需要 label 绑定）、output、自定义 Web Component（除非手动实现focus()） - ⚠️ 注意：
input[type="checkbox"]和radio在点击label时不仅会聚焦，还会触发状态切换 —— 这是原生行为，不是 bug
嵌套写法下怎么隔离图标点击？
当 label 内有信息图标（ⓘ）、删除按钮等交互子元素时，点击它们也会触发聚焦 —— 这通常不是想要的效果：
- 不能给整个
label加event.preventDefault()，否则全部失效 - 正确做法：只在图标元素上监听
click，调用e.preventDefault()阻断事件冒泡到label - DOM 结构建议把图标和弹窗放在
label内部，用相邻兄弟选择器（+）控制:hover显示，避免外层干扰 - 示例 JS：
document.querySelector('.info-icon').addEventListener('click', e => { e.preventDefault(); /* 弹窗逻辑 */ });
真正容易被忽略的是：label 的语义绑定一旦写错，键盘用户（Tab 导航）、屏幕阅读器、自动化测试工具就全感知不到这个输入框——它不是“看起来没反应”，而是“根本不存在于可访问性树中”。
