id与for必须严格配对才能实现label点击聚焦功能，要求id唯一、无空格、大小写一致；data-*不参与表单提交，js中需用dataset访问且值恒为字符串；tabindex="-1"用于js主动聚焦但不进入tab流；title仅悬停提示，aria-label才是无障碍核心标签。
id、class、data-*、tabindex、title 这几个全局属性在表单元素中用得最多，也最容易出错。其他如 contenteditable、draggable、translate 虽然语法上合法，但多数场景下要么无效，要么反效果。
为什么 id 和 for 必须配对才能激活 label 的点击聚焦
表单可访问性的基础不是靠 JS 绑定，而是原生语义：只有 <label for="xxx"></label> 和 <input id="xxx"> 的 id 完全一致时，点击 label 才能聚焦对应输入框。浏览器不校验类型或存在性，只做字符串匹配。
-
id值必须唯一且不含空格；写成id="user name"会导致for失效 -
for属性值大小写敏感，for="Email"匹配不到id="email" - 用
<label><input>...</label>嵌套方式可省略for和id，但嵌套结构一旦被 JS 动态打散（比如用innerHTML替换内部），焦点行为就丢失
data-* 在表单提交前读取值的常见陷阱
data- 属性不参与表单序列化（form.serialize()、FormData、submit 事件都不包含它们），常被误当作隐藏字段用。
- HTML 中写
<input data-user-id="123" name="email">，JS 里要取这个 ID 得写el.dataset.userId（连字符转驼峰，首字母小写） - 如果属性名含数字开头，如
data-2fa-enabled="true"，JS 中只能用el.dataset["2fa-enabled"]，el.dataset.2faEnabled是语法错误 - 值永远是字符串：
dataset.count取出来是"42"，不是数字，需手动Number(el.dataset.count)
tabindex 对表单流的实际影响比想象中更细粒度
表单元素默认可聚焦，但加了 tabindex 可能破坏原有顺序或引入不可见焦点陷阱。
-
<button></button>、<input>等原生控件隐式tabindex="0"，显式写tabindex="0"没问题，但写tabindex="1"会把它提到所有默认可聚焦元素之前——哪怕它在 DOM 最后 -
tabindex="-1"常用于 JS 主动聚焦（如弹窗打开后聚焦第一个输入框），但它不进 Tab 流，用户按 Tab 键跳不过去 - 给
<fieldset></fieldset>或<form></form>加tabindex="0"后，按 Tab 会先聚焦整个容器，再进内部子元素——这通常不是想要的行为，反而让键盘用户多按一次 Shift+Tab 才能退出
title 和 aria-label 在表单中的分工差异
title 是提示型辅助信息，仅鼠标悬停显示；aria-label 是无障碍核心标签，直接影响屏幕阅读器播报内容。两者不能互相替代。
-
title在移动端基本不触发（iOS Safari 不支持 hover），且无法被键盘用户访问 -
aria-label会完全覆盖元素的可访问名称，包括<label></label>文本和placeholder；若同时存在，屏幕阅读器优先读aria-label - 对图标按钮（如
<button><svg></svg></button>）必须用aria-label，title只是锦上添花
真正关键的是别把全局属性当“万能胶”：比如给 <input type="hidden"> 加 contenteditable="true"，浏览器会忽略；给 <select></select> 加 translate="no"，对选项文本无效——这些属性只在特定上下文起作用，该查规范就查，别靠猜。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
