单选按钮 - HTML

在HTML中，单选按钮（Radio Buttons）是一种用于选择单个选项的控件。该控件通常与表单（Form）一起使用，用于收集来自用户的输入数据。单选按钮通常用于多个互斥选项之间进行选择，因为同一组单选按钮中只能选择一个选项。

创建单选按钮

对于每个单选按钮，需要指定name和value属性。name属性用于指定单选按钮的分组，value属性则是单选按钮被选中后发送到服务器的值。使用HTML的radio元素来创建单选按钮，如下所示：

<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

这将创建三个单选按钮，分别表示男性、女性和其他。这三个单选按钮具有相同的name属性，这意味着它们是同一组单选按钮。仅可以选择一个选项。

标签与控件

将标签（Label）与单选按钮关联在一起有助于提高表单的可访问性（Accessibility）。这可以通过为每个单选按钮创建一个相关联的标签实现。为了实现这个目标，我们可以使用HTML的label元素来将标签与单选按钮关联。如下所示：

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

在上面的示例中，每个单选按钮周围都有一个label元素。这样，单选按钮的标签就与控件本身相关联了。单击标签可能会选中相应的单选按钮。

默认选项

我们可以使用HTML checked 属性来设置默认选项。如果为某个单选按钮设置了checked属性，则该按钮将被选中。例如，如果我们想将男性设置为默认选项，则可以将某个单选按钮的checked属性设置为true，如下所示：

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

总结

单选按钮是一种常见的HTML表单控件，用于多个互斥选项之间进行选择。单选按钮使用HTML的radio元素创建，并使用name和value属性指定控件的分组和值。使用label元素可以将单选按钮的标签与控件关联起来，从而提高表单的可访问性。checked属性可以用于将某个单选按钮设置为默认选项。