正确使用 label、for、id、name 和 type 五属性可解决80%表单可访问性问题：label 与 input 必须通过 for/id 显式关联；name 需语义化且不可省；type 应真实反映内容类型；required 需配合自定义提示与焦点管理；自定义控件须手动实现完整键盘导航与 aria 支持。
直接用对 label、for、id、name 和 type 这五个属性，就能解决 80% 的表单可访问性问题。其他 ARIA 或 JS 补丁，都是在它们没做对的前提下才需要的。
label 和 for 必须显式配对，不能靠视觉位置
屏幕阅读器不看 CSS 布局，只认 for 和 id 的字符串匹配。哪怕 label 紧挨着 input，只要没写 for="xxx" 和 id="xxx"，点击文字就不会聚焦输入框，VoiceOver 也读不出字段用途。
- 正确写法：
<label for="email">邮箱</label><input id="email" type="email" name="email"> - 错误写法：
<label>邮箱</label><input type="email" name="email">（无关联）或<label>邮箱<input type="email"></label>（嵌套但漏id） - 移动端尤其敏感：iOS VoiceOver 依赖这个绑定触发键盘弹出；Android TalkBack 会把无绑定的
input读成“编辑框”，毫无上下文
name 属性不可省，且必须语义化
name 是表单数据提交时的键名，也是后端接收字段的唯一依据。它不渲染，但决定整个数据流是否可维护、可调试。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 没有
name的<input>不会出现在FormData或传统 GET/POST 请求中 - 避免
name="input-1"、name="field_x"这类无意义值；用name="user_phone"、name="billing_postal_code"直接表达业务含义 - 多选场景注意命名：checkbox 组统一用
name="interests[]"（PHP 风格）或name="interests"（现代后端按同名聚合），别混用
type 属性要真实反映内容类型，不是为了换键盘
type 决定原生校验逻辑、软键盘类型、语音识别规则和辅助技术语义。乱设会破坏整个链路。
-
type="email"：Chrome 校验格式，iOS 键盘自动带 @/.com 快捷键，VoiceOver 读作“邮箱字段” -
type="tel"：Android TalkBack 拆读手机号（如“一三八、一二三四、五六七八”），不是单纯调数字键盘 -
type="number"仅用于真正需计算的数值（年龄、金额）；邮编、手机号本质是字符串，用它反而在 Safari 中失效pattern，且允许输入e和- - 密码切换必须用
type="password"+type="text"切换，禁用 JS 掩码——否则密码管理器无法识别，屏幕阅读器直接读明文
required 和错误提示必须联动，不能只加个属性就完事
加了 required 却没处理校验失败反馈，等于没加。浏览器原生英文提示（如 “Please fill out this field”）对中文用户无效，也不满足 WCAG。
- 视觉反馈靠 CSS：
:user-invalid比:invalid更准，它只在用户真实输错后生效 - 文案控制靠 JS：
input.setCustomValidity("请输入11位手机号")，再调一次checkValidity()触发显示 - 焦点管理必须做：提交失败后，用
input.focus()聚焦首个错误字段，并确保该字段有aria-describedby="error-id"关联提示 - 禁用
oninvalid做 UI 提示——它只在 submit 时触发，无法覆盖实时校验，且各浏览器时机不一致
最容易被忽略的点：所有自定义下拉（div+ul 实现）、日期选择器、滑块等控件，只要替换了原生 select 或 input[type="date"]，就必须手动实现完整的键盘导航（Tab/Arrow/Enter）、role、aria-expanded 和焦点管理。原生控件开箱即用，别为样式牺牲可访问性底线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
