多步骤表单中“下一步”按钮必须用type="button"避免默认提交，置于fieldset内保障tab顺序，禁用非当前步fieldset，点击时防抖并校验越界，切步后聚焦首个可交互元素。
多步骤表单里的按钮不是“点一下就跳到下一步”那么简单——它得控制状态、绕过浏览器默认提交、适配键盘导航，还不能破坏可访问性。纯 HTML 的 <button></button> 或 <input type="submit"> 默认会触发表单提交，这在中间步骤是致命错误。
为什么“下一步”不能用 type="submit"
浏览器看到 type="submit" 就会尝试提交整个 <form></form>，哪怕你只显示第 1 步。结果：未填的第 2、3 步字段触发校验报错；或者直接跳转/刷新，数据全丢。
- 所有中间步骤的按钮必须设为
type="button"，彻底切断默认提交行为 - 最后一步的“提交”才用
type="submit"，且应绑定form.submit()而非依赖点击事件触发 - 若用
<input>标签写按钮，type="button"同样有效，但语义不如<button></button>清晰
按钮必须放在 fieldset 内部才能保证 Tab 键顺序正常
键盘用户靠 Tab 键逐个聚焦控件。如果“下一步”按钮在 <fieldset></fieldset> 外面，Tab 到上一步末尾后，会直接跳过整步内容，落到按钮之后甚至页面其他区域。
- 每步用一个
<fieldset></fieldset>包裹，<legend></legend>做标题 - 该步的所有输入控件 + 导航按钮（上一步/下一步）都必须是这个
<fieldset></fieldset>的直系子元素 - 禁用非当前步的
<fieldset disabled></fieldset>，能自动锁住内部所有控件，比单独给每个input加disabled更可靠
如何防止用户狂点“下一步”导致状态错乱
没加防护的按钮，用户连点 3 下，“第 2 步 → 第 3 步 → 第 4 步 → 报错崩溃”很常见。JS 切步逻辑必须自带防抖和边界检查。
- 点击前先设按钮为
disabled，校验通过再恢复（别等动画结束才恢复） - 切步函数开头就做越界判断：
if (nextStep totalSteps) return - 切换前清空所有步骤的 class：
document.querySelectorAll('.step').forEach(el => el.classList.remove('step--active', 'step--done')) - 更新
<progress value></progress>时确保是数字类型：progressEl.value = nextStep，不是progressEl.value = String(nextStep)
焦点管理：按钮点完，光标该落在哪
用户点“下一步”，视觉上切换了，但焦点还卡在旧位置，键盘操作就断了。这不是体验问题，是可访问性合规红线。
- 切步后立刻调用
document.querySelector('[data-step="' + nextStep + '"] input, [data-step="' + nextStep + '"] select')找第一个可聚焦元素 - 跳过
type="hidden"、disabled、readonly字段，找真正需要用户输入的那个 - 用
el.focus()聚焦，别用scrollIntoView()—— 它不保证获得焦点 - 如果某步没有可聚焦字段（比如纯提示页），至少聚焦到该步的
<legend></legend>或容器<fieldset></fieldset>
最常被忽略的不是代码怎么写，而是按钮的语义和上下文：它是否在正确的 DOM 位置、是否与当前步骤形成逻辑闭环、是否在失能状态下仍能被屏幕阅读器准确传达。这些细节不写进 JS 函数里，但决定了表单能不能被所有人真正用起来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
