OPTION HTML要素タイプ(タグ)

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タグには次のものがある。