MB-Support

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

5.チェックボックスの作成 checkbox

 複数の選択ボタンを配置して、クライアントに複数の項目を選択させたい場合に使用します。ラジオボタンとの違いは、項目から1つを選択させるか、複数選択させるかです。


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


・ソース

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

・実際の表示


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

<form method="" action="">
投稿者:
holmes <input type="checkbox" name="name" value="holmes">
watson <input type="checkbox" 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="checkbox" name="name" value="holmes">
watson <input type="checkbox" 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="checkbox" name="name" value="holmes">
watson <input type="checkbox" name="name" value="watson">
<br /><br />
<hr />
アドレス:
221b <input type="checkbox" name="address" value="221b">
Kensington <input type="checkbox" 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="checkbox" name="name" value="holmes" checked>
watson <input type="checkbox" name="name" value="watson">
</form>

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


fieldset による装飾

チェックボックスのタイトルと、値にあたる項目を分かりやすく表示するには、fieldset が便利です。

・ソース

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

・実際の表示




戻る 一覧表示 次へ


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

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

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