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

Subodh Poudel 2023年2月19日 2022年6月15日
在 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 中的一個表單中新增兩組單選按鈕。

Subodh Poudel avatar Subodh Poudel avatar

Subodh is a proactive software engineer, specialized in fintech industry and a writer who loves to express his software development learnings and set of skills through blogs and articles.

LinkedIn