<INPUT type="radio">ラジオボタンを作る

<INPUT>タグのtype属性に「radio」と指定すると、ラジオボタンを作ることができます。 このラジオボタンは複数の選択肢から一つだけを選択できる形式のボタンです。

name属性ではボタンの名前を指定することができます。<FORM>のデータが送信される際は、この名前とvalue属性の値が一緒に送られてきます。 ですが、同じ名前のボタンは同一のグループとして認識されるため、共通の項目に対する選択肢として使用するラジオボタンには、全て共通の名前を(name属性の値を)つける必要があります。 なお同じグループのラジオボタンは一つの項目のみしか選択できません。

またchecked属性を指定すると、そのボタンがあらかじめ選択された状態で表示されます。

データが送信された時、どの項目が選択されたのかを判別するためには、value属性の値を個別に指定するようにして下さい。

使用した時の例

<p>あなたが好きな色は?<br />
<input type="radio" name="color" value="red">赤色
<input type="radio" name="color" value="blue">青色
<input type="radio" name="color" value="black">黒
</p>

ブラウザ上の表示例

あなたが好きな色は?
赤色 青色

書式

  • <input type="radio" name="名前" value="送信文字"> ・・・・・・ ラジオボタンの作成

属性

name="任意の名前" ボタンに名前を付ける。
value="" name属性の値とセットでサーバーへ送信されてくる値を指定
checked="checked" 最初から選択された状態にする

対応ブラウザなどのデータ

形式 <INPUT type="radio"> 分類 インライン要素 / 置換要素
親要素 子要素にフレージングコンテンツを含める要素 子要素 なし
開始タグ 必須 終了タグ なし
汎用属性 accesskey / class / dir / id / lang / style / tabindex / title
対応ブラウザ Internet Explorer2~ , Google Chrome1~ , Firefox1~ , Opera1~ , Safari1~