表单必须用包裹并设置method和action；单选/多选框需统一name值；必填项须前后端双重校验；label须通过for或嵌套绑定控件。

表单必须用 <form></form> 包裹，且要有 method 和 action

浏览器提交表单时，没写 method 会默认用 GET，导致问卷数据暴露在 URL 里，敏感问题（如年龄、职业）可能被缓存或记录；没设 action 则点击提交后页面刷新但数据根本没发出去，看起来像“点了没反应”。

实际开发中，哪怕只是本地测试，也建议先写 action="#" 占位，避免误以为逻辑有问题。

推荐写法：

<input type="radio"> 和 <input type="checkbox"> 必须配 name 且同组值一致

同一道单选题的多个选项，如果 name 不统一，浏览器就认为它们是独立控件，用户只能选一个但后端收不到完整答案；多选题同理——name 相同才能让后端以数组形式接收（比如 hobbies[]=reading&hobbies[]=swimming）。

常见错误：

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

• 复制粘贴时漏改 name 值，导致两道题共用一个 name
• 用中文或空格命名 name，如 name="喜欢的运动"，后端解析失败
• 单选题选项用了 type="checkbox" 还强求“单选”，纯靠 JS 拦截，失去语义和无障碍支持

正确示例：

<label><input type="radio" name="experience" value="0-1"> 0–1 年</label><br><label><input type="radio" name="experience" value="1-3"> 1–3 年</label>

必填项要同时用 required 属性和后端校验

required 只在前端触发基础提示（比如 Chrome 会标红+弹 tooltip），但用户禁用 JS、用 curl 或 Postman 发请求时，这个约束完全失效。只靠前端校验等于没校验。

更隐蔽的问题：

• required 对 <textarea></textarea> 和 <select></select> 生效，但对自定义下拉（如 div 模拟 select）无效
• 某些安卓输入法会自动填充空格，required 不拦截，导致“看着填了，其实提交的是空格”
• 用户用开发者工具删掉 required 属性后可直接绕过

所以：前端加 required 是体验优化，后端收到请求后仍需检查字段是否存在、是否为空字符串、是否为有效枚举值。

<label></label> 必须绑定控件，别只靠视觉对齐

仅把文字和 <input> 写在一起，点击文字无法聚焦输入框，对触屏设备和屏幕阅读器都不友好。正确做法是用 for 属性指向控件的 id，或把 <input> 套进 <label></label> 里。

注意点：

• id 值必须唯一，同一页面重复 id="age" 会导致部分 label 失效
• 不要用 class 替代 id 绑定，for 只认 id
• 隐藏类（如 style="display:none"）不影响 label 功能，但若用 aria-hidden="true" 或 hidden 属性，则 label 和控件都会被读屏器忽略

推荐写法：

<label for="q3">您最常使用的编程语言？</label><br><select id="q3" name="primary_lang" required><br><option value="">请选择</option>
<br><option value="js">JavaScript</option>
<br></select>

表单结构看似简单，但每个属性缺失或错配都可能让数据采集链路断裂；最常被跳过的其实是 name 一致性检查和后端兜底校验——这两处出问题，轻则丢数据，重则问卷统计结果全偏。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！