input type="radio"

<input type="radio">

<input>类型的元素radio通常用在组中 - 用于描述一组相关选项的单选按钮的集合。一个给定组中只能有一个单选按钮同时被选中。单选按钮通常呈现为小圆圈，选中时会填充或突出显示。

它们被称为单选按钮，因为它们的外观和操作方式类似于老式收音机上的按钮（请参阅本文中的图像以供参考）。

<input id="radioButton" type="radio">

注意：复选框类似于单选按钮，但有一个重要的区别：单选按钮用于从一组中选择一个值，而复选框允许您打开和关闭各个值。在存在多个控件的情况下，单选按钮允许从其中选择一个，而复选框允许选择多个值。

值	代表单选按钮的值的DOMString。
活动	改变和输入
支持的通用属性	检查
IDL属性	检查和价值
方法	选择（）

值

该value属性是一个DOMString包含单选按钮的值。用户代理从不向用户显示该值。相反，它用于识别组中哪个单选按钮被选中。

<form>
Please specify your gender:
  <div>
    <input type="radio" id="genderChoice1"
     name="gender" value="male">
    <label for="genderChoice1">Male</label>

    <input type="radio" id="genderChoice2"
     name="gender" value="female">
    <label for="genderChoice2">Female</label>

    <input type="radio" id="genderChoice3"
     name="gender" value="other">
    <label for="genderChoice3">Other</label>

    <input type="radio" id="genderChoice4"
     name="gender" value="notSpecified">
    <label for="genderChoice4">Prefer not to specify</label>
  </div>
  <div>
    <button type="submit">Submit</button>
  </div>
</form>

在这里，您可以看到三个单选按钮，每个按钮的name设置"contact"都是唯一的value，唯一标识该组中的单个单选按钮。它们也都有一个唯一id的<label>元素for属性用于将标签与单选按钮相关联。

如果该value属性被省略，则提交的数据将被赋予默认值on，所以在这种情况下提交的数据将是gender=on。这没有多大意义，所以记得设置你的value属性！

注意：如果提交表单时没有选中单选按钮，则没有值提交给服务器来表示未选中的状态（例如value=unselected）。该值根本不提交给服务器。

“name”设置是单选按钮的重要属性，因为它标识单选按钮属于哪个组。由于单选按钮组合起来作为一个单一的单位一起工作，你必须为所有相关的单选按钮指定一个通用名称。当两个或多个单选按钮共用一个名称时，选择其中一个按钮将取消选择所有其他名称相同的按钮。如果您在单个页面上有多个单选按钮组，则不同组中的按钮必须具有不同的“名称”属性。

使用单选按钮

我们已经介绍了上面单选按钮的基本原理。现在我们来看看您可能需要了解的其他常见的单选按钮相关功能和技巧。

默认选择一个单选按钮

要使默认情况下选中一个单选按钮，只需包含checked属性，如前面示例的修订版本所示：

<form> Please specify your gender:
  <div>
    <input type="radio" id="genderChoice1"
     name="gender" value="male">
    <label for="genderChoice1">Male</label>
    <input type="radio" id="genderChoice2"
     name="gender" value="female">
    <label for="genderChoice2">Female</label>
    <input type="radio" id="genderChoice3"
     name="gender" value="other">
    <label for="genderChoice3">Other</label>
    <input type="radio" id="genderChoice4"
     name="gender" value="notSpecified" checked>
    <label for="genderChoice4">Prefer not to specify</label>
  </div>
  <div>
    <button type="submit">Submit</button>
  </div>
</form>

在这种情况下，第一个单选按钮现在默认选中。

注意：如果您将该checked属性放在多个单选按钮上，以后的实例将覆盖较早的实例;也就是说，最后一个checked单选按钮将被选中。这是因为一次只能选择一个组中的一个单选按钮，并且用户代理每当新的标记被选中时就自动取消选择其他单选按钮。

为您的单选按钮提供更大的击中区域

在上面的示例中，您可能已经注意到，您可以通过单击其关联的<label>元素以及单选按钮本身来选择一个单选按钮。这是HTML表单标签的一个非常有用的功能，可以让用户更容易点击他们想要的选项，特别是在智能手机等小屏幕设备上。

除了可访问性，这是<label>在表单上正确设置元素的另一个很好的理由。

验证

单选按钮不参与约束验证;他们没有真正的价值被约束。

示例

下面的例子显示了我们在整篇文章中看到的一个稍微更彻底的例子，其中有一些额外的样式，并且通过使用专门的元素建立了更好的语义。HTML看起来像这样：

<form>
  <fieldset>
  <legend>Please specify your gender</legend>
    <div>
      <input type="radio" id="genderChoice1"
       name="gender" value="male">
      <label for="genderChoice1">Male</label>
      <input type="radio" id="genderChoice2"
       name="gender" value="female">
      <label for="genderChoice2">Female</label>
      <input type="radio" id="genderChoice3"
       name="gender" value="other">
      <label for="genderChoice3">Other</label>
      <input type="radio" id="genderChoice4"
       name="gender" value="notSpecified" checked>
      <label for="genderChoice4">Prefer not to specify</label>
    </div>
    <div>
      <button>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;
}

这里最值得注意的是该appearance属性的使用（需要支持某些浏览器的前缀）。默认情况下，单选按钮（和复选框）的样式与操作系统的原生样式为这些控件。通过指定appearance: none，您可以完全删除本地样式，并为它们创建自己的样式。这里我们使用一个border沿border-radius和transition创建一个漂亮的动画无线电选择。还要注意如何选择:checked伪类来指定单选按钮外观的样式。

这不是没有问题的：appearance对于简单的样式来说不是太糟糕，但是它在某些浏览器中往往表现不一致，在Internet Explorer中根本不起作用。仔细测试以确保您的网站在您想要用户或客户的每个浏览器中都能正常工作。

规范

规范	状态
HTML生活标准在该规范中定义'<input type ='radio'>''。	生活水平
HTML5该规范中的<input type =“radio”>“的定义。	建议

浏览器兼容性

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	(Yes)	(Yes)	(Yes)	(Yes)	(Yes)

Feature	Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	(Yes)	4.0 (2.0)	(Yes)	(Yes)	(Yes)