label标签必须显式关联input type="date"，否则屏幕阅读器无法识别且点击标签不能聚焦；原因在于原生date控件结构复杂，仅DOM包裹不保证语义绑定，W3C要求for属性或嵌套+id匹配。
label 标签必须显式关联 input type="date"，否则屏幕阅读器无法识别、点击标签也无法聚焦输入框——这是可访问性硬性要求，不是“建议”。
为什么 label 不能只靠位置包裹？
很多人写成这样：
<label>生日：<input type="date" id="birthday"></label>看似合理，但部分浏览器（尤其是 Safari 和旧版 Edge）不会把点击“生日：”触发日历弹出。原因在于：原生
input type="date" 的内部控件结构复杂，仅靠 DOM 包裹不保证语义绑定生效。W3C 明确要求使用 for 属性或嵌套方式 + 显式 id 匹配。
label 的两种安全写法（必须二选一）
以下两种都通过 WCAG 2.1 AA 级可访问性测试，且在 Chrome/Firefox/Safari/Edge 中行为一致：
- 显式
for关联（推荐）：<label for="birthday">生日：</label><input type="date" id="birthday" name="birthday">
- 嵌套写法（
id仍需存在）：<label>生日：<input type="date" id="birthday" name="birthday"></label>
注意：这里id不能省，否则嵌套失效
常见错误：用 aria-label 替代 label
这是高频误区。写成这样：
<input type="date" aria-label="生日">会导致两个问题：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 键盘用户按
Tab进入该字段时，屏幕阅读器可能只读“日期编辑框”，不读“生日”，语义丢失 - 点击“生日”文字无法聚焦——
aria-label不提供交互绑定能力 - 表单验证失败时，浏览器原生提示（如“请填写生日”）不会出现，因为
aria-label不参与 HTML 表单语义链
额外提醒：不要忽略 name 属性
即使加了 label，如果 input 缺少 name，提交表单时该字段值根本不会发送到后端。尤其在使用 FormData 或传统 form submit 时，name 是必填项，不是可选项。
立即学习“前端免费学习笔记（深入）”；
容易被忽略的点是：某些 UI 框架或低代码平台会自动补 name，但纯 HTML 手写时，90% 的人漏写它。检查方法很简单——打开 DevTools，在 Elements 面板里确认 input 元素同时具备 id、for（或正确嵌套）、name 三个属性。
