<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
使用例
<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>
- 表示例
-
デフォルト：
選択済み：
- 動作確認のため、送信先として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>
- 表示例
- 対応しているブラウザでは、送信時に入力内容の妥当性がチェックされ、不備があればエラーメッセージが表示されます。