radio必须用name属性才能互斥，同名radio构成一组实现单选；label通过for绑定id可扩大点击区域；默认选中用checked属性；后端仅接收一个value值，未选中时name不提交。
radio 必须用 name 属性才能互斥
HTML 中 <input type="radio"> 默认不互斥，点了多个也能同时选中——根本原因是没设 name。只有同名的 radio 才构成一组，浏览器才强制单选。
常见错误是只改 id 或 value，漏掉 name，或者不同 radio 的 name 拼写不一致（比如 name="gender" 和 name="Gender" 被当成两组）。
-
name值必须完全相同（区分大小写、空格敏感） -
value可以不同，它决定提交时发送的值 -
id必须唯一，仅用于关联<label></label>，和分组无关
label 标签绑定 radio 提升可点击区域
单纯点小圆圈很难触发，用户实际体验差。用 <label></label> 包裹或通过 for 属性绑定，能让文字和圆圈都响应点击。
两种写法都有效，但推荐显式 for 绑定，结构更清晰、可维护性高：
<input type="radio" name="theme" value="light" id="theme-light"><label for="theme-light">浅色主题</label> <input type="radio" name="theme" value="dark" id="theme-dark"><label for="theme-dark">深色主题</label>
注意：for 的值必须和对应 input 的 id 完全一致，否则点击 label 不会聚焦/选中 radio。
默认选中用 checked 属性，别用 JavaScript 模拟
想让某一项初始就选中，直接加 checked 属性即可，不需要 JS 初始化。
- 只对同组中的一项加
checked，多加也没用（浏览器自动取最后一个） -
checked是布尔属性，写成checked或checked="checked"都行，但推荐无值写法 - 不要在 JS 里用
element.checked = true来“设默认值”，那属于运行时行为，可能被用户快速操作干扰
正确示例：
<input type="radio" name="size" value="s" id="size-s"><label for="size-s">S</label> <input type="radio" name="size" value="m" id="size-m" checked><label for="size-m">M</label>
后端接收时只拿到一个 value，别期待数组
表单提交后，服务端收到的不是一组值，而是单个 name=value 键值对。比如用户选了 name="role"、value="admin"，后端只会收到 role=admin。
容易踩的坑：
- 用
request.form.getlist('role')（Flask）或类似“取列表”的方式，结果永远是长度为 1 的列表，甚至空——因为 radio 本就不传多个 - 误以为没选中会传空字符串或
null，实际上：**没选中任何一项时，该name根本不会出现在请求体中** - 验证逻辑要判断 key 是否存在，而不是检查 value 是否为空
所以服务端第一件事通常是：if 'role' not in request.form: —— 表示用户跳过了这个必选项。
name 属性拼错、label 绑定失效、后端误判未选中状态，这三处出问题的概率远高于其他环节。检查时优先盯死这两样：name 值是否全等，for 和 id 是否严丝合缝。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
