構文

<form>
<div>
  <select>
    <option>・・・</option>
  </select>
    ：
</div>
</form>

説明文

　<select>タグは，<form>タグでサーバー側に送信するデータの入力する部品として利用する。<select>タグはユーザーがデータを入力するのではなく，あらかじめ用意された項目から選択をする。

　選択可能な項目は，<select>～</select>内に<option>タグを用いて列挙する。項目は列挙された順に表示される。

　<select>タグの「size」属性では画面上に表示する項目数を指定する。何も指定しかなったり「1」と指定した場合は，1行に項目が表示される。また，他の項目はプルダウンして一覧表示する。「2」以上を指定した場合は，指定した数の項目が一覧される。それ以上の項目が用意されている場合は，項目をスクロールしながら選択できる。ただし，表示方法はWebブラウザによって異なる場合がある。

　「multiple」要素を付加しておくと，[Shift]や[Ctrl]キーを用いて複数の項目を選択できる。

　<select>タグはインライン要素であるため，基本的にブロック要素の中で利用するようにする。また，<form>タグはブロック要素であるが，HTML 4 Strictでは<form>タグ内にはブロック要素のみ包括を許可しているため，<select>タグを利用する際は，他のブロック要素を利用して記載するようにする。

サンプル

HTMLソース

<form action="select.cgi">
<div>
  利用OS：<select name="OS">
    <option>Windows</option>
    <option>MacOS</option>
    <option>UNIX</option>
    <option>Linux</option>
    <option>その他</option>
  </select><br>
  利用ブラウザ：<br>
  <select name="BROWSER" size="3">
    <option>Internet Explorer</option>
    <option>Firefox</option>
    <option>Opera</option>
    <option>Safari</option>
    <option>Epiphany</option>
    <option>Konqueror</option>
    <option>その他</option>
  </select><br>
  <input type="submit" value="送信">
</div>
</form>

・ ブラウザ表示例

利用OS：
利用ブラウザ：

対応状況

HTML IE Firefox Opera
4 strict 4 Transitional 5 6 7 2 3 8 9
○ ○ ○ ○ ○ ○ ○ ○ ○

要素，タグ

タグ要素 インライン要素，フォーム要素
包括可能要素 option，optgroup
タグ記述条件 開始タグ：必須　終了タグ：必須

属性

よく利用する属性

属性 意味 対応
HTML 4s HTML 4t その他
align=配置位置 セル内の横方向における内容の配置位置を指定する。「left」で左揃え，「center」で中央揃え，「right」で右揃え，「justify」でセル内に均等になるように配置する。また，「char」を指定するとchar属性に従った配置を行う ○ ○ 　
disabled 選択を禁止する。禁止すると背景および文字が灰色になる ○ ○ 　
multiple 複数の項目を選択可能に。複数の項目を選択する方法は，Webブラウザによって異なる。Internet Explorerであれば[Ctrl]キーや[Shift]キーを押しながらマウスで項目をクリックする。複数の項目を選択した場合，データはカンマで区切りながらサーバーへ送信される ○ ○  
name=名前 このフォームに名前を付ける。フォームの内容を送信する場合，「名前=値」のように値の前にここで指定した名前が付加される。サーバー側のプログラムで処理する場合，この名前を確認することでどのフォーム部品の値であるかを判断できる ○ ○  
size=行数 <:select>タグの選択項目を一度に表示する行数を指定する。値を指定しないまたは「1」とした場合，選択項目はプルダウン・メニューで表示される。「2」以上を指定した場合は，右にスクロール・バーが表示される。ただし，選択肢の総数より指定した値の方が大きい場合は，スクロール・バーは表示されない ○ ○  

その他の属性

属性 意味 対応
HTML 4s HTML 4t その他
accesskey=キー このタグにフォーカスするキー設定を行う。「A」と指定すると，[ALT]+[a]を押下することでこのタグにフォーカスが移動する ○ ○ 　
class=クラス名 このタグのクラス名。CSSでスタイルを指定する場合などに利用される ○ ○ 　
dir=方向 タグ内の文字の表示方向。「ltr」を指定すると文字を左から右に，rtlを指定すると「右から左」に表示する。しかし，多くのWebブラウザでは，文字コードを自動判別し，自動的に表示方向を決定している。そのため，日本語を「rtl」と指定しても実際には左から右に表示される。強制的に並び替えを行いたい場合は<bdo>タグを利用する ○ ○ 　
id=ID タグのID。ダイナミックHTMLでタグを操作する場合や，Java Scriptでのタグの制御，個別にスタイルを指定する場合などに利用する ○ ○ 　
lang=言語 タグ内に記述した言語。例えば，日本語の場合は「ja」，英語の場合は「en」を指定する ○ ○ 　
style=スタイル タグのスタイル。スタイルの指定方法については「CSSの基本 (2) CSSの記述位置」を参照 ○ ○ 　
tabindex=順序 タブ・キーによるフォーカスの移動順序を指定する。値が小さいほど先にフォーカスされる ○ ○ 　
title=タイトル タグのタイトル。一般的にタグの補足情報を記述する。一般的なWebブラウザでは，タグ上にマウス・ポインタを乗せるとツール・チップにtitle属性に指定した内容を表示する ○ ○ 　

マウスやキーボードの状況変化に関わる属性

属性 意味 対応
HTML 4s HTML 4t その他
onclick=スクリプト このタグに対応する表示結果にマウスの左ボタンをクリックした場合に，指定したスクリプトを実行する ○ ○  
ondblclick=スクリプト このタグに対応する表示結果にマウスの左ボタンをダブル・クリックした場合に，指定したスクリプトを実行する ○ ○  
onmousedown=スクリプト このタグに対応する表示結果にマウスのボタンで押下した場合に，指定したスクリプトを実行する ○ ○  
onmouseup=スクリプト このタグに対応する表示結果にマウスのボタンを離した場合に，指定したスクリプトを実行する ○ ○  
onmouseover=スクリプト このタグに対応する表示結果にマウス・ポインタが乗った場合に，指定したスクリプトを実行する ○ ○  
onmousemove=スクリプト このタグに対応する表示結果上でマウス・ポインタが動いた場合に，指定したスクリプトを実行する ○ ○  
onmouseout=スクリプト このタグに対応する表示結果にマウス・ポインタが外れた場合に，指定したスクリプトを実行する ○ ○  
onkeypress=スクリプト このタグに対応する表示結果にフォーカスした状態で，キーボードのキーを押下して離した場合に，指定したスクリプトを実行する ○ ○  
onkeydown=スクリプト このタグに対応する表示結果にフォーカスした状態で，キーボードのキーを押下した場合に，指定したスクリプトを実行する ○ ○  
onkeyup=スクリプト このタグに対応する表示結果にフォーカスした状態で，キーボードのキーから離した場合に，指定したスクリプトを実行する ○ ○  
onfocus=スクリプト このタグに対応する表示結果にフォーカスが当たった場合に，指定したスクリプトを実行する ○ ○  
onblur=スクリプト このタグに対応する表示結果にフォーカスが外れた場合に，指定したスクリプトを実行する ○ ○  

関連項目