MB-Support

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

6.プルダウンメニューの作成 select

 スペースを省略できるメリットはありますが、例えば JavaScript を使ってメニューを作成した場合、検索サイトのロボットが正しく解釈する事ができず、クロールする事できません。


複数の文字をプルダウン形式(select)で表示して、クライアントにどれか一つ選択させたい場合に使用します。 データを収集する上で、ユニークな文字、文章を入力させたくない場合に重宝します。 ラジオボタンやチェックボックスと違い、スペースを使わずに表示できるのがメリットです。


・ソース

<select name="alphabet">
<option value="A">A</option> 
<option value="B" selected>B</option>   
<option value="C">C</option> 
</select>

・実際の表示

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

<form method="" action="">
<select name="alphabet">
<option value="A">A</option> 
<option value="B" selected>B</option>   
<option value="C">C</option> 
</select>
</form>


name

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

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

<form method="" action="">
<select name="name">
<option value="holmes">holmes</option> 
<option value="watson">watson</option> 
</select>
</form>

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


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

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

4つの option が存在しますが、name が name と address の二つあり、それぞれ別の select として扱われます。


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

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

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

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


value

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

value に指定する物は、それぞれのチェックボックスの値になります。例えば性別なら「男」「女」など、転送したい値を指定します。

<option value="holmes">ホームズ</option> 
<option value="watson">ワトソン</option> 


<option>表示する名前</option>

<option></option> の間には、実際に表示する文字を入力します。 もちろん、転送する文字は上で説明した様に value の値なので、表示内容と一緒にする必要はありません。例えば、何らかのシステムをデータベースを使って作成したとします。 ホームズやワトソンなどのユーザー名はデータベースに登録されていて、そのIDだけを使う場合、表示する文字はホームズやワトソンを使いますが、value の値は 1 や 2 を使っても問題ありません。

<option value="holmes">ホームズ</option> 
<option value="watson">ワトソン</option> 

selected

selected が記述された option が、初期状態で選択された事にできます。

<form method="" action="">
<select name="name">
<option value="holmes">holmes</option> 
<option value="watson" selected>watson</option> 
</select>
</form>

↓初期状態で watson が選択されています。もちろん、クライアントが holems に変更する事ができます。 選択される割合が高いものに selected を入力しておくと便利です。また、cookie を利用して selected の場所を動的に変更させても便利です。


例えばこのサイトでは

プルダウンメニューとJavaScriptとXMLを使って管理人の日記のメニューとして使っています。


 





戻る 一覧表示 次へ


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

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

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