HTML 单选按钮是一种输入控件，用于方便用户从一组选项中选择一个。单选按钮通常用于收集用户唯一项信息（如性别）。
HTML 单选按钮语法
在 HTML 中，单选按钮也是使用 input 标签来实现的，其 type 属性取值为 "radio"。
语法：
<input type="radio" name="组名" value="值">说明：
对于单选按钮来说，它常用的属性如下表所示。
| 属性 | 说明 |
|---|---|
| name | 单选按钮所在的组名 |
| value | 单选按钮的值 |
| checked | 设置单选按钮的初始选中状态，默认值为 false |
| disabled | 设置单选按钮是否 “禁用” |
单选按钮是没有 readonly 属性的，如果想要禁止用户修改，我们只能使用 disabled。
提示: 单选按钮只能从一组选项中选择一个，而复选框可以从一组选项中选择多个。
示例 1：HTML 创建单选按钮
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form method="post" action="/">
性别:
<input type="radio" name="gender" value="男">男
<input type="radio" name="gender" value="女">女
</form>
</body>
</html>页面效果如下图所示。
分析：
我们可以发现，对于这一组单选按钮，只能选中其中一项，而不能同时选中两项。这就是所谓的 “单选按钮” 嘛。
可能小伙伴会问：“如果想要在默认情况下，让第一个单选按钮选中，该怎么做呢？” 此时可以使用 checked 属性来实现。
示例 2：单选按钮的 checked 属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form method="post" action="/">
性别:
<input type="radio" name="gender" value="男" checked>男
<input type="radio" name="gender" value="女">女
</form>
</body>
</html>页面效果如下图所示：
分析：
我们可能看到 checked 属性没有属性值，其实这是 HTML5 的最新写法。下面 2 种方式是等价的，推荐简写形式。
<!--简写形式-->
<input type="radio" name="gender" value="男" checked>男
<!--完整形式-->
<input type="radio" name="gender" value="男" checked="true">男实际上，checked、disabled、readonly 这 3 个属性都有这样的简写形式。
HTML 单选按钮的 “忽略点”
接下来，我们来深入了解一下单选按钮容易忽略的地方，主要包括以下 2点。
1. 必须要使用 name 属性
很多初学小伙伴没有深入了解单选按钮，经常会忘记给它加上 name 属性，或者对于 name 属性随便写就算了。接下来，我们详细讲解一下单选按钮常见的忽略点。
示例 3：单选按钮没有加上 name 属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form method="post" action="/">
性别:
<input type="radio" value="男">男
<input type="radio" value="女">女
</form>
</body>
</html>页面效果如下图所示。
分析：
没有加上 name 属性，页面效果好像没有变化。但当我们选取的时候，会发现居然可以同时选中 2 个选项，如下图所示。
这就跟预期效果完全不符合了，因此我们必须要加上 name 属性。有小伙伴就会问了： “在同一组单选按钮中，name 属性取值能否不一样的呢？” 下面来看一个例子。
示例 4：单选按钮的 name 取值不一样
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form method="post" action="/">
性别:
<input type="radio" name="gender1" value="男">男
<input type="radio" name="gender2" value="女">女
</form>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，我们会发现两个选项依然是可以被同时选取。因此在实际开发中，对于同一组的单选按钮，必须要设置一个相同的 name，这样才会把这些选项归为同一个组上面。对于这一点，我们再举一个复杂点的例子，小伙伴们就会明白了。
示例 5：正确的单选按钮写法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form method="post" action="/">
性别:
<input type="radio" name="gender" value="男">男
<input type="radio" name="gender" value="女">女<br>
年龄:
<input type="radio" name="age" value="80后">80后
<input type="radio" name="age" value="90后">90后
<input type="radio" name="age" value="00后">00后
</form>
</body>
</html>页面效果如下图所示。
分析：
上面定义了两组单选按钮，在每一组中，选项之间都是互斥的。也就是说，在同一组中，只能选中其中一项。
2. 应该配合 label 标签
在上面的例子中，如果我们想要选中 “男” 这一项，此时必须精准地用鼠标点击那个小圆圈才能选中，这种用户体验是非常差的，尤其是在手机端。
如果想要解决这个问题，标准写法是配合 label 标签，让用户点击文字也能选中该单选按钮。
<!--不推荐-->
<input type="radio" name="gender" value="男">男
<input type="radio" name="gender" value="女">女
<!--推荐-->
<label><input type="radio" name="gender" value="男">男</label>
<label><input type="radio" name="gender" value="女">女</label>示例 6：单选按钮结合 label 标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form method="post" action="/">
<p>
性别:
<label>
<input type="radio" name="gender" value="男">男
</label>
<label>
<input type="radio" name="gender" value="女">女
</label>
</p>
<p>
年龄:
<label>
<input type="radio" name="age" value="80后">80后
</label>
<label>
<input type="radio" name="age" value="90后">90后
</label>
<label>
<input type="radio" name="age" value="00后">00后
</label>
</p>
</form>
</body>
</html>页面效果如下图所示。
分析：
使用了 label 标签之后，我们即使不点击单选按钮，而是点击它后面的文本，也能选中该单选按钮。
常见问题
1. 对于单选按钮，加上 value 与没加上好像没啥区别啊？为啥还加上呢？
一般情况下，value 属性取值跟后面的文本是相同的。之所以加上 value 属性，是为了方便 JavaScript 或者服务器操作数据用的。实际上，所有表单元素的 value 属性的作用都是一样的。
