MB-Support

パソコン初心者のサポートページ

4.ラジオボタンの作成 radio

 選択項目を利用することで、ユーザが文字を入力する手間が省けます。また、アンケートなどで、取得したデータをデータベース化したい場合、例外処理を無くすために使用します。


複数の選択ボタンを配置して、クライアントにどれか一つ選択させたい場合に使用します。 データを収集する上で、ユニークな文字、文章を入力させたくない場合に重宝します。


・ソース

<input type="radio" name="A" valur="B">

・実際の表示

実際には <form></form> で囲む必要があるのでソースは以下の様になります。

<form method="" action="">
投稿者:
holmes <input type="radio" name="name" value="holmes">
watson <input type="radio" name="name" value="watson">
</form>


name

name="A"
例 name="name" name="color"

フィールドの名前を半角英数字で指定します。この名前がデータを転送する時に重要で、form method でGETを指定した場合、アドレスのファイル名の後ろに付加されます。

<form method="GET" action="test.php" enctype="multipart/form-data">
投稿者:
holmes <input type="radio" name="name" value="holmes">
watson <input type="radio" name="name" value="watson">
</form>

例えば上のソースでは、name と名前の付いた ラジオボタンを2つ作成しています。 このフォームを使って転送できる値は value で指定した文字になります。 下の様にファイル名の後ろに ? と、ここで name で指定した name 、さらに = が付け足され、その後ろに ラジオボタンの value で指定した文字が表示されます。


さらに同じ form 内に複数の ラジオボタン を設置した場合は、ソースの上から順番に & で付け足されます。 ラジオボタン の属性を判別するのは name で、これを変更する事で属性の違ったラジオボタンを作成可能です。

<form method="GET" action="test.php" enctype="multipart/form-data">
投稿者:
holmes <input type="radio" name="name" value="holmes">
watson <input type="radio" name="name" value="watson">
<br /><br />
<hr />
アドレス:
221b <input type="radio" name="address" value="221b">
Kensington <input type="radio" name="address" value="Kensington">
<br /><br />
<input type="submit" value="送信">
</form>

4 つのラジオボタンが存在しますが、name が name と address の二つあり、それぞれ別のフィールドとして扱われます。


PHPでGETで転送」されたデータを抽出した結果

$_GET[name] は holrmes
$_GET[address] は 221b

PHPでPOSTで転送」されたデータを抽出した結果

$_POST[name] は holrmes
$_POST[address] は 221b


value

value="B"
例 value="holmes" value=""

value に指定する物は、それぞれのラジオボタンの値になります。 例えば性別なら「男」「女」など、転送したい値を指定します。



checked

checked を入力すると、初期状態で特定のラジオボタンを選択させた状態にできます。

<form method="GET" action="test.php" enctype="multipart/form-data">
投稿者:
holmes <input type="radio" name="name" value="holmes" checked>
watson <input type="radio" name="name" value="watson">
</form>

↓初期状態で holmes が選択されています。もちろん、クライアントが watson に変更する事ができます。 選択される割合が高いものに checked を入力しておくと便利です。実際は情報を取り出すプログラムの方で、何も選択されていなかった場合の動作を決定する事ができるので、気休めではありますね。


掲示板で使われる文字色の指定

ラジオボタンでよく見かけるのが掲示板の文字色の指定です。 cookie を利用する事で、checked を入力する場所を動的に変更する事が可能です。

・ソース

<form method="GET" action="test.php" enctype="multipart/form-data">
<b>文字色:</b>
<input type="radio" name="color" value="#000000" checked>
<font color="#000000">■</font>
<input type="radio" name="color" value="#800000">
<font color="#800000">■</font>
<input type="radio" name="color" value="#DF0000">
<font color="#DF0000">■</font>
<input type="radio" name="color" value="#008040">
<font color="#008040">■</font>
<input type="radio" name="color" value="#0000FF">
<font color="#0000FF">■</font>
<input type="radio" name="color" value="#C100C1">
<font color="#C100C1">■</font>
<input type="radio" name="color" value="#FF80C0">
<font color="#FF80C0">■</font>
<input type="radio" name="color" value="#FF8040">
<font color="#FF8040">■</font>
</form>

・実際の表示


fieldset による装飾

ラジオボタンのタイトルと、値にあたる項目を分かりやすく表示するには、fieldset が便利です。

・ソース

<form method="GET" action="test.php" enctype="multipart/form-data">
<fieldset>
<legend>文字色:</legend>
<input type="radio" name="color" value="#000000" checked>
<font color="#000000">■</font>
<input type="radio" name="color" value="#800000">
<font color="#800000">■</font>
<input type="radio" name="color" value="#DF0000">
<font color="#DF0000">■</font>
<input type="radio" name="color" value="#008040">
<font color="#008040">■</font>
<input type="radio" name="color" value="#0000FF">
<font color="#0000FF">■</font>
<input type="radio" name="color" value="#C100C1">
<font color="#C100C1">■</font>
<input type="radio" name="color" value="#FF80C0">
<font color="#FF80C0">■</font>
<input type="radio" name="color" value="#FF8040">
<font color="#FF8040">■</font>
</fieldset>
</form>

・実際の表示




戻る 一覧表示 次へ


BTOパソコン・ゲームPC・自作パソコンなら【TSUKUMO】 - 自作PCに必要なパーツ、豊富な品揃え

Copyright © 2013 MB-Support パソコン初心者のサポートページ All Rights Reserved.

管理人サイト閲覧方法プライバシーポリシー著作権/免責事項