HTML中的单选按钮

单选按钮是HTML表单中常用的一种输入控件，用于从一组选项中选择单个选项。在本文中，我们将介绍HTML中的单选按钮及其使用方法。

基本用法

单选按钮使用<input>元素来创建。属性type="radio"用于定义单选按钮类型。我们可以为单选按钮指定一个唯一的value属性值，以便在提交表单时检测哪个选项被选中了。下面是一个示例：

<form>
  <input type="radio" name="gender" value="male"> Male<br>
  <input type="radio" name="gender" value="female"> Female<br>
  <input type="radio" name="gender" value="other"> Other
</form>

在上面的示例中，我们使用了name属性来将单选按钮分组，使它们在同一选项列表中。这样做可以确保只选中一个选项。如果您不指定相同的name属性，则每个单选按钮被视为一个单独的组件。

预选选项

如果要在表单加载时预选某个选项，则可以添加checked属性。此属性将使单选按钮在加载时处于选中状态。下面是一个示例：

<form>
  <input type="radio" name="gender" value="male" checked> Male<br>
  <input type="radio" name="gender" value="female"> Female<br>
  <input type="radio" name="gender" value="other"> Other
</form>

在上面的示例中，“男性”选项被预选中。

CSS样式

通过CSS样式，我们可以对单选按钮进行样式化。如果您想改变单选按钮的外观，可以对<input>元素及其相关<label>元素应用样式。下面是一个示例：

<style>
  input[type="radio"] {
    transform: scale(1.2); /* 放大单选按钮 */
  }
  input[type="radio"]:checked + label {
    font-weight: bold; /* 选中的选项加粗 */
  }
</style>

<form>
  <input type="radio" id="male" name="gender" value="male">
  <label for="male">Male</label><br>

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

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

在上面的示例中，我们使用了transform属性和:checked伪类来改变单选按钮的大小和选中的选项的样式。我们还使用了<label>元素来使文本相关联，并且使用了for属性来与单选按钮关联。

结论

单选按钮是HTML表单中常用的输入控件之一。通过将每个单选按钮分组，并使用相同的name属性，可以确保只选中一个选项。可以使用checked属性为预选选项指定单选按钮。最后，通过CSS样式可以改变单选按钮的外观，使其更适应您的应用程序。