单选按钮必须用相同name才能互斥，且需配value、用label包裹、避免js仅靠checked判断值；复选框name写法影响后端接收，推荐语义化命名与完整label结构。
单选按钮必须用相同 name 才能互斥
浏览器只认 name 属性来判断哪些 <input type="radio"> 属于同一组。漏写 name，或拼错、大小写不一致，就会出现“点了男还能点女”这种失效现象。
- 同一组单选按钮的
name值必须完全相同（比如都用gender），且不能为空字符串 - 每个
radio都要配value，否则提交时拿到的是"on"或空字符串 - 用
checked指定默认项，但一组里只能有一个带该属性；否则行为不可预测 - 别把不同逻辑的选项（如“性别”和“婚姻状况”）共用一个
name，否则会意外联动
复选框 name 写法影响后端接收方式
<input type="checkbox"> 本身支持多选，但后端能否收到数组，取决于 name 的写法和框架解析逻辑。
- 如果用
name="hobby"，多数后端（尤其是 PHP 以外）只收到最后一个勾选项的value - PHP 环境下推荐写
name="hobby[]"，它会自动把同名参数转成数组 - Node.js / Python / Java 等通常靠请求体解析器处理同名参数列表，不强制要求方括号，但需确认框架配置（如 Express 的
query parser） - 每个
checkbox同样必须设value，否则勾选后提交值是"on"
不包 label 就等于放弃触控和可访问性
直接写 <input type="radio">男 看似省事，但用户只能精准点击那个小圆圈——在手机上基本点不中，屏幕阅读器也读不出语义。
- 推荐写法一：用
for关联label和input——<input id="male" type="radio" name="gender" value="male"><label for="male">男</label> - 推荐写法二：直接包裹 ——
<label><input type="radio" name="gender" value="male">男</label> - 避免在同一个
label里嵌套多个input，会导致语义混乱和焦点管理异常 - 移动端点击区域至少要达到 44×44px，光靠
input自身尺寸远远不够
JS 获取值时不能只看 checked === true
动态操作时，仅遍历所有 radio 查 checked === true 是危险的：用户还没点过任何一项时，所有都是 false，你无法区分“未选择”和“默认项被清空”。
- 获取单选值前，先查 DOM 中是否存在
checked属性为true的元素 - 若没有，再 fallback 到初始
checked属性值，或预设默认值（如"unknown"） - 设置值后，
change事件不会自动触发，需手动调用.dispatchEvent(new Event('change')) - 复选框批量取值建议用
Array.from(document.querySelectorAll('input[name="hobby"]:checked')).map(el => el.value)
name 的语义一致性与 label 的包裹完整性——它们不报错，但会在表单提交、移动端点击、无障碍测试时集中暴露问题。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
