在 HTML 中新增多個單選按鈕組

在本文中，我們將介紹一種在 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 中的一個表單中新增兩組單選按鈕。