单选按钮必须用且同组name值一致，必须设置value属性，需用绑定以支持点击文字选择，默认选中用checked属性。
单选按钮必须用 <input type="radio">，且同组 name 值要一致
HTML5 中没有新增单选按钮语法，仍沿用 <input type="radio">。关键在于：同一组互斥选项必须共享相同的 name 属性值，浏览器才识别为“单选”。否则每个按钮都可独立勾选，失去单选语义。
常见错误是复制粘贴时漏改 name，导致看似一组实则各自为政。例如：
<input type="radio" name="gender" value="male"> 男<br><input type="radio" name="gender" value="female"> 女<br><input type="radio" name="role" value="admin"> 管理员
上面第三个按钮 name="role" 与前两个不同，它就和“男/女”完全无关，可同时被选中。
必须设置 value，否则提交时无法区分选中项
value 是表单提交时实际发送的值，不是显示文字。显示文字靠紧邻的 <label></label> 或纯文本。没设 value 的单选按钮，提交后该字段值为空字符串或 undefined，后端根本收不到有效标识。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：
<input type="radio" name="level" value="pro"><label>专业版</label> - ❌ 错误：
<input type="radio" name="level"> 专业版（无value，提交值为空） - ⚠️ 注意：
value推荐用简短、无空格、不含特殊字符的英文或数字，避免后端解析异常
用 <label></label> 包裹或关联 for，否则点击文字无法触发选择
用户习惯点击文字选中选项，但原生 <input type="radio"> 只响应点击小圆圈。必须通过 <label></label> 显式绑定，否则体验极差。
两种写法均可：
<!-- 方式一：label 包裹 input --><br><label><input type="radio" name="theme" value="dark"> 暗色模式</label><br><br><!-- 方式二：label 用 for 关联 id --><br><input type="radio" name="theme" value="light" id="light-theme"><br><label for="light-theme">亮色模式</label>
若不加 <label></label>，用户只能精准点击那个几像素宽的圆点——移动端基本不可用。
默认选中用 checked，但同一组只能有一个生效
给某个 <input type="radio"> 加 checked 属性，页面加载时即被选中。注意：checked 是布尔属性，写上即生效，无需 checked="true"。
浏览器会自动确保同 name 组内仅一个 checked 生效——即使你手抖写了多个，最终也只认第一个。
- ✅ 推荐：
<input type="radio" name="lang" value="zh" checked> 中文 - ⚠️ 避免：同一组多个
checked，虽不报错但逻辑混乱，调试时容易误判初始状态 - ? 提示：如需动态设默认项，用 JavaScript 改
element.checked = true，别直接操作 HTML 属性
真正容易被忽略的是：服务端返回数据后，前端 JS 动态渲染单选按钮时，checked 属性不会自动同步到 DOM 的 checked 状态，得手动赋值。这点在 SPA 应用里常出 bug。
