label标签必须正确关联控件，否则键盘用户和屏幕阅读器无法操作；for属性须严格匹配控件id（大小写、符号均需一致），嵌套写法更简洁但仅适用于单个原生控件，radio/checkbox需单独配对，动态渲染时应优先使用隐式包裹或aria-labelledby确保可访问性。
label 标签写不对，表单就等于没做可访问性——不是“体验差”，而是键盘用户和屏幕阅读器根本无法操作。
for 属性必须严格匹配控件的 id
浏览器只认 id，完全不看 name 或 class。哪怕 for="email" 和 name="email" 一模一样，只要 <input> 没写 id="email"，点击就无效。
-
for值必须逐字符复制粘贴自目标控件的id，包括大小写、连字符、下划线（for="user-name"≠id="username"） - 控件缺失
id是最常见错误：<label for="phone">电话</label><input name="phone">→ 点击无反应 - 多个控件共用同一
id（如循环渲染未去重），for只绑定到 DOM 中第一个匹配元素，行为不可预测 - 用浏览器 DevTools 选中
<label>，右键「Reveal in Elements panel」，点开for值，再全局搜索该字符串是否作为id存在且仅出现一次
嵌套写法更简洁但有硬性限制
把控件直接写进 <label> 内部，天然建立关联，不用管 for 和 id，代码少、语义强、可访问性好——但它只适用于单个原生控件。
- 适用：
<label>密码:<input type="password" name="pwd"></label> - 不适用：radio 组（无法区分选项）、
<fieldset>内部（破坏分组语义）、JS 动态移动后的控件（嵌套结构易断裂） - 嵌套时仍需保留
name，否则表单提交拿不到值 - 不能嵌套另一个
<label>—— HTML 规范禁止
radio/checkbox 每一项都得单独配对
一组 radio 共享 name，但每个选项必须有独立 id 和独立 <label for="xxx">。否则屏幕阅读器无法告知“当前焦点在‘男’还是‘女’”，也无法通过点击文字切换指定选项。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
<label>性别:<input type="radio" name="gender" value="m">男<input type="radio" name="gender" value="f">女</label>→ 只有第一个<input>可响应 - 正确写法：
<input type="radio" id="gender-m" name="gender" value="m"><label for="gender-m">男</label>，同理配gender-f - 共用说明文字（如“请选择性别”）应放在
<fieldset><legend>里，而非包裹全部选项的<label>中
动态渲染或复杂布局时的兜底方案
当 label 文字分散在多个元素中（比如表格头 + 单元格说明），或需要复用已有文本时，aria-labelledby 是唯一合规解法，但它不触发原生聚焦行为。
-
aria-labelledby值是空格分隔的多个id，顺序即朗读顺序（aria-labelledby="date-label range-hint"） - 它不改变 DOM 行为：点击这些
id对应的元素，不会聚焦到目标<input> - 必须确保所有引用的
id存在且可访问（不能是display: none或aria-hidden="true"） - 不能和
for同时用在一个控件上，优先级以aria-labelledby为准
最容易被忽略的是：label 的语义作用只在「关联成立」时生效。哪怕 HTML 写对了，如果 JS 把 <input> 移走、替换、或用 replaceWith() 重绘，id 就断了——这时候得手动重建关联，或者改用隐式包裹避免 DOM 移动带来的风险。
