HTML多步骤表单需用JS控制显隐而非整页刷新，通过切换display属性、维护输入状态、统一收集全部字段并用FormData提交来实现无刷新体验。
怎么让 HTML 表单支持多步骤跳转而不刷新页面
直接用 form 提交必然整页刷新，破坏多步骤体验。必须用 JavaScript 控制显隐，把所有步骤写在同一个 HTML 里，靠切换 class 或 display 属性来控制可见性。
- 每个步骤用独立的
<section>或带唯一id的<div>包裹，初始只显示step-1 - 用
document.getElementById('step-2').style.display = 'block'切换，比 jQuery 更轻量且无依赖 - 务必给每步加
aria-hidden="true/false"，否则屏幕阅读器会读出所有隐藏步骤内容 - 别用
visibility: hidden—— 它仍占布局空间，用户滚动时可能看到空白段落
验证当前步骤再进入下一步的关键逻辑在哪
不能只靠前端 JS 判断输入是否为空，得按字段类型做差异化校验：文本框看 value.trim() !== ''，单选组看有没有 checked，多选至少勾一个才通过。
- 用
querySelectorAll('input[required]:not(:valid)')快速抓出当前步骤里未通过原生校验的元素 - 对自定义规则（比如邮箱格式、手机号长度），别用正则硬判，优先调
input.type === 'email'让浏览器自己校验 - 提交前调
form.checkValidity()，它会触发所有required和pattern规则，并返回布尔值 - 错误提示别插
alert()—— 用户关掉后不知道哪错了，应该在对应输入框旁加<small class="error">请输入手机号</small>
用户点“上一步”时如何还原上一步的填写状态
不保存状态的话，返回后所有输入清空，体验极差。最稳的方式是监听输入事件，把值存在 JavaScript 对象里，键名和表单 name 属性一致。
- 给所有输入绑定
input事件（不是change，后者在失焦才触发，用户打字中途切步会丢数据） - 用
localStorage.setItem('survey-data', JSON.stringify(data))持久化，避免刷新丢失 - 切换步骤时，先从缓存对象取值，再用
el.value = data[fieldName]回填；type="radio"要额外设el.checked = (el.value === data[fieldName]) - 注意
textarea和select的赋值方式不同：textarea用.value，select用.value或.selectedIndex
提交最终数据时后端接收不到字段怎么办
常见原因是没把所有步骤的字段一次性收集，而是只提交当前 visible 步骤的 input —— 后端拿到的只是零散片段。
立即学习“前端免费学习笔记（深入）”；
- 提交前必须遍历全部
input、select、textarea，不管是否隐藏，统一用form.elements获取 - 对禁用字段（
disabled）要手动启用再收集，因为disabled元素默认不参与提交 - 发送用
fetch时，推荐FormData构造体：new FormData(formElement)，它自动忽略disabled且兼容文件上传 - 如果后端要求 JSON，别用
JSON.stringify(Object.fromEntries(new FormData(form)))—— 它无法处理同名多选框（如hobby[]），得手写遍历逻辑
多步骤问卷真正的难点不在跳转动画，而在状态同步的边界情况：比如用户快速连点两次“下一步”，或在输入中途切到其他标签页再回来。这些地方没加防抖或 visibility change 监听，数据就容易错乱。
