表单必须用包裹并设method="POST"和action，input/select需有name属性，radio/checkbox同组name一致，提交按钮type必须为submit，required仅基础校验，数据需JS或后端处理。
表单结构必须用 method 和 action
不加 标签，输入内容根本不会被提交；漏掉 method="POST" 或 action，点击提交后页面可能刷新但数据消失或 404。本地直接双击打开 index.html 时，action 不能指向后端地址（如 /submit），否则会跨域或报错——此时建议先设为 action="#"，配合 JS 拦截验证逻辑。
-
method推荐用"POST"，避免问卷答案暴露在 URL 中 -
action在纯前端调试阶段可填"#"，上线前必须替换为真实接口地址 - 每个
或必须有name属性，否则后端收不到该字段
required 属性能触发浏览器原生校验，但别全依赖它
加 required 后，空提交会弹出“请填写此字段”提示，省去写 JS 判断的初期成本。但它只检查是否为空，不校验邮箱格式、手机号位数、选项是否多选超限等。更关键的是：Safari 对 required 的兼容性在某些老版本中不稳定，且用户可手动删掉属性绕过。
- 单选题用
，同一组必须共用name（如name="experience"） - 多选题用
，每个选项独立name或共用（取决于后端接收方式） - 邮箱题型建议同时加
type="email"和required，多数浏览器会自动校验基础格式
提交按钮必须是 type="button"
写成 或 ，点击后表单完全不会触发提交行为——这是新手最常踩的坑。只有 type="submit" 才会触发表单默认提交流程。
- 若要用 JS 控制提交（比如异步发请求），需在
form.onsubmit里调用event.preventDefault() - 禁用状态用
disabled属性，不要仅靠 CSS 隐藏或加 opacity - 按钮文案别写“确定”，写“提交问卷”更明确，降低用户犹豫
纯 HTML 表单无法真正保存数据，JS 或后端才是关键
你在 index.html 里写得再完整，只要没连后端 API 或没加 JS 存 localStorage，用户点完提交，数据就丢了。浏览器控制台里能看到 Network 请求，但响应如果是 404 或 CORS 错误，说明还没接通服务。
- 本地测试时，可用
fetch发到https://httpbin.org/post查看数据是否发出 - 如果只是临时收集，可用
localStorage.setItem("survey", JSON.stringify(formData))先存起来（注意隐私合规） - 所有
textarea和input值默认是字符串，数字类问题（如“年龄”）需 JS 转parseInt()再处理
实际运行时最容易被忽略的，是表单字段的 name 命名和后端约定是否一致——名字对不上，后端收到的就是空值，而你还在前端反复检查 JS 逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
