HTML单选按钮的编写是Web页面开发中一个非常基础且重要的部分，单选按钮允许用户在一组选项中选择一个，并且只能选择一个，它通常用在需要用户做出单一选择的场景，比如性别选择、喜好选择等。
HTML单选按钮基础
HTML中的单选按钮使用<input>元素创建，并设置其type属性为radio，每个单选按钮都需要一个唯一的name属性值，这样浏览器才知道哪些单选按钮属于同一组。
基本语法
<input type="radio" name="groupName" value="optionValue">
type="radio"声明这是一个单选按钮。
name="groupName"定义了单选按钮的名称，同一组单选按钮该名称必须相同。
value="optionValue"定义了选项的值，当表单提交时，选中的单选按钮的值会被发送。
示例代码
<form action="/submit-survey" method="post">
<label>
<input type="radio" name="gender" value="male"> 男
</label>
<label>
<input type="radio" name="gender" value="female"> 女
</label>
<input type="submit" value="提交">
</form>
在上面的示例中，我们有两个单选按钮，它们的名称都是gender，这意味着它们是一组，用户只能选择其中的一个。
美化单选按钮
默认情况下，单选按钮是圆形的小点，可能不够醒目或不符合网站的整体风格，开发者常常需要对单选按钮进行美化。
使用CSS自定义样式
通过CSS，我们可以改变单选按钮的大小、颜色、背景等样式。
input[type=radio] {
accent-color: red; /* 改变高亮颜色 */
}
或者，你可以使用更复杂的CSS技巧来完全自定义单选按钮的外观：
<label class="radio-container">
<input type="radio" name="customRadio">
<span class="checkmark"></span> 自定义样式
</label>
.radio-container {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.radio-container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: ccc;
border-radius: 50%;
}
.radio-container:hover input ~ .checkmark {
background-color: ccc;
}
.radio-container input:checked ~ .checkmark {
background-color: 2196F3;
}
.checkmark:after {
content: "";
position: absolute;
display: none;
}
.radio-container input:checked ~ .checkmark:after {
display: block;
}
.radio-container .checkmark:after {
top: 9px;
left: 9px;
width: 8px;
height: 8px;
border-radius: 50%;
background: white;
}
上述CSS代码实现了自定义的单选按钮外观，包括自定义的图标和颜色。
JavaScript交互
有时，你可能需要使用JavaScript来控制单选按钮的行为，你可能想要在用户选择某个选项后显示或隐藏某些内容。
document.querySelector('input[name="gender"]').addEventListener('change', function() {
if (this.value === 'male') {
// 执行一些操作，比如显示男性专有的内容区域
} else {
// 执行其他操作，比如显示女性专有的内容区域
}
});
相关问题与解答
Q1: HTML中的单选按钮和复选框有什么区别？
A1: HTML中的单选按钮(<input type="radio">)用于从一组选项中选择一个，而复选框(<input type="checkbox">)允许用户选择多个选项，单选按钮通常成组出现，而复选框则可以单独使用。
Q2: 如何确保HTML表单提交时，单选按钮组中至少有一个选项被选中？
A2: 可以通过JavaScript在表单提交前检查单选按钮组是否有选项被选中，如果没有，可以阻止表单提交，并提示用户选择一个选项，在服务器端也应该验证提交的数据，确保收到了有效的单选按钮值。
