label的for属性必须与单个input的id严格一一匹配，大小写、符号均需一致；嵌套写法更可靠但仅限单控件；复杂场景用aria-labelledby补充，但不触发聚焦。

label for属性必须逐个匹配每个input的id

批量绑定不是靠一个管多个控件，而是为每组、每个可交互元素单独配对。浏览器不支持“一个for指向多个id”，for值只能是单个字符串，且必须与目标id完全一致——大小写、连字符、下划线、空格，一个都不能错。

常见错误现象：邮箱 → 缺id，点击无效；邮箱 → 连字符不一致，失效。

• 每个、、都必须有唯一id（如id="login-username"，避免用随机数或时间戳）
• for值建议从目标id属性中复制粘贴，而非手打
• 用 DevTools 选中，看for值，再全局搜索该字符串是否作为id存在且仅出现一次

radio/checkbox 组必须为每一项单独写label

一组radio共用name，但每个选项必须有独立id和对应for，否则键盘 Tab 会跳过整个组，屏幕阅读器也无法逐项朗读。

错误写法：性别：男 女 → 只有第一个input被绑定，第二个点不了文字，Tab 键也进不去。

• 正确结构是每个input配一个，或用嵌套方式：男
• 不要让多个input共享同一个id，这会导致for指向不可预测的元素
• 若用 JS 动态生成，确保每次渲染都为每个选项生成唯一id，不能复用模板中的静态id

嵌套写法适合简单表单，但不适用于动态移动或复用场景

把input直接包进里，天然绑定，不用for和id，是最少出错的方式。但它只对单个原生可聚焦控件有效，且语义连接依赖 DOM 位置。

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

常见问题：搜索清空 → 是交互元素，会干扰焦点逻辑，部分读屏器忽略整个label。

• 仅允许包裹一个可聚焦控件：、、、（注意：不是
  或自定义组件）
• 若控件会被 JS 拖拽、重排、或跨容器移动，嵌套结构容易断裂，label失去语义
• 无法复用同一段文字关联多个控件（例如“必填”提示需同时作用于用户名和邮箱）

复杂布局推荐 aria-labelledby 作为补充方案

当 label 文字分散在多个元素中（比如表格头+单元格说明），或需要复用已有文本时，aria-labelledby是唯一合规解法，但它不替代for/id，也不能触发原生聚焦行为。

示例：日期 (起止时间) → 屏幕阅读器会按顺序朗读“日期 起止时间”，但点击这段文字不会让 input 获焦。

• aria-labelledby值是空格分隔的多个id，顺序即朗读顺序
• 所有引用的id必须存在、非display: none、非aria-hidden="true"
• 不能和for同时用在一个控件上，优先级以aria-labelledby为准
• 旧版 IE 不支持，且需配合 JS 补充点击聚焦逻辑才能完整模拟for行为

最容易被忽略的一点：label 的文本内容本身构成控件的“可访问名称”，它会被屏幕阅读器直接朗读。所以别写“点这里”“↓”或大段说明，更不能用placeholder代替——placeholder 输入时就消失，且多数读屏根本不读它。