HTMLのoptionタグは、セレクトボックス(リストボックス)の選択肢を表わすタグです。この記事では、optionタグの使い方をサンプルを交えてご紹介します。
選択肢フィールドに項目を配置します。 <SELECT>と</SELECT>の間に記述することができます。<OPTGROUP>タグにより、項目をグループ化することができます。
開始タグと終了タグの間には、ラベル(選択肢に表示する文字列)を指定する。
<option>ラベル</option>
ラベルはlabel属性に指定することもできる。
<option label="ラベル"></option>
HTML では終了タグを省略できます。XHTML では省略できません。開始タグと終了タグの間には文字列が現れます。
HTMLの場合、属性名は大文字と小文字を区別しない。XHTMLの場合、属性名は小文字で記述する。
<option> タグには次の属性を指定できる。
<option value="ja">日本語</option>
value属性を省略した場合、<option>
と </option>
の間の文字列が選択されたときの値となる。
<option>ja</option>
省略可能。この属性を指定すると、選択不可能になります。
disabled属性を指定したoption要素は、ユーザの入力を受け付けない。このとき、ブラウザによっては入力を受け付けないことを示すために灰色表示になることがある。また、フォーカスの受け手とならず、タブ移動で飛び越される。disabled
属性を指定したoption
要素の値は、サブミット時にフォームデータを送信しない。
選択肢に表示する文字列を指定します。label属性を省略すると、<option>と</option>の間の文字列が表示されます。 Internet Explorer 6 ではlabel属性を指定しても選択肢には表示されないようです。
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タグには次のものがある。