纯HTML无法实现真正可用的多步表单，必须用JavaScript驱动步骤状态、动态控制required属性、利用fieldset提升可访问性与批量禁用能力，并通过sessionStorage保存步数和数据以支持浏览器后退。
纯 HTML 无法实现真正可用的多步表单——form 标签本身没有步骤状态、不支持“下一步”逻辑、也不会自动暂存数据。所有分步行为必须靠 JavaScript 驱动，CSS 仅负责显隐和样式。
为什么 required 一加就全表单报错？
浏览器原生校验会扫描整个 form 内所有带 required 的字段，不管它们是否显示。用户在第 1 步点“下一步”，若第 2、3 步的 input 也带 required，form.checkValidity() 就直接返回 false，甚至可能触发错误提示框或焦点跳转。
- 正确做法：切换步骤前，用 JS 动态开关
required属性——只给当前data-step="2"的字段设required，其余移除 - 更稳妥的替代方案：完全不用
required，改用validateStep(2)手动检查document.querySelectorAll('[data-step="2"] input, [data-step="2"] select')的值与格式 - 别信“用
display: none就不会校验”——它只是隐藏，DOM 仍在，校验照常发生
fieldset 比 div 多了什么实际价值？
不是为了好看，而是两个硬需求：可访问性（screen reader 能读出 legend 上下文）和批量禁用（fieldset.disabled = true 自动锁死所有子控件）。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 必须配
legend，否则语义丢失，部分旧浏览器渲染异常 - 按钮（如“下一步”）得放在
fieldset内部，否则键盘 Tab 顺序断裂，用户按 Tab 可能直接跳过整步 - 视觉上想隐藏
legend？别用display: none，改用position: absolute; clip: rect(1px, 1px, 1px, 1px); - 性能无差异，但漏掉任一细节，残障用户或测试工具就会报错
用户点浏览器后退键，表单状态怎么不丢？
默认 reload 页面，JS 状态全清空。要保留，必须主动存取 sessionStorage，且必须存两样东西：当前步数 + 所有字段值。
立即学习“前端免费学习笔记（深入）”；
- 切步前执行：
sessionStorage.setItem('formStep', String(nextIndex))和sessionStorage.setItem('formData', JSON.stringify(formData)) - 页面加载时，在初始化最开头就读：
const savedStep = sessionStorage.getItem('formStep')，存在则立刻showStep(Number(savedStep))并还原数据 - 敏感字段（如身份证号）别存
localStorage；sessionStorage关闭标签页即清空，更符合安全预期 - 别监听
popstate去模拟路由——多步表单通常不配真实 URL 路由，强行加会让 history 栈混乱，反而破坏原生后退体验
最容易被忽略的是：所有中间步骤的按钮必须是 type="button"，而不是 type="submit"。漏掉这个，点“下一步”瞬间触发默认提交，页面刷新，前面所有 JS 逻辑都白写。
