HTML 预选单选按钮 - Html

HTML预选单选按钮是一种可以让用户从多个选项中选择一个的控件。每个选项由一个圆形的按钮和相关的文本标签组成。

使用方法

我们可以使用“input”标签来创建预选单选按钮。我们需要给每个按钮指定一个“type”属性，并将其设置为“radio”。同时，我们还需要给每个按钮设置一个“name”属性，这样它们就可以组合成一个单选按钮列表。

例如，以下代码可以创建一个包含三个选项的单选按钮列表：

<form>
  <input type="radio" name="option" value="option1" id="option1">
  <label for="option1">Option 1</label>

  <input type="radio" name="option" value="option2" id="option2">
  <label for="option2">Option 2</label>

  <input type="radio" name="option" value="option3" id="option3">
  <label for="option3">Option 3</label>
</form>

在上面的代码中，每个单选按钮都具有相同的名称，即“option”，这意味着用户只能选择其中的一个选项。其中，“id”属性用于将标签与相应的单选按钮关联起来，而“value”属性指定了选项的值。

如何设置默认选项

我们可以在单选按钮中添加“checked”属性来指定默认选项。例如，以下代码将第一个选项设置为默认选项：

<form>
  <input type="radio" name="option" value="option1" id="option1" checked>
  <label for="option1">Option 1</label>

  <input type="radio" name="option" value="option2" id="option2">
  <label for="option2">Option 2</label>

  <input type="radio" name="option" value="option3" id="option3">
  <label for="option3">Option 3</label>
</form>

总结

HTML预选单选按钮是一种非常有用的控件，可以让用户从多个选项中选择一个。我们可以使用“input”标签来创建这些按钮，并使用“name”属性将它们组合为一个单选按钮列表。同时，我们还可以使用“checked”属性来设置默认选项。