HTML问卷需用JavaScript实现逻辑跳转：通过CSS隐藏/显示section、监听表单事件匹配跳转规则、缓存用户数据、前端校验路径完整性，后端必须重新验证所有逻辑与必填项。
HTML 问卷调查表单本身不支持逻辑跳转，需要结合 JavaScript 实现动态显示/隐藏问题、控制提交流程，从而模拟“跳转”效果。
用 CSS 隐藏与显示控制可见性
把整个问卷拆成多个 section（如 page-1、page-2），默认只显示第一页，其余设为 display: none。用户操作后，通过 JS 切换 class 或 style 控制显隐。
- 每个 section 加唯一 ID，例如
<section id="q1">...</section> - JS 中用
document.getElementById("q1").style.display = "block"显示目标页 - 配合淡入动画可加 CSS transition 和 opacity 控制
根据选项值决定下一步
监听单选、多选或下拉框的 change 事件，读取用户选择，再匹配规则跳转。
- 比如：“您是否使用过本产品？”选“否”，则跳到结束页；选“是”，显示后续使用频率题
- 用 if/else 或对象映射（如
jumpMap = { "yes": "q3", "no": "q5" }）管理跳转逻辑 - 注意处理反向操作（如改选后需重置后续已答内容）
状态管理与数据暂存
跳转时不能丢失已填数据，需在切换前保存当前字段值。
立即学习“前端免费学习笔记（深入）”；
- 简单方式：每次离开页面前遍历其内 input/select，用 dataset 或全局对象缓存 value
- 进阶方式：用 JSON 对象维护整个表单状态，key 为字段 name，value 为当前值
- 回退按钮可读取缓存并还原上一页字段值
避免表单被绕过提交
前端跳转只是体验优化，后端仍要校验所有必填项和逻辑路径是否合规。
- 不要依赖 hidden 字段或 display:none 的存在来判断“该题是否应答”
- 提交前用 JS 遍历所有“当前逻辑路径应出现”的字段，检查是否为空或格式错误
- 服务端必须重新验证整条路径——防止用户禁用 JS 或手动修改 DOM 绕过限制
