单选按钮 HTML

HTML单选按钮（Radio Buttons）在表单设计中扮演着重要的角色。单选按钮提供了多个选项，但允许用户仅选择其中一个选项。它们经常与表单一起使用，以收集必填信息或将数据分类。在本文中，我们将学习如何在HTML中创建单选按钮。

HTML单选按钮语法

HTML单选按钮由<input>元素创建，具有type属性为“radio”，name属性为单选按钮组的名称以及value属性为该特定单选按钮的值。以下是单选按钮的示例：

<input type="radio" name="gender" value="Male"> Male
<input type="radio" name="gender" value="Female"> Female

在上面的示例中，我们创建了两个单选按钮用于选择性别。这两个单选按钮属于同一个组，因为它们的name属性相同。当用户单击其中一个单选按钮时，其他单选按钮将自动取消选择。选中单选按钮的值可以通过表单提交，以保存用户输入。

HTML单选按钮的默认选中状态

可以通过在单选按钮的checked属性中设置“checked”来定义单选按钮的默认选中状态。以下示例将第一个单选按钮“Male”设置为默认选中状态：

<input type="radio" name="gender" value="Male" checked> Male
<input type="radio" name="gender" value="Female"> Female

HTML单选按钮的标签

为给单选按钮添加标签（Label），可以将标签放在单选按钮之后，也可以将标签框在单选按钮周围。以下是单选按钮带标签的示例：

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

上面的示例中，每个单选按钮都被包裹在<label>元素中。<label>元素可通过单击与其相关的单选按钮来触发，这意味着用户不需要单击单选按钮本身。

HTML单选按钮的禁用状态

单选按钮可以禁用，以防止用户选择它。这可以通过disabled属性轻松实现。以下是禁用的单选按钮示例：

<input type="radio" name="gender" value="Male" disabled> Male
<input type="radio" name="gender" value="Female" disabled> Female

在上面的示例中，两个单选按钮都被禁用了，因此用户无法选择选项。

HTML单选按钮的样式

可以使用CSS样式自定义单选按钮的外观。以下CSS样式将更改单选按钮的大小和颜色：

input[type="radio"] {
  height: 20px;
  width: 20px;
  background-color: #fff;
  border-radius: 50%;
  border: 2px solid #555;
  vertical-align: middle;
}

此样式将单选按钮的高度和宽度设置为20像素，并将背景色设置为白色。它还使单选按钮具有圆形形状，并使用border属性添加细黑线作为边框。

结论

单选按钮是表单设计中必不可少的工具。它们使用户能够在多个选项中进行选择，并使数据分类更加简单。在本文中，我们学习了HTML单选按钮的语法、默认选中状态、标签、禁用状态和样式。掌握这些时，您将能够使用单选按钮来开发优秀的表单。