HTML表单可用性取决于label、for、id、name等基础属性的正确使用：label必须通过for与input的id显式绑定；name需语义化且不可省略；type应精准匹配语义以触发原生校验与辅助技术；required需搭配视觉及文本提示；提交失败后须聚焦首个错误字段并关联aria-describedby。
HTML 表单的可用性不是靠加样式或 JS 交互堆出来的，而是从 <label>、for、id、name 这些基础标签和属性是否对齐用户心智决定的。没做对这几点，后续所有优化都事倍功半。
label 和 input 必须成对绑定，不能只靠视觉对齐
很多页面看着“有 label”，但点击文字无法聚焦输入框——本质是 <label> 没真正关联到 <input>。浏览器只认显式绑定，不认位置相邻或 CSS 模拟。
- 正确做法：给
<input>设唯一id，<label>用for属性指向它：<label for="email">邮箱</label><br><input type="email" id="email" name="email">
- 错误写法：嵌套但漏掉
id或for，或仅靠<label><input>邮箱</input></label>（这种只对部分 type 生效，且不支持所有辅助技术） - 移动端尤其敏感：iOS VoiceOver、Android TalkBack 都依赖这个绑定关系触发焦点，否则用户得手动划到输入框才能操作
name 属性不能省，且要语义化，别用 index 或 random 字符串
name 是表单提交时字段的键名，也是后端接收数据的依据。它不参与渲染，但决定整个数据流是否可维护。
- 必须存在：没有
name的<input>不会出现在FormData或传统 form submit 的 query string 中 - 避免
name="input-1"、name="field_abc"这类无意义值；用name="user_email"、name="shipping_address_postal_code"直接表达业务含义 - 数组型字段注意命名规则：多选 checkbox 或动态添加项，用
name="hobbies[]"（PHP 风格）或name="hobbies"（现代 JS 后端通常按同名聚合），不要混用
type 属性要精准匹配语义，别全用 text
type 不只是让输入框换图标，它直接触发原生校验、软键盘类型、语音输入适配和无障碍角色识别。
立即学习“前端免费学习笔记（深入）”；
- 邮箱必须用
type="email"：iOS 键盘自动显示 @ 和 .com 快捷键，Chrome 会做基础格式校验（空值或无 @ 时checkValidity()返回 false） - 数字场景优先
type="number"或type="tel"，而非type="text"+ 正则 JS 校验——前者在低端机上更可靠，后者常被绕过 - 密码字段严格区分
type="password"和type="text"（用于“显示密码”切换），切勿用type="password"加 JS 改 value 来模拟明文，会破坏密码管理器识别 - 日期/时间控件慎用
type="date"：Safari 对min/max支持差，且无法自定义格式；如需强控制，建议用type="text"+ 专用日历组件，但必须保留inputmode="numeric"和pattern辅助
必填项要用 required + aria-required 双保险
required 属性能触发原生提示和 checkValidity()，但部分旧屏幕阅读器可能忽略它，尤其当 label 文本没明确说“必填”时。
- 始终搭配视觉提示：在 label 后加
<span aria-hidden="true">*</span>，再用 CSS 隐藏非屏幕阅读器用户看到的 * 号 - 对不支持
required的老浏览器（如 IE11），JS 层仍需做空值判断，不能只信 HTML 层 - 避免仅靠颜色标必填（比如红字）：色弱用户无法识别，必须有文本或图标冗余提示
-
aria-required="true"不是必需的（required已隐含该语义），但加了无害；重点是确保 label 文本本身包含“必填”字样，比如“手机号（必填）”，这是最健壮的做法
最容易被忽略的是：表单提交失败后，焦点没回到第一个报错字段，也没有清晰的错误文案绑定到对应 input 的 aria-describedby。这会让键盘用户和屏幕阅读器用户反复迷失上下文——修复它比加十个动画效果更能提升真实可用性。
