初級篇★ページ作りの基礎知識1. HTMLを書いてみよう

VOL7.送信フォームを作ってみよう　その3.プルダウンメニューとリストボックス

�T.プルダウンメニューを作る

よく見かけるメニューですが、これを「プルダウンメニュー」と呼び、ラジオボタンの１グループを１行にまとめたような働きをします。スクリプトは、この場合グループ名を<SELECT NAME...>〜</SELECT>タグで指定し、その間に選択肢を<OPTION VALUE="回答">〜</OPTION>で設定します。この時、VALUE="回答"を省略すると、送信された時は代わりに<OPTION>〜</OPTION>の間で書かれた選択肢名が送られてきます。

なおプルダウンメニューでの選択は、ラジオボタンと同じで、ひとつの質問グループにつきひとつです。

<SELECT NAME="質問のグループ名">

<OPTION VALUE="回答">画面に表示される選択肢</OPTION>

<OPTION VALUE="回答">画面に表示される選択肢</OPTION>

<OPTION VALUE="回答">画面に表示される選択肢</OPTION>

   .

   .

   .

</SELECT> 

上の例は、スクリプトでは以下のように書かれています。

<FORM> 
<SELECT NAME="article"> 
<OPTION VALUE="tea">TEA! TEA! TEA!</OPTION> 
<OPTION VALUE="tea talk">TEA TALK</OPTION> 
<OPTION VALUE="sweets">sweets! sweets!</OPTION> 
<OPTION VALUE="fashion">ファッションはエンタテイメント</OPTION> 
<OPTION VALUE="daily">DAILY LIFE WORKSHOP</OPTION>
<OPTION VALUE="secret">SECRET GARDEN</OPTION>
<OPTION VALUE="craft">CRAFT WORK</OPTION>
<OPTION VALUE="review">WORKSHOP REVIEW</OPTION>
<OPTION VALUE="that's_80's">That's 80's!!</OPTION>
<OPTION VALUE="yomoyoma">よもやまばなし</OPTION>
<OPTION VALUE="domestic_policy">DOMESTIC POLICY WORKSHOP</OPTION>
<OPTION VALUE="homepage_school">ホームページを作ろうヨ!!</OPTION>
<OPTION VALUE="ayapoo">AYAPOO DIARY</OPTION> 
<OPTION VALUE="ayapoo annex">洋楽ファンのひとりごと</OPTION>
<OPTION VALUE="drive diary">Drive Diary</OPTION> 
<OPTION VALUE="nothing">なかった　</OPTION> 
</SELECT>
</FORM> 

なお、以下のようにグループのうちどれかに「selected」と書き込んでおくと、その項目が予め選択された状態で表示されます。

<FORM> 
<SELECT NAME="article"> 
<OPTION VALUE="tea" >TEA! TEA! TEA!</OPTION> 
<OPTION VALUE="tea talk">TEA TALK</OPTION> 
<OPTION VALUE="sweets">sweets! sweets!</OPTION> 
<OPTION VALUE="fashion"selected>ファッションはエンタテイメント</OPTION> 
   .

   .

   .

</SELECT>
</FORM> 

↓

�U.リストボックスを作る

「リストボックス」はチェックボックスに代わる働きをするもので、こちらは<SELECT...>タグ内に、「MULTIPLE」を指定することによって、１つの質問グループに対して複数回答が可能なように設定することが出来ます。指定しなければ、ひとつしか選択できません。但し、設定が「MULTIPLE」になっていても、複数選択するためには訪問者はCtrl(コントロール・キー)を押しながら選択肢をクリックする必要があります。

また、リストボックスでも、VALUE="回答"を省略すると、送信された時は代わりに<OPTION>〜</OPTION>の間で書かれた選択肢名が送られてきます。

<SELECT SIZE="表示される行数 " NAME="質問のグループ名" MULTIPLE>

<OPTION VALUE="回答">画面に表示される選択肢</OPTION>

<OPTION VALUE="回答">画面に表示される選択肢</OPTION>

<OPTION VALUE="回答">画面に表示される選択肢</OPTION>

   .

   .

   .

</SELECT> 

上の例は、スクリプトでは以下のように書かれています。

<FORM> 
<SELECT SIZE="8" NAME="article2" MULTIPLE>
<OPTION VALUE="tea">TEA! TEA! TEA!</OPTION> 
<OPTION VALUE="tea talk">TEA TALK</OPTION> 
<OPTION VALUE="sweets">sweets! sweets!</OPTION> 
<OPTION VALUE="fashion">ファッションはエンタテイメント</OPTION> 
   .

   .

   .

</SELECT>
</FORM> 

なお、以下のようにグループのうちどれかに「selected」と書き込んでおくと、その項目が予め選択された状態で表示されます。

<FORM> 
<SELECT SIZE="8" NAME="article2" MULTIPLE>
<OPTION VALUE="tea" >TEA! TEA! TEA!</OPTION> 
<OPTION VALUE="tea talk">TEA TALK</OPTION> 
<OPTION VALUE="sweets" selected>sweets! sweets!</OPTION> 
<OPTION VALUE="fashion">ファッションはエンタテイメント</OPTION> 
   .

   .

   .

</SELECT>
</FORM> 

↓

★送信例★

初級篇1.VOL７.送信フォームを作ってみよう・その２ <<

>> 初級篇1.VOL７.送信フォームを作ってみよう・その４