HTML <option> element

HTMLのoptionタグは、セレクトボックス（リストボックス）の選択肢を表わすタグです。この記事では、optionタグの使い方をサンプルを交えてご紹介します。

選択肢フィールドに項目を配置します。 <SELECT>と</SELECT>の間に記述することができます。<OPTGROUP>タグにより、項目をグループ化することができます。

書式

開始タグと終了タグの間には、ラベル（選択肢に表示する文字列）を指定する。

<option>ラベル</option>

ラベルはlabel属性に指定することもできる。

<option label="ラベル"></option>

HTML では終了タグを省略できます。XHTML では省略できません。開始タグと終了タグの間には文字列が現れます。

属性

HTMLの場合、属性名は大文字と小文字を区別しない。XHTMLの場合、属性名は小文字で記述する。

<option> タグには次の属性を指定できる。

class

CSSのクラスを指定する。空白で区切って、複数のクラスを指定することもできる。

dir

方向

id

要素の一意な識別子を指定する。

lang

言語

onclick

マウスがクリックされたときに実行するスクリプト

ondblclick

マウスがダブルクリックされたときに実行するスクリプト

onkeydown

キーを押したときに実行するスクリプト

onkeypress

キーを押して離したときに実行するスクリプト

onkeyup

キーを離したときに実行するスクリプト

onmousedown

マウスのボタンが押下されたときに実行するスクリプト

onmousemove

マウスポインタを要素内で動かしたときに実行するスクリプト

onmouseout

マウスポインタを要素内から要素外に動かしたときに実行するスクリプト

onmouseover

マウスカーソルが乗ったときに実行するスクリプト

onmouseup

マウスのボタンが離されたときに実行するスクリプト

style

CSSのプロパティを指定する。セミコロンで区切って、複数のプロパティを指定することもできる。

title

タイトル

value

このオプションがが選択されたときの値を指定する。submit されたときに、この値がリクエスト・パラメータとして送信される。

<option value="ja">日本語</option>

value属性を省略した場合、<option> と </option> の間の文字列が選択されたときの値となる。

<option>ja</option>

disabled

省略可能。この属性を指定すると、選択不可能になります。

disabled属性を指定したoption要素は、ユーザの入力を受け付けない。このとき、ブラウザによっては入力を受け付けないことを示すために灰色表示になることがある。また、フォーカスの受け手とならず、タブ移動で飛び越される。disabled属性を指定したoption要素の値は、サブミット時にフォームデータを送信しない。

label

選択肢に表示する文字列を指定します。label属性を省略すると、<option>と</option>の間の文字列が表示されます。 Internet Explorer 6 ではlabel属性を指定しても選択肢には表示されないようです。

selected

optionタグにselected属性を指定すると、あらかじめ選択された状態になる。

HTML5の場合、selected属性に指定する値は何でもよい。属性さえ指定すれば、その値を省略することもできる。

<option selected>

<option selected="">

<option selected="selected">

XHTMLの場合、属性名及び属性値は小文字で指定する。属性値は省略できない。

<option selected="selected">

例

HTMLタグ <option> の使用例と表示サンプルを次に示します。表示結果はブラウザによって異なることがあります。

<select name="lang">
  <option value="en">英語</option>
  <option value="es" disabled>スペイン語</option>
  <option value="zh">中国語</option>
  <option value="ja" selected>日本語</option>
  <option value="ru">ロシア語</option>
</select>

上記のHTMLは次のように記述することもできる。

<select name="lang">
  <option value="en" label="英語"/>
  <option value="es" label="スペイン語" disabled="disabled"/>
  <option value="zh" label="中国語"/>
  <option value="ja" label="日本語" selected="selected"/>
  <option value="ru" label="ロシア語"/>
</select>

HTMLタグ

HTMLタグには次のものがある。