可访问的响应式表单核心是语义结构、键盘流与视口适配三者对齐：form的method和action必须小写且正确配置，label与input须通过for/id精确绑定，type属性不可省略，响应式布局需用flex避免破坏焦点顺序。
可访问的响应式表单不是加个 aria-label 就完事，核心是语义结构 + 键盘流 + 视口适配三者对齐。漏掉任意一环，屏幕阅读器会跳过字段、移动端点不准、小屏用户得横向滚动才能看到提交按钮。
form 标签的 method 和 action 必须写对且小写
浏览器只认 method="post"，写成 method="POST" 在 Safari 旧版或某些嵌入式 WebView 中会被忽略，导致表单静默失败；action 不能为空或仅写 ""，否则可能提交到当前 URL 路径（比如 https://example.com/login/ 变成 https://example.com/login/login），引发 404 或刷新。
- 开发阶段可用
action="/login"占位，确保通道通 - 若用 JS 拦截提交，
action="#"可以，但必须在事件处理器里调用event.preventDefault() - 别依赖 JS 补救——没有正确
method和action，表单连“可提交”这第一关都没过
label 和 input 的 for/id 绑定不能省略或错位
移动端点击“用户名”文字没反应？不是 CSS 问题，是 label 没绑定上 input。辅助技术（包括读屏器和语音输入）完全依赖 for 与 id 的精确匹配来建立焦点路径。
- 必须写成：
<label for="username">用户名</label><input id="username" name="username"> - 禁止嵌套：
<label>用户名<input></label>—— Safari 15 之前不支持稳定聚焦 -
name和id可以相同，但for只认id，不认name - 没有
id的input，等于在可访问性层面“不存在”
响应式断点下 input 宽度和 label 布局要同步重排
小屏时如果只给 input 设 width: 100%，但 label 还是 inline-block 固定宽度，就会出现文字被截断、点击热区偏移、甚至 label 被挤到下一行遮住输入框的问题。
- 推荐用
flex布局包裹每组label + input，小屏时设flex-direction: column - 避免用
float或绝对定位控制表单流，它们会破坏键盘 Tab 顺序 - 所有
input必须有type：用户名用type="text"，密码用type="password"，邮箱用type="email"——这不仅影响移动端键盘类型，也决定密码管理器能否自动填充 - 别用
placeholder替代label，它在焦点丢失后就不可见，违反 WCAG 2.1 3.3.2
required 和 autocomplete 属性要按场景开闭
required 是前端验证起点，但它的行为在不同浏览器中略有差异；autocomplete 则直接影响密码管理器是否触发——关错一个，用户就得手动输两遍密码。
- 登录页的密码字段务必设
autocomplete="current-password"，注册页设autocomplete="new-password" - 用户名字段建议设
autocomplete="username"，比"email"更准确（即使邮箱当账号） -
required要配合后端校验，纯前端required可被绕过；但它能阻止用户误点提交后才弹出错误 - 不要给隐藏字段或 JS 控制字段加
required，会导致表单无法提交
最常被忽略的其实是 tabindex 的默认秩序——只要 HTML 结构是线性书写的（label 在 input 前、按钮在最后），Tab 键自然从上到下走；一旦用 CSS 改变视觉顺序却没调整 DOM 流，键盘用户就卡在第一个字段出不去。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
