気の向くままに辿るIT/ICT/IoT
HTML/XHTMLタグ・要素・属性・属性値

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

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

SELECTタグ・要素・属性

SELECTタグとは

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


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

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


     <form>
         <select name="お好きな名前">
             <option value="1">オプション1</option>
             <option value="2" selected>オプション2</option>
             <option value="3">オプション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">オプション1</option>
             <option value="2" selected>オプション2</option>
             <option value="3">オプション3</option>
         </select>
     </form>

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

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


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


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

FORMタグで利用できるタグ

各種HTMLとHTMLタグ/要素・属性・属性値

ホーム前へ次へ