構文
<form>
<div>
<select>
<option>・・・</option>
:
</select>
:
</div>
</form>
説明文
<option>タグは,<select>の選択肢を列挙する際に利用する。<select>~</select>内に選択肢1つにつき,1つの<option>タグで記述する。また,<option>タグは</option>を省略することが可能だ。
送信するデータは<option>で指定した選択肢の値が送られる。もし,表示する選択肢とは違うデータを送りたい場合は「value」属性に送信するデータを指定する。
また,「selected」属性を指定すると,Webページを表示した際に選択肢が選択されている状態になる。
サンプル
HTMLソース
<form action="option.cgi">
<div>
出身地:<select name="birth">
<option>北海道・東北</option>
<option>関東・甲信越</option>
<option>東海</option>
<option>近畿</option>
<option>山陽・山陰</option>
<option>四国</option>
<option>九州・沖縄</option>
</select><br>
<input type="submit" value="送信">
</div>
</form>
ブラウザ表示例
対応状況
HTML |
IE |
Firefox |
Opera |
4 strict |
4 Transitional |
5 |
6 |
7 |
2 |
3 |
8 |
9 |
○ |
○ |
○ |
○ |
○ |
○ |
○ |
○ |
○ |
要素,タグ
タグ要素 |
フォーム要素 |
包括可能要素 |
文字列 |
タグ記述条件 |
開始タグ:必須 終了タグ:省略可 |
属性
よく利用する属性
属性 |
意味 |
対応 |
HTML 4s |
HTML 4t |
その他 |
disabled |
選択を禁止する。禁止すると背景および文字が灰色になる |
○ |
○ |
|
selected |
Webページ表示時に選択した状態にする |
○ |
○ |
|
value=値 |
この項目が選択されている場合にサーバーへ送る値を指定する。この際,<select>にて指定したname属性に関連付けて送られる。もし,Value属性が設定されていない場合は,<option>タグでくくられた選択肢の内容が送られる |
○ |
○ |
|
その他の属性
属性 |
意味 |
対応 |
HTML 4s |
HTML 4t |
その他 |
class=クラス名 |
このタグのクラス名。CSSでスタイルを指定する場合などに利用される |
○ |
○ |
|
dir=方向 |
タグ内の文字の表示方向。「ltr」を指定すると文字を左から右に,rtlを指定すると「右から左」に表示する。しかし,多くのWebブラウザでは,文字コードを自動判別し,自動的に表示方向を決定している。そのため,日本語を「rtl」と指定しても実際には左から右に表示される。強制的に並び替えを行いたい場合は<bdo>タグを利用する |
○ |
○ |
|
id=ID |
タグのID。ダイナミックHTMLでタグを操作する場合や,Java Scriptでのタグの制御,個別にスタイルを指定する場合などに利用する |
○ |
○ |
|
label=ラベル名 |
選択肢をlabel属性で指定した名称で表示する。簡略化した名称を指定し,<optgroup>タグでグループ化した際に,選択肢を簡略表示するといった場合に活用できる。ただし,多くのWebブラウザでlabel属性の内容が無視される |
○ |
○ |
|
lang=言語 |
タグ内に記述した言語。例えば,日本語の場合は「ja」,英語の場合は「en」を指定する |
○ |
○ |
|
style=スタイル |
タグのスタイル。スタイルの指定方法については「CSSの基本 (2) CSSの記述位置」を参照 |
○ |
○ |
|
title=タイトル |
タグのタイトル。一般的にタグの補足情報を記述する。一般的なWebブラウザでは,タグ上にマウス・ポインタを乗せるとツール・チップにtitle属性に指定した内容を表示する |
○ |
○ |
|
マウスやキーボードの状況変化に関わる属性
属性 |
意味 |
対応 |
HTML 4s |
HTML 4t |
その他 |
onclick=スクリプト |
このタグに対応する表示結果にマウスの左ボタンをクリックした場合に,指定したスクリプトを実行する |
○ |
○ |
|
ondblclick=スクリプト |
このタグに対応する表示結果にマウスの左ボタンをダブル・クリックした場合に,指定したスクリプトを実行する |
○ |
○ |
|
onmousedown=スクリプト |
このタグに対応する表示結果にマウスのボタンで押下した場合に,指定したスクリプトを実行する |
○ |
○ |
|
onmouseup=スクリプト |
このタグに対応する表示結果にマウスのボタンを離した場合に,指定したスクリプトを実行する |
○ |
○ |
|
onmouseover=スクリプト |
このタグに対応する表示結果にマウス・ポインタが乗った場合に,指定したスクリプトを実行する |
○ |
○ |
|
onmousemove=スクリプト |
このタグに対応する表示結果上でマウス・ポインタが動いた場合に,指定したスクリプトを実行する |
○ |
○ |
|
onmouseout=スクリプト |
このタグに対応する表示結果にマウス・ポインタが外れた場合に,指定したスクリプトを実行する |
○ |
○ |
|
onkeypress=スクリプト |
このタグに対応する表示結果にフォーカスした状態で,キーボードのキーを押下して離した場合に,指定したスクリプトを実行する |
○ |
○ |
|
onkeydown=スクリプト |
このタグに対応する表示結果にフォーカスした状態で,キーボードのキーを押下した場合に,指定したスクリプトを実行する |
○ |
○ |
|
onkeyup=スクリプト |
このタグに対応する表示結果にフォーカスした状態で,キーボードのキーから離した場合に,指定したスクリプトを実行する |
○ |
○ |
|
関連項目