HTMLの <option> タグ
HTMLのoptionタグは、セレクトボックス(リストボックス)の選択肢を表わすタグです。この記事では、optionタグの使い方をサンプルを交えてご紹介します。
選択肢フィールドに項目を配置します。 <SELECT>と</SELECT>の間に記述することができます。<OPTGROUP>タグにより、項目をグループ化することができます。
書式
HTML要素のタグ名、属性名および属性値は、大文字と小文字のどちらでもよい。
<option label="label" value="value"></option>
<option label="label">
<!-- text -->
</option>
option 要素の直後に別の option 要素が続く場合、または直後に optgroup 要素が続く場合、または親要素にもう内容が無い場合は、option 要素の終了タグを省略できる。
<option label="label" value="value">
属性
HTMLの場合、属性名は大文字と小文字を区別しない。XHTMLの場合、属性名は小文字で記述する。
<option> タグには次の属性を指定できる。
- class
- CSSのクラスを指定する。空白で区切って、複数のクラスを指定することもできる。
- dir
- 方向
- disabled
- 省略可能。この属性を指定すると、選択不可能になります。
disabled属性を指定したoption要素は、ユーザの入力を受け付けない。このとき、ブラウザによっては入力を受け付けないことを示すために灰色表示になることがある。また、フォーカスの受け手とならず、タブ移動で飛び越される。
disabled
属性を指定したoption
要素の値は、サブミット時にフォームデータを送信しない。<select name="lang"> <option value="en" label="English"> <option value="ja" label="日本語" disabled> <option value="zh" label="中国語"> </select>
- id
- 要素の一意な識別子を指定する。
- label
- 選択肢に表示する文字列を指定します。label属性を省略すると、<option>と</option>の間の文字列が表示されます。 Internet Explorer 6 ではlabel属性を指定しても選択肢には表示されないようです。
<select name="lang"> <option value="en" label="English"> <option value="ja" label="日本語"> <option value="zh" label="中国語"> </select>
- lang
- 言語
- onclick
- マウスがクリックされたときに実行するスクリプト
- ondblclick
- マウスがダブルクリックされたときに実行するスクリプト
- onkeydown
- キーを押したときに実行するスクリプト
- onkeypress
- キーを押して離したときに実行するスクリプト
- onkeyup
- キーを離したときに実行するスクリプト
- onmousedown
- マウスのボタンが押下されたときに実行するスクリプト
- onmousemove
- マウスポインタを要素内で動かしたときに実行するスクリプト
- onmouseout
- マウスポインタを要素内から要素外に動かしたときに実行するスクリプト
- onmouseover
- マウスカーソルが乗ったときに実行するスクリプト
- onmouseup
- マウスのボタンが離されたときに実行するスクリプト
- selected
- optionタグにselected属性を指定すると、あらかじめ選択された状態になる。
HTML5の場合、selected属性に指定する値は何でもよい。属性さえ指定すれば、その値を省略することもできる。
<option selected>
<option selected="">
<option selected="selected">
XHTMLの場合、属性名及び属性値は小文字で指定する。属性値は省略できない。
<option selected="selected">
selected 属性の使用例を以下に示す。
<select name="lang"> <option value="en" label="English"> <option value="ja" label="日本語" selected> <option value="zh" label="中国語"> </select>
- style
- CSSのプロパティを指定する。セミコロンで区切って、複数のプロパティを指定することもできる。
- title
- タイトル
- value
-
このオプションがが選択されたときの値を指定する。submit されたときに、この値がリクエスト・パラメータとして送信される。
<option value="ja">日本語</option>
value属性を省略した場合、
<option>
と</option>
の間の文字列が選択されたときの値となる。<option>ja</option>
value 属性の使用例を以下に示す。
<select name="lang"> <option value="en">English</option> <option value="ja">日本語</option> <option value="zh">中国語</option> </select>
参考文献
Web Hypertext Application Technology Working Group (2022) The option element HTML Living Standard