向导式表单必须用 javascript 实现，因 无原生分步机制；多表单导致数据割裂，css 隐藏字段仍参与提交校验；+ 语义正确且可访问，需 js 控制步骤切换、校验、aria-hidden、disabled 及 同步更新。
向导式表单不能靠纯 HTML 实现，form 标签本身没有“步骤”概念，必须用 JavaScript 控制显示/隐藏、校验和状态流转。
为什么<form></form>标签不能直接分步
浏览器把 <form></form> 当作一个整体提交单元：只要触发 submit 事件，所有带 name 的字段（无论是否可见）都会打包发送。没有内置的「下一步」或「当前步」状态管理机制。
- 写多个
<form></form>标签会导致数据割裂——第二步填的值无法自动带到第三步 - 用 CSS 隐藏某部分（如
display: none）只是视觉上消失，字段仍参与提交和校验 -
required属性对隐藏字段也生效，容易导致form.checkValidity()全局误报
用fieldset分组 + JS 控制步骤的核心逻辑
语义正确、键盘导航友好、屏幕阅读器可读，比用 <div> 包步骤更稳妥。但必须配合 JS 才能真正切换。
<ul>
<li>每个步骤用一个 <code><fieldset></fieldset> 包裹，且必须配 <legend></legend>（不能 display: none，可用 clip 方法视觉隐藏）
<fieldset></fieldset> 内部或紧邻之后，避免 Tab 键跳过整步currentStep = 1，切换时只做三件事：— 调用
validateStep(currentStep) 校验当前步必填项— 对所有
fieldset 设置 aria-hidden="true"，仅对当前步设 aria-hidden="false"— 更新
progress.value 和步骤容器的 hidden 状态
validateStep()怎么写才不踩坑
别调 form.checkValidity()，它会扫全部字段，包括未显示的步骤，必然失败。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 只查当前步内带
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></progress>只是个显示器，不是控制器
它不会感知步骤变化，也不会触发任何逻辑。value 卡住不动，90% 是因为 JS 没更新它，或者传了字符串 "2" 而不是数字 2。
-
<progress value="2" max="4"></progress>中的value必须是数字，"2"在部分浏览器里会失效 - IE 不支持
<progress></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 的步骤会被屏幕阅读器读出来。
