用 fieldset 和 legend 划分步骤最稳妥，语义清晰且无障碍友好；progress 元素实现进度条更轻量可靠；切换步骤需同步更新 aria-current 和焦点；后端应一次性校验全部字段而非依赖 step 参数。
用 fieldset 和 legend 划分步骤最稳妥
浏览器原生支持、语义清晰、无障碍友好，比用 div 堆砌更可靠。每个步骤一个 fieldset，legend 作为该步标题，屏幕阅读器能自动读出“步骤 1：基本信息”。注意不要嵌套 form 标签——整个向导应只有一个 form，所有 fieldset 都是它的直系子元素。
常见错误是给每个步骤单独套 form，导致提交时只收集当前步字段，或 submit 事件无法触发全表单验证。另外，禁用非当前步的 fieldset（disabled 属性）可阻止用户跳过验证直接操作，但需配合 JS 动态控制，否则 disabled 字段值不会被提交。
进度条用 progress 元素比 CSS 模拟更轻量
progress 是语义化原生控件，支持 value 和 max，无需额外 ARIA 属性就能被读屏软件识别。设 max="3" 表示共 3 步，当前在第 2 步就设 value="2"。别用 meter——它表达的是「度量范围」，不是「完成进度」。
容易踩的坑：
• 直接写 <progress value="0"></progress> 而不设 max，会导致默认 max=1，进度永远超不过 100%；
• 用 JS 修改 value 时没做边界检查，比如从第 3 步点「上一步」变成 value="-1"，浏览器会显示 NaN 或归零，但视觉上不报错；
• 在 Safari 中，progress 的样式自定义能力弱，若需高度定制外观（如带文字标签的横条），得退回到 div + ARIA。
切换步骤必须同步更新 aria-current 和表单焦点
仅靠 CSS 显示/隐藏 fieldset 不够。当前步的 fieldset 应加 aria-current="step"，让辅助技术明确当前所处位置；同时把焦点移到该步第一个可聚焦元素（如第一个 input），否则键盘用户会卡在上一步末尾。
实操建议：
• 用 element.focus() 而非 scrollIntoView()，后者不保证焦点获取；
• 如果某步首个字段是 type="hidden" 或 disabled，要主动跳到下一个有效字段；
• 切换前保存当前步的验证状态（例如用 checkValidity()），避免用户点「下一步」时才弹出一堆红框而不知从哪改起。
后端接收时别依赖前端的「步骤号」字段
前端传的 step=2 参数不可信。所有字段都应在一次 POST 中提交（哪怕用户只看到第 3 步），后端按完整 schema 校验，而不是分步校验再拼接。否则会出现「第 1 步数据被绕过、第 3 步字段提前提交却缺失必填项」这类逻辑漏洞。
真正需要分步处理的场景（如上传大文件后生成 token 再进下一步），应由后端返回临时凭证，前端存入隐藏字段或 sessionStorage，后续请求带上它——而不是靠 step 参数控制流程走向。step 参数只用于 UI 渲染和前端路由提示，不参与业务判断。
最易忽略的一点：当用户刷新页面时，JS 状态丢失，但表单可能已填了部分字段。此时应从 URL hash（如 #step=2）或 sessionStorage 里恢复步骤，同时保留已输入内容，而不是清空重来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
