纯html+css+js实现可回退wizard表单需：分步用fieldset+legend提升可访问性；用visibility:hidden+aria-hidden控制显隐；按钮用type="button"；步骤数据存localstorage并恢复；焦点管理与异步校验需js状态机支持。
如何用纯 HTML + CSS + JavaScript 实现可回退的 Wizard 表单
不能只靠 form 标签自动提交，必须手动控制步骤显隐和状态流转。核心是把表单拆成多个 section 或 div，用 JS 切换 display 或 visibility，同时维护当前步骤索引（currentStep）。
常见错误是直接用 display: none 隐藏所有非当前步骤——这会导致屏幕阅读器跳过、表单控件失去焦点、甚至某些浏览器清空输入值（尤其 input type="file"）。更稳妥的做法是用 visibility: hidden + position: absolute 或添加 aria-hidden="true" 并管理 tabindex。
- 每步用独立
section包裹，加role="region"和aria-labelledby提升可访问性 - 按钮统一用
button[type="button"]，避免意外触发表单提交 - 前进/后退逻辑写在 JS 里，不要依赖
form的默认行为 - 监听
input和change事件实时校验本步，但不阻断切换（留到「提交」时汇总报错）
如何让上一步/下一步按钮正确响应且不跳页
关键不是禁用默认行为，而是根本别让它走默认路径。很多初学者给按钮加 href="#" 或 onclick="return false"，结果在 Safari 或键盘导航时仍触发页面滚动或 focus 丢失。
正确做法：所有按钮都用 button 元素，明确设置 type="button"；绑定事件时用 event.preventDefault() 是冗余的，因为 button 默认就不提交也不跳转。
-
Next按钮：检查当前步是否通过基础验证（如必填项非空），再调用goToStep(currentStep + 1) -
Back按钮：直接调用goToStep(currentStep - 1)，无需验证（用户有权修改已填内容） - 禁用状态用
disabled属性，而非仅靠 CSS 灰掉——否则键盘用户仍可Enter触发 - 为无障碍支持，每次切换步骤后，用
element.focus()把焦点移到新步骤的首个可聚焦元素（如第一个input）
如何保存中间步骤数据并支持刷新后恢复
不存 localStorage 就等于没做 Wizard。用户填到第 4 步刷新页面，回到第 1 步重来，体验直接崩塌。
最简方案是每步离开前，把该步所有字段序列化进 localStorage，key 用表单 ID + 步骤名拼接（如 "signup-wizard-step2"）。恢复时在初始化阶段读取各步数据并填充对应字段。
- 用
JSON.stringify()存对象，别直接存FormData（它不可序列化） - 敏感字段（如密码、身份证号）不要存 —— 可在
localStorage中排除特定name或id - 监听
beforeunload事件做兜底保存，防止用户意外关闭标签页 - 注意 IE11 不支持
localStorage在某些隐私模式下，需加 try/catch 并降级为内存缓存
为什么用 fieldset + legend 比用 div 更合适
不是为了“语义化加分”，而是解决两个实际问题：一是屏幕阅读器能自动播报 legend 作为该步标题；二是原生支持 disabled 属性——设 fieldset[disabled]，里面所有表单控件自动禁用且视觉灰显，不用逐个操作子元素。
很多人用 div 包裹后自己写 JS 控制子元素 disabled，结果漏掉 select 的 option 或 textarea，或者忘了同步更新 aria-disabled。
- 每个步骤用
fieldset，标题用legend（不可省略，否则无障碍失效） - 用
fieldset[disabled]控制整步禁用，比遍历子元素可靠得多 - 若需隐藏某步（如条件跳过），仍用
visibility: hidden+aria-hidden="true"，不要删掉fieldset—— 否则数据恢复时字段可能找不到
实际最难的不是切步骤，是处理异步校验（比如用户名是否可用）、多步骤交叉依赖（第 3 步选项影响第 1 步的显示）、以及服务端返回部分失败时如何精准定位错误字段。这些没法靠 HTML 结构解决，得在 JS 层设计好状态机和错误映射表。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
