方法1: 単純なラジオボタン 最も基本的な方法は、単純なラジオボタンを使用する方法です。
<input type="radio" name="option" value="option1"> オプション1
<input type="radio" name="option" value="option2"> オプション2
上記のコードでは、name
属性が同じであるため、オプション1とオプション2の間で選択を切り替えることができます。
方法2: ラベルとともにラジオボタン ユーザーフレンドリーな方法として、ラジオボタンにラベルを追加することができます。
<label>
<input type="radio" name="option" value="option1"> オプション1
</label>
<label>
<input type="radio" name="option" value="option2"> オプション2
</label>
上記のコードでは、ラジオボタンがラベルタグ内に包まれており、ユーザーはテキストをクリックして選択することができます。
方法3: デフォルト選択
ラジオボタンをデフォルトで選択したい場合は、checked
属性を使用します。
<label>
<input type="radio" name="option" value="option1" checked> オプション1
</label>
<label>
<input type="radio" name="option" value="option2"> オプション2
</label>
上記のコードでは、オプション1がデフォルトで選択されます。
これらは基本的な方法ですが、さまざまなオプションやスタイルがあります。また、JavaScriptを使用して動的なラジオボタンの操作も可能です。
以上が、HTMLで2つのラジオボタンを追加する方法の例です。