<option> セレクトボックスの選択肢を作成する
取り扱い | 現行の標準 |
カテゴリ |
なし |
親にできる要素 | <select> 、<optgroup> 、<menu> |
子にできる要素 | 通常のテキスト |
対応ブラウザ | caniuseで確認 |
<option>タグの説明
<option>
は、入力フォームの中でセレクトボックスを作成する祭に、選択肢となる項目を定義するために使います。具体的には、<select>
や<datalist>
といったプルダウン式のメニューの中で、その項目を作成するための要素です。
この要素で増やした項目は、<optgroup>
でラベリングして階層を与えることもできます。
<option>タグの特徴
- レイアウトには影響を与えません。セレクト項目の一覧表を展開した時にメニューとして表示されます。
- 同一のページ内に複数使うことができます。ただし、この要素自体を入れ子にすることはできません。
<option>に指定できる主な属性
- value
- 選択したときに送信されるデータを指定します。
- label
- 選択肢として表示される項目を指定します。この属性が定義されていない場合は、要素に含まれる文字列が表示されます。
- disabled
- この属性が与えられた項目は選択不能になります。これは論理属性です。
- selected
- あらかじめ選択された状態を指定します。これは論理属性です。
- グローバル属性
- 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
- イベントハンドラ
- 全てのHTML要素に指定できるコンテンツ属性です。
<option>の使い方とサンプル
このタグを使ったマークアップのサンプルです。
HTML
基本的な形式のセレクトメニュー。<br>
<select name="menu_basic">
<option value="1a">選択項目1</option>
<option value="1b">選択項目2</option>
<option value="1c">選択項目3</option>
</select>
表示確認
ラベルと組み合わせた場合のサンプルです。
HTML
ラベルと組み合わせたセレクトメニュー。<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>
表示確認
特定の項目をあらかじめ選択しておきたい場合のサンプルです。
HTML
特定の項目をあらかじめ選択しておく。<br>
<select name="menu_selected">
<option value="4a">選択項目1</option>
<option value="4b">選択項目2</option>
<option value="4c" selected>選択項目3</option>
</select>
表示確認
特定の項目を操作できないようにした場合のサンプルです。
HTML
メニューを操作できないようにする。<br>
<select name="menu_disabled">
<option value="3a">選択項目1</option>
<option value="3b" disabled>選択項目2</option>
<option value="3c" disabled>選択項目3</option>
</select>
表示確認