SITEMAP [初めてのホームページ講座] [逆引きHTML] [14.フォーム] [8.ラジオボタンを作る]
HTMLの参考書 スタイルシートの参考書

逆引きHTMLリファレンス

14. フォーム

14-8. ラジオボタンを作る

●タグ <INPUT>
●構文 <INPUT TYPE="radio" VALUE="xxx" CHECKED> 終了タグは存在しません（エンプティ要素）
xxx：フォーム送信時のデータ名を指定
※「CHECKED」属性は同じラジオボタンのグループ（NAME属性値が同じ）に対して１つのみ指定可能です。
●説明
丸いボタンを複数表示し、１つのみを選択できるようにするものです。 性別や年齢など、選択項目の中で必ず１つのみ該当する場合に有効で、訪問者はキーボードからの入力を省略できるため、結構な使用頻度があります。

NAME属性は必ず指定しなければなりませんが、この属性値を同一のものにすると、それらが１つのグループとして扱われます。 そのグループ内で、常に１つだけが選択できるようになっています。

フォーム送信時に選択されているVALUE属性値をデータとして送信するので、グループ内の属性値はすべて別々にする必要があります。 初期からある１つを選択させたい場合は、「CHECKED」属性を指定します。

●HTML4.0 INPUT要素
●サンプル 実際に表示 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.0 Transitional//EN">
<HTML>
<HEAD>
	<META Http-Equiv="Content-Type" Content="text/html;charset=Shift_JIS">
	<TITLE>ラジオボタンを作る</TITLE>
</HEAD>
<BODY>
	<FORM METHOD="POST" ACTION="mailto:dummy@dummy.ne.jp"
	ENCTYPE="multipart/form-data">
		性別：
		<INPUT TYPE="radio" NAME="sex" VALUE="male" CHECKED>男性、
		<INPUT TYPE="radio" NAME="sex" VALUE="female">女性<BR>
		年齢：
		<INPUT TYPE="radio" NAME="age" VALUE="10" CHECKED>１０代、
		<INPUT TYPE="radio" NAME="age" VALUE="20">２０代、
		<INPUT TYPE="radio" NAME="age" VALUE="30">３０代、
		<INPUT TYPE="radio" NAME="age" VALUE="40">４０代、
		<INPUT TYPE="radio" NAME="age" VALUE="50">５０代、
		<INPUT TYPE="radio" NAME="age" VALUE="other">その他<BR>
	</FORM>
</BODY>
</HTML>
[Go To Top]
Copyright(C)1999 T.Miyazaki , All Rights Reserved.