label标签必须正确绑定表单控件，显式绑定用for指向id，隐式绑定需将控件嵌入label内，二者不可混用；for值须严格匹配id，大小写、空格、拼写错误均导致无障碍失效。
label 标签不是视觉装饰，它直接决定表单控件能否被键盘焦点、屏幕阅读器或点击行为正确识别——写错位置、漏掉关联、混用两种方式，等于让控件“失联”。
label 的两种绑定方式必须二选一，不能混用
显式绑定靠 for 属性指向 id，隐式绑定靠把表单控件（如 <input>）直接塞进 <label></label> 里。浏览器对混用行为没有统一处理：有的只触发一次 focus，有的会重复聚焦，有的甚至忽略第二次绑定。
- 显式绑定适用场景：label 和 input 在 DOM 中相距较远（比如 label 在左侧栏，input 在右侧表单区）
- 隐式绑定适用场景：复选框、单选按钮、简单文本输入，尤其适合需要 CSS 整体样式控制的组件
- 常见错误：
<label for="user">用户名</label><input id="user">+ 同时又把input套进另一个label里
for 属性必须严格匹配 id，大小写/空格/拼写全算错
for 不是随便起的别名，它是 DOM ID 查找机制——浏览器内部调用的是 document.getElementById()。一旦不一致，无障碍功能就失效，且控制台不会报错，问题极难排查。
-
<label for="userName">用户名</label>必须配<input id="userName">，"username"或"user-name"都不行 - ID 中含特殊字符（如点号、冒号）需转义，但更建议避开：ID
"user.email"要写成for="user\.email"，兼容性差 - 动态生成的表单中，如果用 JS 拼接 ID，注意前后空格、换行符是否意外混入字符串
哪些元素能被 label 关联？不是所有表单控件都行
label 只对可聚焦、可交互的表单控件生效。浏览器按规范实现，不支持的元素即使写了 for 或套进去，也只会“看起来像”，实际无焦点传递、无语音朗读、无点击响应。
- 明确支持：
<input>（除type="hidden"）、<textarea></textarea>、<select></select>、<button></button>、<meter></meter>、<progress></progress> - 有条件支持：
<output></output>（需带for属性，且对应控件有name） - 不支持：
<input type="hidden">、<div contenteditable>（虽可聚焦但语义不符，屏幕阅读器不识别）、自定义 Web Component（除非手动实现 <code>labelable行为）label 嵌套多个控件时，只绑定第一个
隐式绑定规则很机械：浏览器只取
<label></label>内部第一个可聚焦的表单控件。后面的内容（哪怕也是input）完全被忽略，既不绑定，也不报错。- 错误写法：
<label>邮箱：<input type="email"><input type="checkbox"> 记住我</label>→ 只有邮箱框响应点击 - 正确拆分：
<label>邮箱：<input type="email"></label> <label><input type="checkbox"> 记住我</label> - 若需语义上“一组”操作，用
<fieldset></fieldset>+<legend></legend>包裹，再给每个子控件单独配label
最容易被忽略的是：label 的语义有效性完全依赖 DOM 结构和属性值的精确性，而不是视觉排列或 CSS 样式。哪怕 label 文字紧挨着 input、看起来“绑定了”，只要
for和id不一致，或者用了不支持的元素，它在辅助技术眼里就是“不存在”的。 - 错误写法：
