制作调查问卷_html多选框和单选框标签用法

单选框和多选框必须同name才成组，value传值，checked设默认；name不一致则互斥失效或后端收不到数组；label需用for与input的id显式绑定，disabled控件不提交。

单选框和多选框在 HTML 表单里不是“写对就能用”，关键得靠 name 统一组别、靠 value 传值、靠 checked 控制默认状态——漏掉任意一个，提交时就可能拿不到数据或逻辑错乱。

单选框（radio）必须同名才互斥

浏览器只认 name 相同的 input[type="radio"] 是一组。如果每个 radio 的 name 都不同，那就等于各自为政，点哪个都只能选自己，无法取消选中。

• 正确写法：<input type="radio" name="level" value="junior">初级 和 <input type="radio" name="level" value="senior">高级
• 错误写法：<input type="radio" name="level1"> 和 <input type="radio" name="level2"> —— 这俩永远不互斥
• 默认选中用 checked，但同一组里最多只有一个能加这个属性，否则行为未定义（多数浏览器只认第一个）

多选框（checkbox）同名才归为同一字段

后端接收时，name 相同的 checkbox 会被打包成数组（如 PHP 的 $_POST['hobby'] 是数组，Python Flask 的 request.form.getlist('hobby')）。如果 name 写错或不一致，后端只能收到零散的单个值，甚至只拿到最后一个。

• 常见错误：<input type="checkbox" name="hobby1">阅读 和 <input type="checkbox" name="hobby2">运动 —— 后端收不到 hobby 这个键
• 正确写法：<input type="checkbox" name="hobby" value="reading">阅读、<input type="checkbox" name="hobby" value="sports">运动
• 全选/反选需用 JavaScript 遍历 document.querySelectorAll('input[name="hobby"]')，不能只靠 class 或顺序

label 标签不加 for 属性会降低可访问性

直接把 input 套进 label（<label><input>文本</label>）虽能点击生效，但屏幕阅读器可能无法准确关联；更稳妥的是显式绑定 id 和 for。

立即学习“前端免费学习笔记（深入）”；

• 推荐写法：<input id="agree" type="checkbox" name="agree"><label for="agree">我已阅读并同意条款</label>
• 不推荐：<label><input type="checkbox">我已阅读...</label> —— 某些辅助工具识别率低
• 注意：for 的值必须严格等于对应 input 的 id，大小写、空格、下划线都不能错

表单提交时没拿到多选值？先查这三处

用户勾了多个 checkbox，但后端只收到一个值或完全收不到，大概率是以下三个地方之一出问题：

• form 的 method 是 GET 还是 POST？GET 提交时 URL 长度有限，多选项一多容易被截断
• 后端代码没用对取值方式：PHP 要用 $_POST['xxx']（不是 $_POST['xxx'][0]），Node.js 的 body-parser 默认不解析数组，需配置 extended: true
• 有 JS 动态修改了 name 或禁用了某些 input（比如加了 disabled 属性），而 disabled 的控件不会参与提交

真正容易被忽略的是：浏览器提交时，未勾选的 radio 和 checkbox 根本不会发任何字段过去——后端不能假设“没收到就是 false”，而要明确判断字段是否存在。比如问卷里“是否接受推送”是个单选，用户不点就等于没提交，后端得按“未回答”处理，而不是当成“否”。