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>

English 日本語 中国語

参考文献

Web Hypertext Application Technology Working Group (2022) The option element HTML Living Standard