必须用阻止跳转，配合js收集数据；单选题用相同name分组，多选题用checkbox；本地测试需http服务而非双击打开；答案实时存localstorage并自动恢复；提交后生成可复制的markdown文本。
怎么用纯HTML写一个能收集答案的问卷
不能只写 <form></form> 就完事——浏览器默认会跳转提交页面，用户填完就没了。必须加 onsubmit="return false;" 阻止默认行为，再用 JS 拦住数据。否则你看到的不是“提交成功”，而是空白页或 404。
常见错误：漏掉 type="submit" 的按钮，或者把 <button></button> 写成 <div>，结果点不动；还有人给每个选项都用相同 <code>name 却忘了单选框（<input type="radio">）必须靠 name 分组，否则多选会互斥失败。
实操建议：
-
<form onsubmit="return false;"></form>是底线，不加这句，表单一定走 HTTP GET/POST 跳转 - 单选题所有选项用同一
name，比如name="q1"；多选题也同理，但要用type="checkbox" - 每道题加
id（如id="q2-answer"），方便 JS 用document.getElementById()取值 - 别依赖
value显示文字——显示文字写在标签里（如<label>是</label>），value只存提交值（如value="yes"）
本地测试时为什么点提交没反应
因为现代浏览器禁止 file:// 协议下运行脚本的某些能力，比如 localStorage 读写、fetch 请求，甚至部分事件监听器会静默失效。你双击打开 HTML 文件，JS 看似加载了，但 addEventListener('submit', ...) 可能根本没绑上。
解决办法只有一个：起个本地服务。不用装 Node 或 Python 全家桶，Windows/macOS/Linux 都可用 Python 自带的 http.server：
python -m http.server 8000
然后访问 http://localhost:8000/your-form.html。这时候 JS 才真正执行，console 里的日志、alert 提示、数据收集逻辑才会生效。
容易踩的坑：
- 误以为 “文件拖进浏览器就能跑” —— 实际上 file:// 下
fetch直接报net::ERR_FAILED - 用 VS Code Live Server 插件却没点“Go Live”，或者点了但没刷新页面，仍停留在 file://
- JS 放在
里但没加defer，导致 DOM 还没加载完，getElementById返回 null
如何让问卷答案不丢，关页面也能恢复
用 localStorage 最直接。但它只存字符串，且容量约 5–10MB，够几十道题绰绰有余。关键不是“怎么存”，而是“什么时候存”：不能只等最后提交才写入，得在每次输入后立刻存，否则用户切屏、手滑关页，答案全空。
实操建议：
- 给每个输入控件加
oninput（文本框）或onchange（单选/多选），触发时调用保存函数 - 保存前先用
JSON.stringify()序列化对象，读取时用JSON.parse()，否则取出来是字符串不是对象 - 键名别硬编码，比如用
"quiz-data-" + Date.now()，而应固定为"quiz-current"，确保多次填写覆盖同一份草稿 - 页面加载时检查
localStorage.getItem("quiz-current")，存在就自动填充表单（注意 radio/checkbox 要设checked = true，不是改 value）
提交后怎么把答案变成可复制的文本
不需要后端，也不用导出 Excel。最轻量的做法是拼成一段 Markdown 或纯文本，放进 <textarea></textarea>，让用户 Ctrl+A → Ctrl+C 自行粘贴。重点是结构清晰、字段对齐、避免换行混乱。
示例生成逻辑（JS 片段）：
const result = `Q1: ${q1Value}
Q2: ${q2Value}
Q3: ${Array.from(q3Checkboxes).filter(cb => cb.checked).map(cb => cb.value).join(', ')}`;
然后赋给 document.getElementById('result-box').value = result;。注意：
在 <textarea></textarea> 中才生效，<p></p> 里得用 <br>。
容易被忽略的细节：
- 多选框取值必须遍历所有同名元素，不能只取第一个
querySelector - 文本框内容要
.trim()去首尾空格，否则“ 是 ”变成“是”更干净 - 如果题目含换行符（比如用户填了地址），需转义为
\n或替换为空格，否则粘贴到微信/邮件里格式错乱
复杂点在于校验逻辑和分支题跳转——那些没法靠纯 HTML+JS 硬编码搞定，得引入状态机或简单路由。但对一份静态问卷来说，上面四步做完，已经能跑通从填写、暂存到导出的完整链路。
