如何创建HTML单选按钮？

介绍

单选按钮是HTML表单中最常见的元素之一。它们在页面上显示为圆形按钮，用户可以在它们之间进行选择。单选按钮通常与元素一起使用，以提供与按钮相关联的文本。在本文中，我们将讨论如何使用HTML和CSS创建单选按钮。

HTML代码

在HTML中，我们使用元素来创建单选按钮。以下是一个基本的单选按钮的HTML代码：

<label>
  <input type="radio" name="gender" value="male"> Male
</label>
<label>
  <input type="radio" name="gender" value="female"> Female
</label>

在上面的代码中，我们使用元素将文本与每个单选按钮相关联。我们使用type="radio"属性来指定这是一个单选按钮。我们还使用name属性来指定按钮组的名称，这将确保用户只能选择一个选项。最后，我们使用value属性来指定每个按钮的值。

样式

单选按钮的外观可以使用CSS进行自定义。以下是一个基本的CSS样式，可以用于自定义单选按钮的外观：

input[type=radio] {
  margin-right: 10px;
}
input[type=radio]:before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 5px;
  border-radius: 50%;
  border: 2px solid #ccc;
  vertical-align: middle;
}
input[type=radio]:checked:before {
  content: "\2713";
  text-align: center;
  line-height: 16px;
  font-size: 14px;
  color: #fff;
  background-color: #007bff;
}

在上面的代码中，我们使用:before伪类来添加一个圆形的外观。我们使用border-radius属性来设置圆角，使用border属性来设置边框。我们还使用:checked伪类来设置选中的单选按钮的样式。

总结

单选按钮是HTML表单中不可或缺的一部分。使用HTML和CSS，我们可以轻松地创建自定义的单选按钮。在构建表单时，确保使用相同的名称属性来组合单选按钮，以确保用户只能选择一个选项。