分步向导必须仅用一个form标签，否则字段数据割裂导致后端收不到完整数据；fieldset+legend是唯一语义化分组方式，需配合aria-current、焦点管理和progress组件正确实现无障碍与逻辑一致性。

为什么不能用多个

实现分步向导

整个流程必须只有一个 form 标签。多个 form 会导致字段数据割裂，提交时只能发当前表单的字段，后端收不到完整数据——比如第二步填的邮箱根本不会出现在第三步的 POST 里。

常见错误现象：submit 事件只触发当前 form 的校验和发送，用户点「下一步」却意外提交了第一步；或者 JS 手动收集各 form 数据拼接，但隐藏字段（如 type="hidden"）容易漏传、顺序错乱、重复命名冲突。

• 所有输入控件（input、select、textarea）必须是同一 form 的直系子元素或嵌套在语义化容器内（如 fieldset）
• 禁用非当前步字段时，用 disabled 属性而非 display: none，否则键盘 Tab 会跳过整块区域，且 disabled 字段值不提交——这反而是你想要的，但得靠 JS 动态控制开关
• 别给每个步骤加独立 id 并用 JS 模拟“切换 form”，那只是视觉欺骗，底层 DOM 和提交逻辑仍不可靠

fieldset + legend 是唯一靠谱的语义分组方式

用 div 或 section 包裹步骤，对屏幕阅读器来说就是一堆无结构的块。而 fieldset 天然表达“一组相关控件”，配合 legend 就能准确播报“步骤 2：收货地址”，这是无障碍支持的硬性基础。

容易踩的坑：

• legend 被设为 display: none —— 屏幕阅读器直接读不到，等于没写；正确做法是用 position: absolute; clip: rect(1px, 1px, 1px, 1px) 视觉隐藏
• legend 缺失或为空 —— fieldset 语义失效，部分旧浏览器渲染异常
• 「下一步」按钮放在 fieldset 外部 —— 键盘 Tab 顺序断裂，用户按 Tab 可能从上一步末尾直接跳到下一步按钮，中间整块表单被跳过

aria-current="step" 和焦点管理不是可选项

仅靠 CSS 显示/隐藏 fieldset，辅助技术完全感知不到当前在哪步。必须手动同步两件事：aria-current="step" 标记当前 fieldset，以及把键盘焦点移到该步第一个可聚焦元素。

使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

实操要点：

• 切换步骤时，先执行 validateStep(currentStep)，再设 aria-current="step"，最后调 firstFocusableElement.focus()
• 别用 scrollIntoView() 替代 focus() —— 它不保证获得焦点，键盘用户仍卡在原位置
• 如果该步第一个字段是 type="hidden" 或 disabled，要主动查找下一个 tabindex >= 0 或可 focus() 的元素，否则焦点丢失
• 校验失败时，聚焦第一个无效字段，并确保其 aria-invalid="true" 和 aria-describedby 指向对应错误文案

progress 元素只负责显示，别让它管逻辑

progress 是个纯展示组件，它不响应点击、不触发事件、不参与状态流转。value 卡住不动，90% 是因为 JS 没更新它，或者传了字符串 "2" 而不是数字 2。

关键约束：

• max 必须显式声明（如 max="4"），否则默认为 1，进度永远超不过 100%
• value 必须是数字，progress.value = "2" 在 Safari 和 Firefox 中可能静默失败
• IE 完全不支持 progress，降级方案得用 div + aria-valuemin/aria-valuemax/aria-valuenow 模拟
• 不要用 progress 的值做条件判断（如 if (progress.value === 3)），JS 里另维护一个 currentStep 变量，progress 只负责读取它来渲染

最易被忽略的点：后端绝不能信任前端传来的 step=3 参数。所有字段必须一次性提交，后端按完整 schema 校验——否则绕过前端 JS 就能直接 POST 第三步字段，跳过前两步的必填校验。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！