label 关联 input 仅两种合法方式：显式（for/id 完全匹配）或隐式（input 为 label 直接子节点）；id 必须唯一、大小写及符号严格一致，且仅聚焦型控件有效，aria-labelledby 仅辅助读屏不触发交互。
label 标签关联 input 的核心就两条路：显式靠 for + id 配对，隐式靠 嵌套结构。选哪种，看场景；但无论哪种，都必须满足浏览器的语义规则，否则点击没反应。
for 属性必须和 input 的 id 完全一致
这是最常出错的地方——不是“差不多就行”，而是逐字匹配，大小写、连字符、下划线、空格，一个都不能差。
-
正确写法：
<label for="email">邮箱</label><input type="email" id="email"> -
常见错误：
for="Email"对应id="email"（大小写不一致）；for="user_email"对应id="user-email"（符号不统一） - 同一个页面中，
id必须唯一；重复的id会让for只绑定到第一个匹配元素 - 动态渲染时（如 React/Vue），确保
id在 DOM 中真实存在且稳定，别用数组索引当id（重排后会错位）
嵌套写法：input 直接放 label 里
不需要 for 和 id，只要 input 是 label 的**直接子节点**，浏览器就自动把整个 label 区域变成热区。
-
合法结构：
<label>用户名<input type="text" name="username"></label> -
禁止中间插容器：不能写成
<label><span>用户名</span><input...></input...></label>（input不是直接子节点） -
禁用可交互子元素：label 内不能放
<button></button>、<a></a>、<div contenteditable> 等，否则语义断裂，读屏器可能跳过 <li> <strong>样式要干净</strong>：避免给 label 设 <code>display: inline-flex或position: absolute，这些容易意外阻断焦点传递 - ✅ 有效：text、email、password、checkbox、radio、textarea、select、range、file（注意：file 类型点击 label 可聚焦，但不会自动弹出选择框，这是浏览器安全限制）
- ❌ 无效：hidden、submit、button（label 不能嵌套 button）、output、div[contenteditable]
- ⚠️ 注意：type="file" 虽能被 label 激活，但用户仍需手动点击文件选择对话框 —— 这不是绑定问题，是规范限制
<th id="price">价格</th> <td><input aria-labelledby="price unit"></td>- 仍需配合
for/id或嵌套，才能实现「点文字即操作」 - 所有被引用的
id必须真实存在于 DOM 中，且不能是display: none或visibility: hidden
哪些控件真正支持 label 关联
不是所有带 input 的地方点 label 都有反应。只有原生支持聚焦或切换行为的控件才有效。
aria-labelledby 是无障碍补丁，不是交互替代
当标签文字分散在多个位置，或需要复用已有文本（比如表格表头、弹窗标题），aria-labelledby 是合规解法，但它只告诉读屏器“这段话描述这个控件”，不触发聚焦也不切换状态。
