表单必须用<form>包裹并设置method和action属性，否则数据无法提交；method推荐POST，input需有name属性，radio/checkbox同组name须一致，label需显式绑定for，布局推荐Flex/Grid，调试用Network面板或httpbin验证。
表单必须用 <form> 包裹并设 method 和 action
没这俩属性，点提交就只是刷新页面或跳 404，数据根本发不出去。本地双击打开 index.html 时，action 别写成 /submit 这类后端路径——浏览器会报跨域或找不到资源。调试阶段直接填 action="#"，配合 JS 拦截提交逻辑更安全。
method 推荐用 "POST"：问卷答案不暴露在 URL 里，也没长度限制；"GET" 只适合极简筛选类表单（比如“按城市查结果”）。
- 漏掉
name属性？后端收不到这个字段，连空字符串都不会有 -
required能触发浏览器提示“请填写此字段”，但 Safari 老版本可能不响应，且用户删掉属性就能绕过 - 提交按钮必须是
<button type="submit">或<input type="submit">，写成type="button"就完全不触发表单流程
<input type="radio"> 和 <input type="checkbox"> 的 name 必须对齐后端预期
单选题所有选项共用一个 name（如 name="experience"），靠不同 value 区分选项值；多选题每个 checkbox 也得用相同 name（如 name="hobby"），后端才能收到数组（["reading", "sports"]）。如果 name 写错、大小写不一致、或带了空格下划线，后端大概率只拿到最后一个勾选项，甚至整个字段消失。
- 同一组 radio 只能有一个
checked，否则行为未定义（多数浏览器只认第一个） - checkbox 若需“全选/反选”，JS 得用
document.querySelectorAll('input[name="hobby"]')遍历，不能只靠 class 名操作 - label 必须显式绑定：
<input id="agree"><label for="agree">我已同意</label>；把 input 套进 label 里虽能点，但屏幕阅读器识别率低
用 display: flex 或 display: grid 控制表单排列，别靠 <br> 或空格硬调
纯靠 HTML 换行或 margin/padding 调间距，一换设备就错位。Flexbox 适合垂直堆叠（移动端优先）或标签+输入框并排；Grid 更适合两栏布局（比如左列 label、右列 input）。
立即学习“前端免费学习笔记（深入）”；
- 竖屏默认用
flex-direction: column，加gap: 12px统一控件间距 - 横屏可用媒体查询切到
grid-template-columns: 120px 1fr，让 label 固宽、input 自适应 - 提交按钮若要跨两列，Grid 下设
grid-column: 1 / -1，Flex 下用width: 100%即可 - 所有表单控件统一加
box-sizing: border-box，避免 padding/border 导致宽度溢出
本地测试时怎么确认数据真发出去了？
别只看页面有没有跳转。打开浏览器开发者工具 → Network 标签页，点提交，看有没有请求发出、状态码是不是 200（或 404/500）。调试阶段可把 action 改成 https://httpbin.org/post，它会原样返回你 POST 的数据，一眼就能核对字段名和值是否正确。
如果只是临时存数据，JS 可用 localStorage.setItem("survey", JSON.stringify(formData)) 先缓存，但注意：用户清缓存就丢，且涉及隐私要合规告知——这不是生产环境的替代方案。
真正容易被忽略的是：所有 <textarea> 和 <input> 的值默认都是字符串，年龄、评分这类数字字段，后端或 JS 处理时得手动 parseInt() 或校验范围，否则 “18” 和 18 在比较时会出问题。
