单选框和多选框必须同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”，而要明确判断字段是否存在。比如问卷里“是否接受推送”是个单选，用户不点就等于没提交，后端得按“未回答”处理，而不是当成“否”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
