v-model 是 vue 专属指令，html 原生无绑定概念；单选框须同 name 才能互斥，name 应语义化且不混用；默认选中仅写 checked；多选框同 name 才可批量提交；label 必须正确关联以保障可访问性；未选中的 checkbox/radio 不会提交，后端需处理字段缺失。
v-model 不是 HTML 原生属性，它只在 Vue 中有效；纯 HTML 表单里根本不存在绑定一说，只有 name、value 和 checked 这些原生控制逻辑。
单选框必须靠 name 分组，否则无法互斥
同一组单选框（比如性别、语言选项）必须共享相同的 name 值，浏览器才识别为“只能选一个”。漏写或写错 name，就会出现多个同时勾选、无法取消已选项等现象。
-
name值要语义清晰，比如用sex、theme，别用radio1这类无意义命名 - 不要给不同逻辑组共用同一个
name，比如把“性别”和“是否订阅”都设成opt，会导致互相干扰 - 默认选中用
checked属性，不是checked="true"或checked="checked"—— 纯写checked就够了 - JavaScript 获取当前选中值：遍历所有
document.querySelectorAll('input[name="sex"]:checked')，取其.value
多选框靠 name 归集，但不强制要求同组必须有相同 name
多个 type="checkbox" 即使 name 不同，也能各自独立工作；但提交时只有带 name 的才会被发送。后端收到的通常是同名字段对应多个 value，解析为数组（如 PHP 的 $_POST['hobby']）。
- 所有相关多选框应使用相同
name（如hobby），否则表单提交时无法批量收集 - 每个
value必须唯一且有意义，避免全用"on"或空字符串 - 默认选中同样只写
checked，可多个同时存在 - 不要用
id控制状态——动态渲染时易重复；改用data-id存业务主键，更安全可靠
label 标签不是可选装饰，而是关键交互层
直接点击复选框小方块体验很差，尤其在移动端。用 label 包裹或通过 for 关联，才能让整个文本区域响应点击。
- 推荐写法：
<label><input type="checkbox" name="hobby" value="coding">编程</label> - 如果分开写，务必确保
label[for]与input[id]完全匹配，大小写、空格都不能错 - 没
label的 checkbox 在屏幕阅读器下几乎不可访问，也违反 WCAG 基础要求 - CSS 中若重置了
appearance，记得手动补上焦点样式（:focus-visible），否则键盘用户会迷路
真正容易被忽略的是：表单提交时，未勾选的 checkbox 和 radio 根本不会出现在请求数据里 —— 后端不能假设“没收到就是 false”，而要明确处理缺失字段。这点在做权限开关、偏好设置时特别关键。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
