html制作问卷调查表单页面_html多题型问卷表单提交页面【代码详解】-html教程-PHP中文网

表单提交必须显式设置method="post"和匹配后端的action；所有控件需有name属性，单选/多选题须为每个选项设value；下拉框和文本域不可用id替代name；提交需preventdefault并用formdata配合fetch发送，避免跳转丢失数据。

html制作问卷调查表单页面_html多题型问卷表单提交页面【代码详解】

表单提交失败：没加 `method="post"` 或 `action` 属性

浏览器默认用 GET 提交，会导致问卷数据拼在 URL 里，不仅不安全，还容易被截断（URL 长度有限），后端也收不到完整数据。必须显式声明提交方式和目标地址。

<form method="post" action="/submit"></form> 是最常见、最稳妥的写法；action 值要和后端接口路径一致，比如 Python Flask 写 action="/api/survey"，Node.js Express 可能是 action="/survey/submit"
如果只是本地测试、不连后端，action 可暂时设为 "#"，但务必保留 method="post"，否则开发者工具 Network 面板里看不到 POST 请求体，调试会误判
别用 onsubmit="return false" 挡住原生提交又不手动发请求——这样点提交按钮毫无反应，新手常在这里卡住

单选/多选题值传空：`name` 相同但漏写 `value`

浏览器只把带 value 的勾选项发给后端。name 是字段标识，value 才是实际值。没写 value，后端收到的就是空字符串或 undefined。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

正确写法：<input type="radio" name="q1" value="a">选项A；错误写法：<input type="radio" name="q1">选项A（没 value，提交时该题无数据）
多选题（type="checkbox"）同理，每个选项都必须有独立 value，且 name 保持一致，如 name="hobbies"，后端才能按数组接收
注意：同一道单选题的所有 input 必须共用一个 name，写成 q1_a、q1_b 就变成多个独立字段，逻辑就乱了

下拉题和文本题被忽略：没设 `name` 或用了 `id` 替代

id 只用于 CSS 或 JS 定位，表单提交只认 name。漏写 name 的 <select></select> 或 <textarea></textarea>，无论用户怎么选、怎么填，后端都收不到。

<select name="education"><option value="bachelor">本科</option></select> —— 后端收到 education=bachelor
<textarea name="feedback" rows="4"></textarea> —— 别写成 id="feedback"，那只是方便 JS 获取元素，不影响提交
如果某题可选可不填，<option value="">请选择</option> 这个空值项要放在最前，避免用户没动下拉框就直接提交，后端拿到的是上一题的残留值（浏览器有时会缓存选择）

提交后页面跳转或刷新丢失数据：没处理响应或没禁用默认行为

原生表单提交会触发页面跳转或刷新，用户看不到“提交成功”提示，也来不及校验必填项。真正在用的问卷页，几乎都要用 JS 控制流程。

加 event.preventDefault() 在 submit 事件里，先拦住默认提交，再用 fetch 发请求，比如：

form.addEventListener('submit', e => {
  e.preventDefault();
  fetch('/submit', { method: 'POST', body: new FormData(form) })
    .then(r => r.json())
    .then(data => alert('提交成功'));
});