- 単独のラジオボタン: 最も基本的な形式のラジオボタンは、次のようになります。
<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つだけを選択できます。
- 複数のラジオボタングループ:
複数のラジオボタングループを作成する場合は、
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つの基本的な方法です。ラジオボタンは、フォームの一部として使用されることが多く、ユーザーが選択肢を選ぶための便利な方法です。必要に応じて、これらのコード例をカスタマイズして使用することができます。