纯HTML+CSS无法实现真正的分步表单，必须依赖JavaScript管理步骤状态、校验、数据暂存和提交控制。
怎么用原生 HTML + CSS 实现分步表单，不依赖 JS？
不能。纯 HTML 无法真正“分步”——form 提交就是一次性发全部字段，浏览器没有内置的「下一步/上一步」状态管理。所谓“多步骤”，本质是用 JS 控制显示/隐藏、校验、数据暂存。CSS 只能做视觉切换（比如 display: none），但没 JS 就没法响应按钮点击、阻止默认提交、跨步保存值。
常见错误现象：input 全在同一个 form 里，点了“下一步”却触发了整个表单提交；或者用多个 form 标签，结果每步数据彼此隔离、最后拼不起来。
- 必须用 JS 管理当前步数（如
currentStep = 2） - 所有字段建议保留在一个
form内，避免多次提交或数据丢失 - 用
fieldset+legend语义化分组，对可访问性友好 - 禁用非当前步的
input（disabled）比单纯隐藏更稳妥，防止误提交或键盘跳转
如何用 JavaScript 控制步骤切换和校验？
核心逻辑就三件事：显示当前步、校验当前步字段、更新步数变量。别写成一堆嵌套回调，用函数拆开更易维护。
使用场景：用户点“下一步”，先运行 validateStep(1)，通过才调 showStep(2)；点“上一步”直接 showStep(1)，不用重复校验。
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
validateStep(step)应只检查该步内必填项和格式（如email类型输入是否符合正则） - 别用
form.checkValidity()全局校验——它会扫所有字段，包括还没显示的，导致误报 - 校验失败时，聚焦第一个出错的
input（input.focus()），比弹 alert 更自然 - 把临时数据存在
form.dataset或闭包变量里，别塞localStorage增加复杂度
function validateStep(step) {
const fields = document.querySelectorAll(`[data-step="${step}"] :required`);
return Array.from(fields).every(field => field.checkValidity());
}
为什么推荐用 fieldset 而不是 div 包步骤？
不是为了好看，而是为了两个实际好处：表单控件语义归组、键盘导航逻辑清晰。屏幕阅读器会把每个 fieldset 当作独立区域，配合 legend 能准确读出“联系信息”“收货地址”这样的上下文。
性能/兼容性影响几乎为零，但容易踩的坑很具体：
- 漏写
legend—— 没它，fieldset就失去语义价值，且部分老浏览器会渲染异常 - 把按钮（如“下一步”）放在
fieldset外面 —— 导致键盘 Tab 顺序断裂，用户按 Tab 键可能直接跳过整步 - 用 CSS 强行隐藏
legend（如display: none）—— 屏幕阅读器也读不到，等于白写 - 需要视觉隐藏时，用
position: absolute; clip: rect(1px, 1px, 1px, 1px);替代
后端接收时，怎么避免“只收到最后一步的数据”？
因为前端没把前面步骤的值带过来。常见错误是每次切换步骤时，只保留当前步的 input 为 enabled，其他全设 disabled —— 而 disabled 字段根本不会被提交。
正确做法只有两种：
- 所有
input始终enabled，靠 CSS 和 JS 控制可见性，后端收到全部字段 - 如果必须用
disabled（比如防用户改前几步），就在切换步骤前，用 JS 把已填值同步到隐藏域（input type="hidden"），并确保这些隐藏域始终enabled - 后端不要假设字段一定存在，每个字段都做空值判断，尤其手机号、邮箱这类中间步骤可能跳过
- 别在后端“拼步骤”——前端应保证每次提交都是完整数据集，哪怕某些字段为空
最常被忽略的一点：用户反复来回切换步骤时，JS 必须确保隐藏域的值实时更新，否则后端拿到的就是过期数据。
