label与input点击生效须满足两种绑定之一：input为label直接子元素（嵌套），或label的for属性值与input的id完全一致；其他位置关系均失效。
label 和 input 要能点击生效，位置关系不是“随便放哪都行”，而是必须满足两种绑定方式之一：要么 input 是 label 的直接子元素（嵌套），要么 label 的 for 属性值与 input 的 id 完全一致（显式关联）。其他排列——比如兄弟节点但没配 for/id，或中间隔了 span、div——都会断开语义连接。
label 嵌套 input 时，input 必须是直接子节点
浏览器只认“直系父子”结构。只要中间插了一个容器，哪怕只是 <span><input></span>，点击 label 文字就失效。
-
input必须写在label开始和结束标签之间，不能被任何非文本节点包裹 - 允许的内联内容（如空格、换行、纯文本）不影响绑定，但
button、a、div等可交互或块级元素会破坏语义 - 嵌套后
input的id可省略（除非 JS 需要通过 ID 获取），但name仍需保留以保证表单提交 - 验证是否生效：临时加
outline: 1px solid red到label，看是否完整包裹input及其周围空白区域
label 和 input 并列时，for 和 id 必须严格一致
并列布局常见于 CSS Grid/Flex 表单行，但风险在于字符串匹配零容错。大小写、下划线、短横、空格差一点，点击就静默失败。
-
for="email"必须对应id="email"；id="user_email"和for="user-email"不匹配 - 动态渲染（React/Vue）中，避免用
index生成id，列表重排会导致for指向错误元素 - 同一页面中
id必须唯一；重复时，label只绑定第一个出现的input - 不要用
name或class替代id—— 浏览器根本不读这些属性来建立关联
label 和 input 分开太远时，aria-labelledby 不等于 for/id
aria-labelledby 是无障碍补丁，不是交互替代方案。它只告诉读屏器“这段文字描述这个控件”，但点不了、聚焦不了、切换不了。
立即学习“前端免费学习笔记（深入）”；
- 若需要一个 label 描述多个控件（如一组
input[type="radio"]），仍需每个input单独配id+label[for] -
aria-labelledby="id1 id2"中所有id都必须真实存在且未被display: none或visibility: hidden隐藏 - 移动端尤其注意：iOS Safari 对
aria-labelledby的支持较弱，优先保障原生for/id或嵌套结构
最容易被忽略的是样式对热区的干扰：即使结构完全正确，label 被设为 display: inline 而 input 有默认 margin 或 vertical-align: baseline，也会导致视觉区域和可点击区域错位。上线前务必在真机上点空白处测试。
