迹忆客 专注技术分享

在本文中，我们将介绍一种在 HTML 中以一个表单添加多组单选按钮的方法。

在 HTML 中为不同组的单选按钮使用不同的 name 属性值

在 HTML 中使用单选按钮时，有时你可能需要在一个表单中使用多组单选按钮。在这种情况下，选择一个组的单选按钮可能会取消选择另一个组的单选按钮。

为了消除这个问题，两个组的按钮元素中的 name 属性的值必须不同。这意味着对于第一组单选按钮，我们应该对所有单选按钮的 name 属性使用相同的值。

对于第二组，name 属性的值应与第一组不同，但第二组中的所有单选按钮应具有相同的值。

我们还可以使用 fieldset 元素在视觉上分隔两个组。 <fieldset> 标签对 HTML 中的相关元素进行分组。

在下面的示例中，我们将创建两组单选按钮。在第一组中，用户将能够选择摩托车，在第二组中，他们将能够选择汽车。

例如，使用 <form> 标签创建一个表单。然后，为摩托车单选按钮组使用 <fieldset> 标签。

为 Honda 创建一个单选按钮并为 name 属性设置值 motorcycle。接下来，为 Yamaha 创建另一个单选按钮，并再次将 name 属性的值设置为 motorcycle。

关闭 <fieldset> 标记后，为汽车单选按钮创建另一个 fieldset 元素。在车上，为现代和丰田创建单选按钮。

将两个按钮的 name 属性值设置为 car。代码示例如下所示。

<form>
  Select a Motorcyle
  <fieldset id="motorcyle">
    <input type="radio" value="Honda" name="motorcycle">
    <label for="Honda">Honda</label><br>
    <input type="radio" value="Yamaha" name="motorcycle">
    <label for="Yamaha">Yamaha</label><br>
  </fieldset><br>

  Select a Car
  <fieldset id="car">
    <input type="radio" value="Hyundai" name="car">
    <label for="hyundai">Hyundai</label><br>
    <input type="radio" value="Toyota" name="car">
    <label for="toyota">Toyota</label><br>
  </fieldset>
</form>

因此，我们可以从两组单选按钮中选择每辆摩托车和汽车。fieldset 元素在每个组周围创建一个边框。

这样，我们可以在 HTML 中的一个表单中添加两组单选按钮。