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