ラジオボタン

ラジオボタンはいくつかの選択肢から一つを選択する時に使われる部品です。ラジオボタンを使うにはinput要素を使いtype属性に「radio」を指定して下さい。

HTML4.01

<input type="radio" name="名前" value="値1">ラベル1
<input type="radio" name="名前" value="値2">ラベル2
<input type="radio" name="名前" value="値3">ラベル3

XHTML

<input type="radio" name="名前" value="値1" />ラベル1
<input type="radio" name="名前" value="値2" />ラベル2
<input type="radio" name="名前" value="値3" />ラベル3

※以降はXHTMLの場合で記載します。

name属性には部品に対する名前を指定します。同じ選択肢グループに含まれる部品には同じ名前を指定して下さい。

value属性にはフォームのデータが送信される時に値を指定します。ここで指定した値が実際に送信される値ですが、部品が表示される時にはこの値は使われませんので各部品の後に画面に表示される為のラベルを別途テキストで指定します。

具体的には次のように記述します。

<form action="#" method="post">
<p>
<input type="radio" name="seibetu" value="man" />男性
<input type="radio" name="seibetu" value="woman" />女性<br />
<input type="submit" name="button" />
</p>
</form>

実際にWebページに配置すると次のように表示されます。

ラジオボタンの場合はname属性に同じ名前が付けられているラジオボタンは同時に1つしか選択できません。その為、いずれかのラジオボタンが選択されている状態で他のラジオボタンを選択すると、前に選択されていたラジオボタンは選択解除されます。

同時に一つしか選択できないラジオボタンは同じname属性を持つものなので、name属性を別のものにすれば選択グループを複数作る事も可能です。

初期状態で選択された状態

ラジオボタンを初期状態で選択状態にするにはchecked属性に値として「checked」を指定します。

<input type="radio" name="名前" value="値1" />ラベル1
<input type="radio" name="名前" value="値2" checked="checked" />ラベル2
<input type="radio" name="名前" value="値3" />ラベル3

※HTMLの場合には単に「checked」と記述することも可能でしたが、XHTMLでは「checked="checked"」と記述する必要があります。

具体的には次のように記述します。

<form action="#" method="post">
<p>
<input type="radio" name="seibetu" value="man" checked="checked" />男性
<input type="radio" name="seibetu" value="woman" />女性<br />
</p>
</form>

実際にWebページに配置すると次のように表示されます。

初期状態でラジオボタンが選択されています。