HTML ラジオボタン

JPKODA 編集部 May 6, 2026

ラジオボタン（Radio Buttons）は、ユーザーに対して相互排他的な（一つしか選べない）選択肢のセットを提示するために使用されます。

複数の項目を選択できるチェックボックスとは異なり、ラジオボタンは提供されたリストの中からユーザーが選択できる項目を一つだけに制限します。これにより、支払い方法の選択、性別の選択、あるいは多肢選択問題（クイズ）への回答など、単一かつ明確な選択が必要なシナリオに最適です。

1. ラジオボタンの理解

ラジオボタンは、<input> 要素の type 属性を "radio" に設定することで作成されます。

ラジオボタンをグループ化し、一度に一つしか選択できないようにする鍵は name 属性にあります。同じ name 属性を共有するラジオボタンは同一のグループに属し、ブラウザはそのグループ内での単一選択（ラジオ動作）を自動的に強制します。

1.1 name 属性：グループ化の定義（核心コンセプト）

name 属性は、ラジオボタンの機能において極めて重要です。これは各ボタンを論理的に接続し、それらが同一の選択肢セットに属していることをブラウザに伝えます。

共通の name がないと、各ラジオボタンは独立して動作してしまい、ユーザーが複数のオプションを同時に選択できるようになります。これはラジオボタンの本来の目的に反します。

1.2 正しい実装例：

<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>

<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>

<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>

この例では、3つのボタンすべての name が "fav_language" です。これにより、ブラウザはこれらが「お気に入りの言語」に関する異なる選択肢であり、一つしか選べないことを認識します。

1.3 誤った実装例：

<input type="radio" id="html" name="fav_language1" value="HTML">
<label for="html">HTML</label><br>

<input type="radio" id="css" name="fav_language2" value="CSS">
<label for="css">CSS</label><br>

ここでは各ボタンが異なる name 値を持っています。結果として、ブラウザはこれらを独立したオプションとして扱い、ユーザーが両方とも選択できてしまいます。

1.4 value 属性：選択されたオプションの表現

value 属性は、フォームが送信され、そのラジオボタンが選択されているときにサーバーへ送信されるデータを指定します。

各ラジオボタンに意味のある value を設定することは非常に重要です。なぜなら、それがサーバー側でユーザーの選択を識別するための唯一の手がかりだからです。

例の解析：
前述の正しい例において、ユーザーが "HTML" を選択してフォームを送信した場合、サーバーは fav_language=HTML というデータを受信します。

1.5 id と for 属性：アクセシビリティの向上

ラジオボタンの動作自体には厳密には必須ではありませんが、id と for 属性はアクセシビリティ（Accessibility）において不可欠です。

id: 各ラジオボタンに一意の識別子を提供します。
for: <label> 要素で使用し、ラベルと対応するラジオボタンを関連付けます。

この関連付けにより、ユーザーは小さなボタン本体ではなく、テキストラベルをクリックするだけでボタンを選択できるようになります。これはユーザビリティを劇的に向上させ（特にモバイルデバイスにおいて）、スクリーンリーダーがボタンにフォーカスした際にラベルテキストを読み上げるのにも役立ちます。

<input type="radio" id="yes" name="newsletter" value="yes">
<label for="yes">はい、ニュースレターを購読します</label><br>

<input type="radio" id="no" name="newsletter" value="no">
<label for="no">いいえ、結構です</label>

1.6 checked 属性：デフォルト選択の設定

checked 属性を使用すると、グループ内のあるラジオボタンをあらかじめ選択された状態にできます。これは、デフォルトのオプションを提供したり、ユーザーの以前の選択を保持したりする際に便利です。

注意： 一つのグループ内で checked 属性を持つラジオボタンは、原則として一つだけにすべきです。

<input type="radio" id="small" name="size" value="small">
<label for="small">Sサイズ</label><br>

<input type="radio" id="medium" name="size" value="medium" checked>
<label for="medium">Mサイズ (デフォルト)</label><br>

<input type="radio" id="large" name="size" value="large">
<label for="large">Lサイズ</label>

ページがロードされた際、「Mサイズ」のオプションが自動的に選択された状態で表示されます。

2. 実戦的なサンプルとデモ

2.1 例 1：支払い方法の選択

ラジオボタンは、チェックアウト時の支払い方法の選択によく使われます。

<p>支払い方法を選択してください：</p>
<input type="radio" id="credit_card" name="payment_method" value="credit_card">
<label for="credit_card">クレジットカード</label><br>

<input type="radio" id="paypal" name="payment_method" value="paypal">
<label for="paypal">PayPal</label><br>

<input type="radio" id="bank_transfer" name="payment_method" value="bank_transfer">
<label for="bank_transfer">銀行振込</label>

2.2 例 2：多肢選択クイズへの回答

アンケート調査やオンラインテストでの利用例です。

<p>フランスの首都はどこですか？</p>
<input type="radio" id="london" name="capital" value="london">
<label for="london">ロンドン</label><br>

<input type="radio" id="paris" name="capital" value="paris">
<label for="paris">パリ</label><br>

<input type="radio" id="berlin" name="capital" value="berlin">
<label for="berlin">ベルリン</label>

2.3 例 3：ユーザーフィードバック（満足度評価）

<p>弊社のサービスにご満足いただけましたか？</p>
<input type="radio" id="very_satisfied" name="satisfaction" value="very_satisfied">
<label for="very_satisfied">非常に満足</label><br>

<input type="radio" id="satisfied" name="satisfaction" value="satisfied">
<label for="satisfied">満足</label><br>

<input type="radio" id="neutral" name="satisfaction" value="neutral">
<label for="neutral">普通</label>