表单提交不跳转且数据未收到是因浏览器默认整页刷新，应使用event.preventDefault()阻止并用FormData验证；评分题需用fieldset包裹并设统一name；提交按钮须禁用防重复；本地草稿用localStorage保存并自动回填。
表单提交后页面不跳转，数据也没收到
默认情况下 <form> 提交会触发整页刷新或跳转到 action 指定地址，如果你没配后端，就只能看到空白页或 404。这不是 bug，是浏览器在按标准执行。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 先用
event.preventDefault()拦住默认行为，再用 JavaScript 手动收集数据 - 本地测试阶段，直接用
console.log(new FormData(document.querySelector('form')))看字段是否取全 - 别依赖
submit按钮的value传选项——它只在表单提交时生效，JS 获取要用checked或selected - 单选题（
<input type="radio">）必须确保所有同名name值一致，否则FormData只取最后一个被选中的
评分题和 Likert 量表怎么写语义正确
很多人用一堆独立的 <input type="radio">，但漏掉 name 或没包 <fieldset>，导致屏幕阅读器无法识别这是同一道题。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 每组评分题用一个
<fieldset>包裹，加<legend>说明题目，例如：<legend>您对本次服务的整体满意度？</legend> - 所有选项共用同一个
name，比如name="satisfaction"，值设为数字（value="1"到value="5"），方便后续统计 - 避免用
<select>做 Likert 量表——下拉框隐藏选项，用户容易漏选，且移动端体验差 - 如果想视觉上更紧凑，用 CSS 控制
display: flex，但不要用div替代语义化标签
提交按钮点击后没反馈，用户反复点
纯 HTML 表单没交互状态，用户点完不知道“发没发出去”，尤其网络稍慢时，极易重复提交。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 点击后立即禁用按钮：
button.disabled = true，并改文字为“提交中…” - 别只靠前端禁用——后端仍需校验重复请求，但前端防误触是第一道防线
- 成功后清空表单用
form.reset()，别手动清value，否则会清掉textarea的换行和select的选中态 - 失败时恢复按钮状态，并把错误信息插入
<small class="error">这类就近提示元素，别只弹alert()
问卷填完没法存本地，关页面就丢数据
用户填到一半刷新或切走，所有输入白费。HTML 本身不保存状态，得靠浏览器 API 补足。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 监听
input和change事件，把当前值存进localStorage，键名用表单 ID + 字段名，比如"survey-2024-q3" - 页面加载时检查
localStorage，有对应键就自动回填——注意checkbox和radio要设checked属性，不是value - 用户提交成功后，记得
localStorage.removeItem()对应键，避免下次打开还残留旧数据 -
localStorage容量约 5MB，够存几百份问卷草稿；但别存敏感信息，它不加密
最麻烦的其实是字段校验逻辑和错误提示位置——每个问题类型（文本、单选、多选、日期）要分别处理，而且得让用户一眼看出哪错了，而不是滚动找红字。这点没法靠 HTML 自动解决，得手写判断和 DOM 操作。
