HTMLでの2つのラジオボタンの追加方法について


方法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つのラジオボタンを追加する方法の例です。