<input type="radio">
类型为 radio 的 <input> 元素通常用于 单选组——描述一组相关选项的单选按钮集合。
在给定的组中，一次只能选择一个单选按钮。单选按钮通常呈现为小的圆圈，选中时会填充或突出显示。
试一试
它们被称为单选按钮，因为它们的外观和操作方式类似于老式收音机上的按钮，如下所示。
注意：复选框 与单选按钮类似，但有一个重要的区别：单选按钮用于在一组值中选择一个值，而复选框允许你打开或关闭各个值。在存在多个控件的情况下，单选按钮允许从所有控件中选择一个，而复选框允许选择多个值。
值
value 属性是一个字符串，包含单选按钮的值。该值永远不会由用户的用户代理显示给用户。相反，它用于识别组中哪个单选按钮被选中。
定义单选组
单选组通过为组中的每个单选按钮赋予相同的name来定义。一旦建立了单选组，选择该组中的任何单选按钮都会自动取消选择该组中当前选中的任何单选按钮。
您可以在一个页面上创建任意数量的单选组，只要每个组都有自己唯一的name即可。
例如，如果您的表单需要询问用户首选的联系方式，您可以创建三个单选按钮，每个按钮的name属性都设置为contact，但一个值为email，一个值为phone，一个值为mail。用户永远不会看到value或name（除非您明确添加代码来显示它）。
生成的 HTML 如下所示
<form>
<fieldset>
<legend>Please select your preferred contact method:</legend>
<div>
<input type="radio" id="contactChoice1" name="contact" value="email" />
<label for="contactChoice1">Email</label>
<input type="radio" id="contactChoice2" name="contact" value="phone" />
<label for="contactChoice2">Phone</label>
<input type="radio" id="contactChoice3" name="contact" value="mail" />
<label for="contactChoice3">Mail</label>
</div>
<div>
<button type="submit">Submit</button>
</div>
</fieldset>
</form>
在这里，您可以看到三个单选按钮，每个按钮的name都设置为contact，并且每个按钮都有一个唯一的value，该值在组内唯一标识该单个单选按钮。它们还各自都有一个唯一的id，该id由<label>元素的for属性用来将标签与单选按钮关联起来。
您可以在此处尝试此示例
单选组的数据表示
当以上表单提交时，如果选择了单选按钮，则表单数据将在表单中包含一个contact=value的条目。例如，如果用户单击“电话”单选按钮然后提交表单，则表单数据将包含行contact=phone。
如果在 HTML 中省略了value属性，则提交的表单数据会将值on分配给该组。在这种情况下，如果用户单击“电话”选项并提交表单，则生成的表单数据将为contact=on，这没有帮助。因此，不要忘记设置您的value属性！
注意：如果提交表单时没有选中任何单选按钮，则单选组根本不会包含在提交的表单数据中，因为没有值要报告。
实际上，允许表单在组中没有任何单选按钮被选中时提交的情况相当少见，因此通常明智的做法是将一个默认设置为checked状态。请参阅下面默认选中单选按钮。
让我们在示例中添加一些代码，以便我们可以检查此表单生成的数据。HTML 已修改为添加一个<pre>块来输出表单数据
<form>
<fieldset>
<legend>Please select your preferred contact method:</legend>
<div>
<input type="radio" id="contactChoice1" name="contact" value="email" />
<label for="contactChoice1">Email</label>
<input type="radio" id="contactChoice2" name="contact" value="phone" />
<label for="contactChoice2">Phone</label>
<input type="radio" id="contactChoice3" name="contact" value="mail" />
<label for="contactChoice3">Mail</label>
</div>
<div>
<button type="submit">Submit</button>
</div>
</fieldset>
</form>
<pre id="log"></pre>
然后，我们添加一些JavaScript来在submit事件上设置一个事件侦听器，该事件在用户单击“提交”按钮时发送
const form = document.querySelector("form");
const log = document.querySelector("#log");
form.addEventListener(
"submit",
(event) => {
const data = new FormData(form);
let output = "";
for (const entry of data) {
output = `${output}${entry[0]}=${entry[1]}\r`;
}
log.innerText = output;
event.preventDefault();
},
false,
);
尝试此示例，看看contact组的结果永远不会超过一个。
其他属性
除了所有<input>元素共有的常见属性外，radio输入还支持以下属性。
checked-
一个布尔属性，如果存在，则表示此单选按钮是组中默认选中的一个。
与其他浏览器不同，Firefox 默认情况下保留
<input>的动态选中状态跨页面加载。使用autocomplete属性来控制此功能。 value-
value属性是所有<input>共有的属性；但是，它对类型为radio的输入具有特殊用途：当提交表单时，只有当前选中的单选按钮才会提交到服务器，并且报告的值是value属性的值。如果未另行指定value，则默认为字符串on。这在上面的值部分进行了演示。 required-
required属性是大多数<input>共有的属性。如果同一命名组中的任何单选按钮具有required属性，则必须选中该组中的一个单选按钮，尽管不必是应用了该属性的那个。
使用单选输入
我们上面已经介绍了单选按钮的基本知识。现在让我们看看您可能需要了解的其他常见与单选按钮相关的功能和技术。
默认选中单选按钮
要使单选按钮默认选中，您需要包含checked属性，如先前示例的此修订版本所示
<form>
<fieldset>
<legend>Please select your preferred contact method:</legend>
<div>
<input
type="radio"
id="contactChoice1"
name="contact"
value="email"
checked />
<label for="contactChoice1">Email</label>
<input type="radio" id="contactChoice2" name="contact" value="phone" />
<label for="contactChoice2">Phone</label>
<input type="radio" id="contactChoice3" name="contact" value="mail" />
<label for="contactChoice3">Mail</label>
</div>
<div>
<button type="submit">Submit</button>
</div>
</fieldset>
</form>
在这种情况下，第一个单选按钮现在默认选中。
注意：如果将checked属性放在多个单选按钮上，则后面的实例将覆盖前面的实例；也就是说，最后一个checked单选按钮将是选中的那个。这是因为一个组中只能选择一个单选按钮，并且每次将一个新单选按钮标记为选中时，用户代理都会自动取消选择其他单选按钮。
为您的单选按钮提供更大的点击区域
在以上示例中，您可能已经注意到，您可以通过单击其关联的<label>元素以及单选按钮本身来选择单选按钮。这是 HTML 表单标签的一个非常有用的功能，它使用户更容易点击他们想要的选项，尤其是在智能手机等小屏幕设备上。
除了可访问性之外，这是另一个在表单上正确设置<label>元素的充分理由。
验证
在设置了required属性的单选按钮或至少一个成员具有required设置的相同命名组的单选按钮的情况下，需要选中一个单选按钮才能使控件被视为有效。如果未选中任何单选按钮，则在验证期间，valueMissing属性的ValidityState对象将返回true，浏览器将要求用户选择一个选项。
样式化单选输入
以下示例显示了我们在整篇文章中看到的示例的更完整版本，其中包含一些额外的样式，并通过使用专门的元素建立了更好的语义。HTML 如下所示
<form>
<fieldset>
<legend>Please select your preferred contact method:</legend>
<div>
<input
type="radio"
id="contactChoice1"
name="contact"
value="email"
checked />
<label for="contactChoice1">Email</label>
<input type="radio" id="contactChoice2" name="contact" value="phone" />
<label for="contactChoice2">Phone</label>
<input type="radio" id="contactChoice3" name="contact" value="mail" />
<label for="contactChoice3">Mail</label>
</div>
<div>
<button type="submit">Submit</button>
</div>
</fieldset>
</form>
此示例中涉及的 CSS 稍微复杂一些
html {
font-family: sans-serif;
}
div:first-of-type {
display: flex;
align-items: flex-start;
margin-bottom: 5px;
}
label {
margin-right: 15px;
line-height: 32px;
}
input {
appearance: none;
border-radius: 50%;
width: 16px;
height: 16px;
border: 2px solid #999;
transition: 0.2s all linear;
margin-right: 5px;
position: relative;
top: 4px;
}
input:checked {
border: 6px solid black;
}
button,
legend {
color: white;
background-color: black;
padding: 5px 10px;
border-radius: 0;
border: 0;
font-size: 14px;
}
button:hover,
button:focus {
color: #999;
}
button:active {
background-color: white;
color: black;
outline: 1px solid black;
}
这里最值得注意的是appearance属性的使用（需要前缀才能支持某些浏览器）。默认情况下，单选按钮（和复选框）使用操作系统的本机样式来设置这些控件的样式。通过指定appearance: none，您可以完全删除本机样式，并为其创建自己的样式。在这里，我们使用了border以及border-radius和transition来创建一个漂亮的动画单选选择。还要注意如何使用:checked伪类来指定选中时单选按钮外观的样式。
注意：如果您希望使用appearance属性，则应非常仔细地对其进行测试。尽管它在大多数现代浏览器中都受支持，但其实现差异很大。在旧版浏览器中，即使是关键字none在不同的浏览器中也不具有相同的效用，并且某些浏览器根本不支持它。在最新的浏览器中，差异较小。
请注意，当单击单选按钮时，当两个按钮更改状态时，会出现一个漂亮的平滑淡出/淡入效果。此外，图例和提交按钮的样式和颜色已自定义，以具有强对比度。这可能不是您在真实 Web 应用程序中想要的风格，但它绝对展示了可能性。
技术摘要
规范
| 规范 |
|---|
| HTML 标准 # radio-button-state-(type=radio) |
浏览器兼容性
BCD 表格仅在启用 JavaScript 的浏览器中加载。
另请参阅
<input>和实现它的HTMLInputElement接口。RadioNodeList：描述单选按钮列表的接口- CSS 属性的兼容性