<option> セレクトボックスの選択肢を作成する

<option>タグの説明

<option>は、入力フォームの中でセレクトボックスを作成する祭に、選択肢となる項目を定義するために使います。具体的には、<select>や<datalist>といったプルダウン式のメニューの中で、その項目を作成するための要素です。

この要素で増やした項目は、<optgroup>でラベリングして階層を与えることもできます。

<option>タグの特徴

• レイアウトには影響を与えません。セレクト項目の一覧表を展開した時にメニューとして表示されます。
• 同一のページ内に複数使うことができます。ただし、この要素自体を入れ子にすることはできません。

<option>に指定できる主な属性

value

選択したときに送信されるデータを指定します。

label

選択肢として表示される項目を指定します。この属性が定義されていない場合は、要素に含まれる文字列が表示されます。

disabled

この属性が与えられた項目は選択不能になります。これは論理属性です。

selected

あらかじめ選択された状態を指定します。これは論理属性です。

グローバル属性

全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。

イベントハンドラ

全てのHTML要素に指定できるコンテンツ属性です。

<option>の使い方とサンプル

このタグを使ったマークアップのサンプルです。

基本的な形式のセレクトメニュー。<br>
<select name="menu_basic">
	<option value="1a">選択項目1</option>
	<option value="1b">選択項目2</option>
	<option value="1c">選択項目3</option>
</select>

ラベルと組み合わせた場合のサンプルです。

ラベルと組み合わせたセレクトメニュー。<br>
<select name="menu_label">
	<option value="2a" label="ラベル1">選択項目1</option>
	<option value="2b" label="ラベル2">選択項目2</option>
	<option value="2c" label="ラベル3">選択項目3</option>
</select>

特定の項目をあらかじめ選択しておきたい場合のサンプルです。

特定の項目をあらかじめ選択しておく。<br>
<select name="menu_selected">
	<option value="4a">選択項目1</option>
	<option value="4b">選択項目2</option>
	<option value="4c" selected>選択項目3</option>
</select>

特定の項目を操作できないようにした場合のサンプルです。

メニューを操作できないようにする。<br>
<select name="menu_disabled">
	<option value="3a">選択項目1</option>
	<option value="3b" disabled>選択項目2</option>
	<option value="3c" disabled>選択項目3</option>
</select>