label 的 for 属性必须严格匹配目标元素的 id，区分大小写且不可用 name 替代；嵌套控件于 label 内更可靠；aria 仅作补充，不替代原生语义。
label 的 for 属性必须严格匹配目标元素的 id
这是最常见也最容易出错的地方：浏览器不会自动把 label 和同级的 input 关联，除非显式声明。哪怕只差一个空格、大小写不一致或用了 name 而非 id，点击 label 就不会聚焦输入框。
-
for的值必须和目标元素的id完全一致（区分大小写） - 目标元素必须有
id—— 仅靠name或位置关系无效 - 若用 JavaScript 动态生成元素，需确保
id在插入 DOM 前已存在且唯一
把表单控件嵌套在 label 内部更可靠
当无法保证 id 全局唯一或不想管理 for 映射时，直接嵌套是更鲁棒的做法。浏览器原生支持这种结构，无需额外属性，语义清晰，无障碍兼容性也好。
<label> 记住我 <input type="checkbox" name="remember"> </label>
- 适用于
input、textarea、select、button等可交互元素 - 注意：嵌套后
label不再需要for属性，也不应再设 - 样式上要留意
label默认为 inline 元素，若需块级行为可加display: block
避免用 name 替代 id 关联
很多开发者误以为 <label for="username"><input name="username"></label> 能生效 —— 实际上不会。HTML5 规范明确要求 for 必须引用 id，与 name 无关。表单提交靠 name，可访问性靠 id + for。
-
name用于服务器端接收字段名，不影响 label 绑定 - 同一页面多个同名
name（如复选框组）很常见，但id必须唯一 - 检查失败时，用浏览器开发者工具看元素是否有
id，再确认for值是否拼写一致
使用 ARIA 属性不是替代方案，而是补充手段
当因架构限制（如 Web Components Shadow DOM、第三方库封装）无法设置 id 或嵌套时，可用 aria-labelledby 或 aria-label 辅助，但它不触发原生聚焦行为，仅提升屏幕阅读器体验。
立即学习“前端免费学习笔记（深入）”；
<div id="hint">邮箱格式示例：user@example.com</div> <input aria-labelledby="hint" type="email">
-
aria-labelledby引用的是其他元素的id，和for类似，但不激活点击聚焦 - 真正需要“点击 label 聚焦输入框”功能时，仍应回归
for+id或嵌套 - 不要为了“加 ARIA”而忽略基础语义——先做对
label+id，再考虑增强
id 重复，或 SSR 与 CSR 的 id 不一致。这时候嵌套写法反而最省心。 
