HTML单选框需用<input type="radio">，同组name值相同以实现互斥；配合label提升可访问性，可用for/id显式关联或嵌套隐式关联；用checked设默认选中；CSS可通过appearance:none和伪元素自定义样式。
如果您需要在HTML表单中添加单选框，必须使用 <input type="radio"> 元素，并确保同一组单选框具有相同的 name 属性值，以实现互斥选择。以下是具体实现方式：
一、基础语法与属性设置
单选框通过 <input> 标签定义，其 type 属性必须设为 "radio"；name 属性用于分组，同名即为一组；value 属性决定提交时的值；id 与 label 配合可提升可访问性。
1、编写 <input type="radio" name="gender" value="male"> 创建一个单选框元素。
2、为该单选框添加 id="male-opt" 属性以便关联标签。
立即学习“前端免费学习笔记（深入）”；
3、在其后紧接 <label for="male-opt">男</label>，使点击文字也能触发选择。
二、使用 label 包裹实现隐式关联
无需显式声明 for 和 id，直接将 <input> 嵌入 <label> 内部，浏览器自动建立关联，简化结构并增强语义化。
1、书写 <label><input type="radio" name="level" value="basic"> 初级</label>。
2、重复该结构，为同一组添加其他选项，如 <label><input type="radio" name="level" value="advanced"> 高级</label>。
3、确保所有同组单选框的 name 属性值完全一致，例如均为 "level"。
三、设置默认选中状态
通过添加 checked 属性（无值），可使某个单选框在页面加载时默认处于选中状态；同一组中仅允许一个 checked 存在，否则行为未定义。
1、在目标单选框标签中加入 checked，例如：<input type="radio" name="theme" value="dark" checked>。
2、确认该组内其余单选框未设置 checked 属性。
3、验证页面加载后，该选项确实显示为已选中状态，且用户无法同时选中多个。
四、添加 CSS 样式控制外观
原生单选框样式受限，可通过 CSS 隐藏默认控件并用伪元素或背景图自定义视觉表现，同时保持功能完整和可访问性。
1、使用 input[type="radio"] { appearance: none; } 移除浏览器默认样式。
2、添加 ::before 伪元素，设置宽高、边框及圆角，模拟单选圆点。
3、利用 :checked::before 选择器，在选中时填充背景色或插入图标。
