<input type="radio">

更新日
仕様 HTML Living Standard
分類 フロー・コンテンツ / フレージング・コンテンツ / インタラクティブ・コンテンツ / フォーム関連要素リスト化サブミット可能リセット可能自動大文字化継承ラベル付け可能) / パルパブル・コンテンツ
利用場所 フレージング・コンテンツが置ける場所
内容 無し(空要素)

input要素type="radio" を指定すると、ラジオボタンを作成できます。(複数の選択肢から1つだけ選べるタイプ)


<input type="radio" name="example" value="選択肢1">選択肢1

<input type="radio" name="example" value="選択肢2" checked>選択肢2

属性
任意属性(共通)
type="" 部品のタイプ radio ラジオボタン
name="" 部品の名前 文字列 部品を識別するための名前
value="" 送信される値 文字列 選択時の値
disabled 部品の無効化 disabled 値は省略可能
form="" フォームとの関連付け ID名 関連付けるform要素に指定したID名
任意属性(部品タイプに依存)
checked 選択された状態にする checked 値は省略可能
required 入力必須 required 値は省略可能
  • 各属性の概要は、上記表のリンク先をご覧ください。(input要素のページにリンクしています)

どの部品タイプにどの属性を指定できるかは、下記の対応表で確認することができます。

この部品タイプの特徴

ラジオボタンは、複数の選択肢から1つだけを選択することができます。

選択肢1 選択肢2 選択肢3 (実際の表示例)

ラジオボタンのグループについて

複数のラジオボタンに同じ部品名を付けることで、1つのグループを作成することができます。

次の例では、example という名前によって1つのグループを作成しています。ラジオボタンの場合、このグループの中から1つだけを選択することができます。

<input type="radio" name="example" value="選択肢1">選択肢1
<input type="radio" name="example" value="選択肢2">選択肢2
<input type="radio" name="example" value="選択肢3">選択肢3

checked属性について

checked属性は、最初から選択された状態を指定します。この属性は、1つのグループの中で1つだけ指定することができます。

次の例では、選択肢1が選択された状態になります。

<input type="radio" name="example" value="選択肢1" checked>選択肢1
<input type="radio" name="example" value="選択肢2">選択肢2
<input type="radio" name="example" value="選択肢3">選択肢3

required属性について

required属性は、そのグループが入力必須であることを指定します。(ラジオボタンの場合は、部品単位ではなくグループ単位で指定することになります)

グループ内の1つにこの属性を指定すると、そのグループが入力必須になります。

<input type="radio" name="example" value="選択肢1" required>選択肢1
<input type="radio" name="example" value="選択肢2">選択肢2
<input type="radio" name="example" value="選択肢3">選択肢3

使用例

checked属性を指定した例

<p>デフォルト:
<label><input type="radio" name="q1" value="はい">はい</label>
<label><input type="radio" name="q1" value="いいえ">いいえ</label>
<label><input type="radio" name="q1" value="どちらでもない">どちらでもない</label>
</p>

<p>選択済み:
<label><input type="radio" name="q2" value="はい">はい</label>
<label><input type="radio" name="q2" value="いいえ" checked>いいえ</label>
<label><input type="radio" name="q2" value="どちらでもない">どちらでもない</label>
</p>

表示例

デフォルト:

選択済み:

required属性を指定した例
  • 動作確認のため、送信先としてHTMLファイル(現在のページ)を指定しています。

<form method="get" action="input_radio.html">

<p>入力必須:
<label><input type="radio" name="example" value="はい" required>はい</label>
<label><input type="radio" name="example" value="いいえ">いいえ</label>
<label><input type="radio" name="example" value="どちらでもない">どちらでもない</label>
 <strong>必須</strong>
</p>

<p><input type="submit" value="送信する"></p>

</form>

表示例

入力必須: 必須

  • 対応しているブラウザでは、送信時に入力内容の妥当性がチェックされ、不備があればエラーメッセージが表示されます。