HTML ラジオボタングループの作成方法


  1. 単独のラジオボタン: 最も基本的な形式のラジオボタンは、次のようになります。
<input type="radio" name="group1" value="option1"> オプション1
<input type="radio" name="group1" value="option2"> オプション2
<input type="radio" name="group1" value="option3"> オプション3

上記のコードでは、name属性が同じであることに注目してください。これにより、これらのボタンが同じグループに属していることが示されます。ユーザーはこれらのオプションから1つだけを選択できます。

  1. 複数のラジオボタングループ: 複数のラジオボタングループを作成する場合は、name属性を異なる値に設定する必要があります。以下は、2つの異なるグループを作成する例です。
<input type="radio" name="group1" value="option1"> グループ1 オプション1
<input type="radio" name="group1" value="option2"> グループ1 オプション2
<br>
<input type="radio" name="group2" value="option1"> グループ2 オプション1
<input type="radio" name="group2" value="option2"> グループ2 オプション2

上記のコードでは、2つの異なるグループを作成しています。各グループは、異なるname属性値を持っています。

これらはHTMLでラジオボタングループを作成する2つの基本的な方法です。ラジオボタンは、フォームの一部として使用されることが多く、ユーザーが選択肢を選ぶための便利な方法です。必要に応じて、これらのコード例をカスタマイズして使用することができます。