SELECT/OPTION プルダウンボックス／セレクトボックス／リストボックス／formタグselect要素とoption要素

単一選択セレクト・プルダウンメニューと複数選択リストボックス『SELECTタグ・要素・属性編』

SELECTタグ・要素・属性

SELECTタグとは

　クリックしたらメニューが表示されるようにするにはセレクト(プルダウン)メニューを使用します。

　htmlファイルの<body><form>～</form></body>タグの内側に記述できます。

　これはFORMタグの内側に以下のように記述します。

     <form>
         <select name="お好きな名前">
             <option value="1">オプション１</option>
             <option value="2" selected>オプション２</option>
             <option value="3">オプション３</option>
         </select>
     </form>

　補足しますと

◆<OPTION></OPTION>タグでくくった値が選択肢の名前となる

◆OPTION要素の開始タグの最後に『selected』を指定するとその値が選ばれた状態でブラウザに表示される

◆VALUE属性で指定した値が送信する際に送られる
(上記例では「1,2,3」※「オプション1,オプション2,オプション3」ではない事に注意。)

◆VALUE値は[1,2,3]である必要はありません。受信した際にVALUE属性値(名前)で判別できるようにしておかないと意味がありません。

◆尚、「オプション1～オプション3」もお好きな名称に自由に設定できます。

◆javascriptを併用すると選択したページにジャンプする事ができます。

　更に<select size="" name="">を利用すると縦長のリストボックスを作る事ができます。

　次のように記述します。

     <form>
         <select size="3" name="お好きな名前">
             <option value="1">オプション１</option>
             <option value="2" selected>オプション２</option>
             <option value="3">オプション３</option>
         </select>
     </form>

　これに[multiple]を設定すると(Windowsの場合)[Shift]または[Ctrl]+クリックで複数選択できるようになります。

　ちなみに[size]よりもオプションの数が多いと自動的にスクロールバーが表示されます。

　これは次のように記述します。

     <form>
         <select size="3" name="お好きな名前" multiple>
             <option value="1">オプション１</option>
             <option value="2" selected>オプション２</option>
             <option value="3">オプション３</option>
         </select>
     </form>