HTML で複数のラジオボタングループを追加する

この記事では、複数のグループのラジオボタンを 1つのフォームに HTML で追加する方法を紹介します。

HTML のラジオボタンのさまざまなグループの name 属性にさまざまな値を使用する

HTML でラジオボタンを操作しているときに、1つのフォームで複数のグループのラジオボタンを使用する必要がある場合があります。このような場合、グループのラジオボタンを選択すると、他のグループのラジオボタンの選択が解除される場合があります。

この問題を解決するには、2つのグループのボタン要素の name 属性の値が異なっている必要があります。これは、ラジオボタンの最初のグループでは、すべてのラジオボタンの name 属性に同じ値を使用する必要があることを意味します。

2 番目のグループの場合、name 属性の値は最初のグループとは異なる必要がありますが、2 番目のグループのすべてのラジオボタンは同じ値である必要があります。

fieldset 要素を使用して、2つのグループを視覚的に分離することもできます。 <fieldset> タグは、HTML の関連要素をグループ化します。

以下の例では、2つのグループのラジオボタンを作成します。最初のグループでは、ユーザーはオートバイを選択でき、2 番目のグループでは車を選択できます。

たとえば、<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>

したがって、ラジオボタンの 2つのグループから各オートバイと車を選択できます。fieldset 要素は、各グループの周囲に境界線を作成します。

このようにして、HTML の 1つのフォームに 2つのグループのラジオボタンを追加できます。