★HTML Living Standard リファレンス

<input type=radio> …… ラジオボタンの入力欄を表す

<input type=radio>は、ラジオボタンの入力欄を表す際に使用します。

input要素のtype属性の値に radio を指定すると、
input要素はラジオボタングループのなかの1つだけがチェックされている状態（true）
に設定できるコントロールを表します。

複数のinput type=radioを使用してラジオボタングループを作成するには、
name属性を同じ値にして、input要素を同じツリー内に配置します。
ラジオボタンの1つをtrueにした場合、グループ内の他のラジオボタンはfalseになります。

■属性

■使用例

以下のサンプルは、input type=radioを使用して3つの選択肢から1つを選択するコントロールを作成しています。
最初のinput要素にはchecked属性を指定して、初期状態でチェックを付けています。

<fieldset>
 <legend><h2>ご希望の連絡方法</h2></legend>
 <p><label><input type=radio name=contact_pref checked> 電話</label></p>
 <p><label><input type=radio name=contact_pref> 手紙</label></p>
 <p><label><input type=radio name=contact_pref> メール</label></p>
</fieldset>

■使用例

以下のサンプルは、ピザの注文画面を想定しています。
ラジオボタンとチェックボックスの違いは、
複数の選択肢から1つを選択するか、
複数の選択肢から複数を選択するかの違いです。

<form method="post" enctype="application/x-www-form-urlencoded" action="order.cgi">
 <p><label>お名前: <input name="custname"></label></p>
 <p><label>電話番号: <input type=tel name="custtel"></label></p>
 <p><label>メール: <input type=email name="custemail"></label></p>
 <fieldset>
  <legend>ピザのサイズ</legend>
  <p><label><input type=radio name=size value="small">Small</label></p>
  <p><label><input type=radio name=size value="medium">Medium</label></p>
  <p><label><input type=radio name=size value="large">Large</label></p>
 </fieldset>
 <fieldset>
  <legend>ピザのトッピング</legend>
  <p><label><input type=checkbox name="topping" value="bacon">ベーコン</label></p>
  <p><label><input type=checkbox name="topping" value="cheese">チーズ</label></p>
  <p><label><input type=checkbox name="topping" value="onion">オニオン</label></p>
  <p><label><input type=checkbox name="topping" value="mushroom">マッシュルーム</label></p>
 </fieldset>
 <p><label>希望配達時間: <input type=time min="11:00" max="21:00" step="900" name="delivery"></label></p>
 <p><label>ご希望など: <textarea name="comments"></textarea></label></p>
 <p><button>上記内容で注文する</button></p>
</form>

初期状態でいずれかにチェックを付けておくのが望ましい

初期状態でチェックの付いたボタンを持たないラジオボタングループは作成可能ですが、使用しないことが推奨されています。
初期状態でいずれにもチェックが付いていないラジオボタングループは、
一般的にはユーザーインターフェイスとして不十分と考えられています。

input要素の終了タグについて

HTMLの仕様では、input要素には終了タグ</input>はありません。

■関連項目