<option>タグの解説
<option>は、選択式のメニューの中に項目を作成します。<select>や<datalist>の中に配置され、プルダウン式のメニューに表示される項目の内容や値を定義します。
<option>は、あらかじめ用意した情報の中からユーザーが選択したものサーバーやスクリプトに送信することを前提に使用します。そのため、<form>で作られる機能の一部に組み込まれることが多い要素です。
この要素で作成した項目は、<optgroup>でグループ化して見出しをつけることができます。選択肢の多いメニューを設置する場合に活用しましょう。
<option>タグの特徴
- レイアウトには影響を与えません。セレクト項目の一覧表を展開した時にメニューとして表示されます。
- 同一のページ内に複数使うことができます。ただし、この要素自体を入れ子にすることはできません。
<option>要素に指定できる属性
value- 選択したときに送信されるデータを指定します。この属性を省略すると、要素の中に含まれる文字列が値となります。
label- 選択肢として表示される項目を指定します。この属性が定義されていない場合は、要素に含まれる文字列が表示されます。
disabled- ユーザーの操作を受け付けない状態にします。既定値ではインターフェイスの色が薄くなり、クリックやフォーカスなどのイベントに反応しなくなります。これは値のない論理属性です。
selected- あらかじめ選択された状態を指定します。これは値のない論理属性です。
- グローバル属性
- 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
- イベントハンドラ
- 全てのHTML要素に指定できるコンテンツ属性です。
<option>要素の使い方とサンプルコード
この要素の最も基本的な書き方は以下の通りです。基本的には<select>か<datalist>の子要素に配置します。場合によっては<optgroup>でグループ化します。ユーザー側に表示する内容と送信するデータが同一の場合はvalue属性を省略できます。
<select name="key">
<option value="1">メニュー項目１</option>
<option value="2">メニュー項目２</option>
<option value="3">メニュー項目３</option>
</select>
label属性で項目に表示させる内容を指定する
項目名としてリストに表示させるテキストはlabel属性の値でも指定できます。構文の規則を守る限り終了タグを省略できるので、以下のように記述できます。この場合、要素の内容が空になるので必ずvalue属性で値を定義します。
<select name="key">
<option value="1" label="ラベル項目１">
<option value="2" label="ラベル項目２">
<option value="3" label="ラベル項目３">
</select>
disabled属性で選択できない項目を指定する
ユーザーの操作を受け付けない項目を作成する場合は、disabled属性を指定します。前のページの状態や他のデータフィールドの値によって、選択できる項目を制限したい場合などに活用できます。
<select name="key">
<option value="1" label="選択できる項目">
<option value="2" label="選択できない項目" disabled>
<option value="3" label="選択できる項目">
</select>
selected属性であらかじめ選択しておく項目を指定する
初期状態であらかじめ選択しておきたい項目がある場合は、selected属性を指定します。この属性は一連のリストの中で一箇所しか指定できません。<select>がmultiple属性を持つ場合は複数の指定が可能です。
<select name="key">
<option value="1" label="メニュー項目１">
<option value="2" label="メニュー項目２">
<option value="3" label="メニュー項目３" selected>
</select>
<select name="key" multiple>
<option value="1" label="メニュー項目１">
<option value="2" label="メニュー項目２" selected>
<option value="3" label="メニュー項目３" selected>
</select>