label的for属性仅对可聚焦、可交互的原生表单控件生效，包括input（各类型）、textarea、select、button；output属边缘支持；div、span等非表单元素因不可聚焦而无效。
哪些HTML元素支持label的for属性绑定
label的for属性只对**可聚焦、可交互的原生表单控件**生效，不是所有元素都能绑。浏览器按规范严格校验目标元素是否具备表单语义和焦点能力，不支持的元素即使写了for也完全无反应。
-
<input>：全部类型都支持，包括text、password、email、checkbox、radio、range、file等 -
<textarea>：支持，点击label文字可聚焦并激活光标 -
<select>：支持，点击label会打开下拉菜单（部分旧版Safari需触发两次） -
<button>：支持，点击label等效于点击按钮本身（含type="submit"等） -
<output>：部分浏览器支持（如Chrome），但属于边缘用法，不推荐依赖
为什么div、span、自定义组件不能用for绑定
因为for绑定本质是触发focus()或click()行为，而<div>、<span>默认不可聚焦，也没有内置交互逻辑。浏览器看到for="xxx"后会调用document.getElementById("xxx")，再尝试调用其focus()方法——如果该元素没实现这个接口，就静默失败。
- 自定义Web Component必须显式实现
focus()方法，并设置tabindex才能响应 -
<img>、<p>、<section>等纯内容元素，无论有没有id，for都无效 - React/Vue中封装的
<MyInput>组件，除非内部透传ref并暴露focus()，否则for无法穿透
radio和checkbox组里，for绑定的特殊限制
一组radio或多个checkbox必须**每个控件单独配id + 单独配label[for]**，不能靠name或位置推断。这是无障碍强制要求，也是点击行为唯一可靠的实现方式。
- 错误：
<label for="gender">性别</label><input id="gender-m" name="gender"><input id="gender-f" name="gender">→ 只有第一个控件响应 - 正确：每个
<input type="radio">带唯一id，每个<label for="xxx">指向对应id - 注意：
for值必须和id逐字符一致，for="gender-m"配id="gender-m"，id="Gender-m"或id="gender_m"都会失效
CSS或JS导致for绑定静默失效的常见情况
即使for和id完全匹配，某些样式或脚本也会切断关联链。这类问题不报错，但点击无反应，排查时容易忽略。
立即学习“前端免费学习笔记（深入）”；
-
pointer-events: none设在label或父容器上 → 点击事件被拦截，根本触不到绑定逻辑 -
user-select: none不影响绑定，但可能干扰测试时的手动点击判断 -
display: none在input上 → 失去可访问性，屏幕阅读器跳过，for虽语法正确但语义断裂 - JS动态移除/重插
input节点后未重建id →for仍指向已销毁的DOM引用，document.getElementById()返回null
display: none和for绑定**。比如用CSS隐藏某个radio再通过JS控制显示，一旦隐藏时DOM被移除或id被清空，后续恢复时for就再也找不到目标了。 
