HTML input type radio 类型
功能介绍
<input> 的 radio 类型元素默认渲染为小型圆圈图表，填充即为激活，类似于之前描述额复选框（checkbox）类型。单选按钮允许你选择单一的值来提交表单。
它们被称为单选按钮，因为它们的外观和操作方式与老式无线电上的按钮类似，如下图所示。
注意：复选框类似于单选按钮，但是有个重要的区别 – 单选按钮为选择其中一项而设计，然而复选框允许你开启或关闭单个值。每个独立的单选按钮大致上是 Boolean 控件 – 是或不是。
值
A DOMString 表示单选按钮的值。它永远不会在客户端看到，但是在服务器上，这就是使用单选按钮 name 提交的数据的 value。查看以下示例：
定义单选按钮组节
通过使组中的每个单选按钮相同，可以定义单选组name。建立单选组后，选择该组中的任何单选按钮会自动取消选择同一组中当前选中的任何单选按钮。
您可以在页面上根据需要选择任意数量的广播组，只要每个广播组都有自己独特的即可 name。
例如，如果你的表单需要征求他们的首选联系方式的用户，您可以创建三个单选按钮，每一个与 name 属性设置为 contact 只有一个用value email，一用的价值 phone，和一个与价值 mail。用户永远不会看到 value 或 name （除非您明确添加代码来显示它）。
生成的HTML如下所示：
<form>
<p>Please select your preferred contact method:</p>
<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>
</form>
在这里，您将看到三个单选按钮，每个单选按钮都name 设置为 contact ，每个按钮都有 一个 value 唯一标识组中该单个单选按钮的唯一标识。它们每个都有一个唯一的id，<label>元素的for属性使用它来将标签与单选按钮相关联。
无线电组的数据表示
提交上述表单并选中单选按钮时，表单数据中将包含表单中的条目 。例如，如果用户单击“电话”单选按钮然后提交表单，则表单的数据将包含 。contact=valuecontact=phone
如果您省略value HTML中的 属性，则提交的表单数据会将值分配 on 给该组。在这种情况下，如果用户单击“电话”选项并提交了表单，则结果表单数据将为 contact=on，这无济于事。因此，不要忘记设置 value属性！
注意：如果在提交表单时未选择任何单选按钮，则由于没有要报告的值，因此单选组根本不包含在提交的表单数据中。
实际上不允许选择组中的任何单选按钮而提交表单的情况很少见，因此通常明智的做法是使用默认 checked 状态。请参阅下面的默认选择单选按钮。
让我们在示例中添加一些代码，以便我们检查此表单生成的数据。修改了HTML，添加了一个<pre>块以将表单数据输出到：
<form>
<p>Please select your preferred contact method:</p>
<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>
</form>
<pre id="log">
</pre>
然后，我们添加一些 JavaScript 来设置事件的事件监听器，该事件监听器在submit用户单击“提交”按钮时发送：
var form = document.querySelector("form");
var log = document.querySelector("#log");
form.addEventListener("submit", function(event) {
var data = new FormData(form);
var output = "";
for (const entry of data) {
output = entry[0] + "=" + entry[1] + "\r";
};
log.innerText = output;
event.preventDefault();
}, false);
尝试这个示例，看看该contact 小组的结果如何 。
其他属性
除了所有<input>元素共享的公共属性外， radio输入还支持以下属性：
| 属性 | 描述 |
|---|---|
| checked | 一个布尔值，指示此单选按钮是否是组中当前选中的项目 |
checked
一个布尔属性，如果存在，则指示此单选按钮是组中当前选中的按钮。
不像其他的浏览器，Firefox的默认情况下 持续动态检查状态 的 <input>整个页面加载。使用autocomplete属性控制此功能。
使用无线电输入
我们已经在上面介绍了单选按钮的基础知识。现在，让我们看一下您可能需要了解的其他与单选按钮相关的常见功能。
默认情况下选择单选按钮
要使默认情况下的单选按钮处于选中状态，您只需添加 checked 属性，如上一个示例的修订版所示：
<form>
<p>Please select your preferred contact method:</p>
<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>
</form>
在这种情况下，默认情况下现在选择第一个单选按钮。
注意：如果将 checked 属性放在多个单选按钮上，则以后的实例将覆盖以前的实例；否则，实例将被替换。也就是说，最后一个 checked 单选按钮将被选中。这是因为一次只能选择一个组中的一个单选按钮，并且每次将新按钮标记为已选中时，用户代理都会自动取消选择其他按钮。
为单选按钮提供更大的点击区域
在上面的示例中，您可能已经注意到，可以通过单击单选按钮的关联<label>元素以及单选按钮本身来选择单选按钮。
这是HTML表单标签的一项非常有用的功能，它使用户可以更轻松地单击所需的选项，尤其是在智能手机等小屏幕设备上。
除了可访问性之外，这是<label> 在表单上正确设置元素的另一个很好的理由 。
验证方式
单选按钮不参与约束验证；他们没有约束的真实价值。
设置收音机输入的样式
下面的示例显示了我们在整篇文章中看到的示例的稍微更全面的版本，带有一些其他样式，并通过使用特殊元素建立了更好的语义。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>
除了<fieldset>和<legend>元素外，这里没有太多新的说明要注意，这有助于以语义方式很好地对功能进行分组。
涉及的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 {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: 50%;
width: 16px;
height: 16px;
border: 2px solid #999;
transition: 0.2s all linear;
outline: none;
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;
}
这里最值得注意的是-moz-appearance属性的使用（带有支持某些浏览器所需的前缀）。默认情况下，单选按钮（和 复选框）使用这些控件的操作系统本机样式设置样式。通过指定 appearance: none，您可以完全删除本机样式，并为其创建自己的样式。在这里，我们使用了border，border-radius和transition来创建漂亮的动画单选。还要注意选择:checked伪类时如何使用伪类为单选按钮的外观指定样式。
兼容性说明：如果要使用该appearance属性，则应非常仔细地对其进行测试。尽管大多数现代浏览器都支持它，但是其实现方式却千差万别。在较旧的浏览器中，即使关键字 none 在不同的浏览器中也不具有相同的效果，有些甚至根本不支持它。在最新的浏览器中，差异较小。
请注意，单击单选按钮时，由于两个按钮更改了状态，因此具有很好的平滑淡入/淡出效果。此外，图例和提交按钮的样式和颜色是自定义的，以具有强烈的对比度。在实际的Web应用程序中，这可能不是您想要的外观，但肯定可以显示出这种可能性。
参考网站:https://developer.mozilla.org/zh/docs/web/html/element/input/radio
