向导式表单必须用 JavaScript 实现，因 <form> 无原生分步机制；多表单导致数据割裂，CSS 隐藏字段仍参与提交校验；<fieldset>+<legend> 语义正确且可访问，需 JS 控制步骤切换、校验、aria-hidden、disabled 及 <progress> 同步更新。
向导式表单不能靠纯 HTML 实现，form 标签本身没有“步骤”概念，必须用 JavaScript 控制显示/隐藏、校验和状态流转。
为什么<form>标签不能直接分步
浏览器把 <form> 当作一个整体提交单元：只要触发 submit 事件，所有带 name 的字段（无论是否可见）都会打包发送。没有内置的「下一步」或「当前步」状态管理机制。
- 写多个
<form>标签会导致数据割裂——第二步填的值无法自动带到第三步 - 用 CSS 隐藏某部分（如
display: none）只是视觉上消失，字段仍参与提交和校验 -
required属性对隐藏字段也生效，容易导致form.checkValidity()全局误报
用fieldset分组 + JS 控制步骤的核心逻辑
语义正确、键盘导航友好、屏幕阅读器可读，比用 <div> 包步骤更稳妥。但必须配合 JS 才能真正切换。
- 每个步骤用一个
<fieldset>包裹，且必须配<legend>（不能display: none，可用 clip 方法视觉隐藏） - 按钮（如「下一步」）要放在
<fieldset>内部或紧邻之后，避免 Tab 键跳过整步 - JS 中维护单一变量
currentStep = 1，切换时只做三件事：
— 调用validateStep(currentStep)校验当前步必填项
— 对所有fieldset设置aria-hidden="true"，仅对当前步设aria-hidden="false"
— 更新progress.value和步骤容器的hidden状态
validateStep()怎么写才不踩坑
别调 form.checkValidity()，它会扫全部字段，包括未显示的步骤，必然失败。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 只查当前步内带
data-step="2"的必填字段：document.querySelectorAll('[data-step="2"] :required') - 逐个调
field.checkValidity()，失败时立刻field.focus()，比弹 alert 更自然 - 邮箱、手机号等格式校验，用
type="email"或pattern属性即可，不用手写正则——浏览器原生支持更可靠 - 禁用非当前步的输入框：
fieldset:not([data-step="2"]) input→disabled = true，比单纯隐藏更防误操作
<progress>只是个显示器，不是控制器
它不会感知步骤变化，也不会触发任何逻辑。value 卡住不动，90% 是因为 JS 没更新它，或者传了字符串 "2" 而不是数字 2。
-
<progress value="2" max="4"></progress>中的value必须是数字，"2"在部分浏览器里会失效 - IE 不支持
<progress>，降级方案只能用<div class="progress-bar"><span style="width: 50%"></span></div>配 CSS - 千万别在 JS 里只改
progress.value却忘了同步更新aria-valuenow和步骤容器的class或hidden属性
最常被忽略的是 disabled 状态和 aria 属性的同步——用户用键盘操作时，没 disabled 的隐藏字段仍能被 Tab 进去，没 aria-hidden 的步骤会被屏幕阅读器读出来。
