option要素とは
<
要素は、<option>
要素は、<select>
要素、<optgroup>
要素、または<datalist>
要素内で使用します
- 意味・役割
- 選択メニューの選択肢を表す要素
- 利用できるバージョン(HTML4.01以降)
- 全てのバージョン
- コンテンツ・カテゴリ
- なし
- コンテンツ・モデル(梱包できる要素)
-
- <option>要素にlabel属性とvalue属性が指定されている場合は 「空」
- <option>要素にlabel属性は指定されているが、value属性は指定されていない場合は 「テキスト」
- <option>要素にlabel属性が指定されていない場合は 「空白ではないテキスト」
- この要素を配置できる親要素
-
<select>
要素、<optgroup>
要素、<datalist>
要素
サンプルコード
<form action="" method="post">
<dl>
<dt><label for="job">職業</label></dt>
<dd>
<select name="job" id="job">
<option value="WEBディレクター">WEBディレクター</option>
<option value="WEBデザイナー">WEBデザイナー</option>
<option value="WEBプログラマー">WEBプログラマー</option>
<option value="フロントエンドエンジニア">フロントエンドエンジニア</option>
</select>
</dd>
</dl>
<p><input type="submit" value="送信"></p>
</form>
RERUN
option要素で使える属性
どの要素にでも使えるグローバル属性と以下の属性が使えます。
value属性
属性は、選択肢が選択された時に、送信する値を指定する属性です。
<option value="送信する値">
- 属性値
- 送信する値
- 利用できるバージョン(HTML4.01以降)
- 全てのバージョン
<select name="jobs">
<option value="WEBディレクター">WEBディレクター</option>
<option value="WEBデザイナー">WEBデザイナー</option>
<option value="WEBプログラマー">WEBプログラマー</option>
<option value="フロントエンドエンジニア">フロントエンドエンジニア</option>
</select>
RERUN
selected属性
属性は、予め選択状態にする属性です。
<option selected="selected">
- 属性値
-
"
selected
": 選択肢を予め選択状態にする - 利用できるバージョン(HTML4.01以降)
- 全てのバージョン
<select name="jobs">
<option value="WEBディレクター">WEBディレクター</option>
<option value="WEBデザイナー" selected="selected">WEBデザイナー</option>
<option value="WEBプログラマー">WEBプログラマー</option>
<option value="フロントエンドエンジニア">フロントエンドエンジニア</option>
</select>
RERUN
disabled属性
属性は、選択肢を無効にする属性です。
<option disabled="disabled">
- 属性値
-
"
disabled
": 選択肢を無効にする - 利用できるバージョン(HTML4.01以降)
- 全てのバージョン
<select name="jobs">
<option value="WEBディレクター">WEBディレクター</option>
<option value="WEBデザイナー" disabled="disabled">WEBデザイナー</option>
<option value="WEBプログラマー">WEBプログラマー</option>
<option value="フロントエンドエンジニア">フロントエンドエンジニア</option>
</select>
RERUN
label属性
属性は、
選択肢のラベルを指定する属性です。このlabel
属性を指定しない場合は、<option>
要素内のテキストがラベルとなります。
<option label="選択肢のラベル">
- 属性値
- 選択肢のラベル
- 利用できるバージョン(HTML4.01以降)
- 全てのバージョン
<select name="jobs">
<option label="WEBディレクター" value="WEBディレクター"></option>
<option label="WEBデザイナー" value="WEBデザイナー"></option>
<option label="WEBプログラマー" value="WEBプログラマー"></option>
<option label="フロントエンドエンジニア" value="フロントエンドエンジニア"></option>
</select>
RERUN
option要素のサンプル
都道府県のセレクトボックス
<form action="" method="post">
<dl>
<dt><label for="prefs">都道府県</label></dt>
<dd>
<select name="prefs" id="prefs">
<option value="">-- 都道府県を選択して下さい --</option>
<option value="北海道">北海道</option>
<option value="青森県">青森県</option>
<option value="岩手県">岩手県</option>
<option value="宮城県">宮城県</option>
<option value="秋田県">秋田県</option>
<option value="山形県">山形県</option>
<option value="福島県">福島県</option>
<option value="茨城県">茨城県</option>
<option value="栃木県">栃木県</option>
<option value="群馬県">群馬県</option>
<option value="埼玉県">埼玉県</option>
<option value="千葉県">千葉県</option>
<option value="東京都">東京都</option>
<option value="神奈川県">神奈川県</option>
<option value="新潟県">新潟県</option>
<option value="富山県">富山県</option>
<option value="石川県">石川県</option>
<option value="福井県">福井県</option>
<option value="山梨県">山梨県</option>
<option value="長野県">長野県</option>
<option value="岐阜県">岐阜県</option>
<option value="静岡県">静岡県</option>
<option value="愛知県">愛知県</option>
<option value="三重県">三重県</option>
<option value="滋賀県">滋賀県</option>
<option value="京都府">京都府</option>
<option value="大阪府">大阪府</option>
<option value="兵庫県">兵庫県</option>
<option value="奈良県">奈良県</option>
<option value="和歌山県">和歌山県</option>
<option value="鳥取県">鳥取県</option>
<option value="島根県">島根県</option>
<option value="岡山県">岡山県</option>
<option value="広島県">広島県</option>
<option value="山口県">山口県</option>
<option value="徳島県">徳島県</option>
<option value="香川県">香川県</option>
<option value="愛媛県">愛媛県</option>
<option value="高知県">高知県</option>
<option value="福岡県">福岡県</option>
<option value="佐賀県">佐賀県</option>
<option value="長崎県">長崎県</option>
<option value="熊本県">熊本県</option>
<option value="大分県">大分県</option>
<option value="宮崎県">宮崎県</option>
<option value="鹿児島県">鹿児島県</option>
<option value="沖縄県">沖縄県</option>
</select>
</dd>
</dl>
<p><input type="submit" value="送信"></p>
</form>
RERUN
エリアごとの都道府県セレクトボックス
<form action="" method="post">
<dl>
<dt><label for="prefs">都道府県</label></dt>
<dd>
<select name="prefs" id="prefs">
<option value="">-- 都道府県を選択して下さい --</option>
<optgroup label="北海道エリア">
<option value="北海道">北海道</option>
</optgroup>
<optgroup label="東北エリア">
<option value="青森県">青森県</option>
<option value="岩手県">岩手県</option>
<option value="宮城県">宮城県</option>
<option value="秋田県">秋田県</option>
<option value="山形県">山形県</option>
<option value="福島県">福島県</option>
</optgroup>
<optgroup label="関東エリア">
<option value="茨城県">茨城県</option>
<option value="栃木県">栃木県</option>
<option value="群馬県">群馬県</option>
<option value="埼玉県">埼玉県</option>
<option value="千葉県">千葉県</option>
<option value="東京都">東京都</option>
<option value="神奈川県">神奈川県</option>
</optgroup>
<optgroup label="中部エリア">
<option value="新潟県">新潟県</option>
<option value="富山県">富山県</option>
<option value="石川県">石川県</option>
<option value="福井県">福井県</option>
<option value="山梨県">山梨県</option>
<option value="長野県">長野県</option>
<option value="岐阜県">岐阜県</option>
<option value="静岡県">静岡県</option>
<option value="愛知県">愛知県</option>
</optgroup>
<optgroup label="近畿エリア">
<option value="三重県">三重県</option>
<option value="滋賀県">滋賀県</option>
<option value="京都府">京都府</option>
<option value="大阪府">大阪府</option>
<option value="兵庫県">兵庫県</option>
<option value="奈良県">奈良県</option>
<option value="和歌山県">和歌山県</option>
</optgroup>
<optgroup label="中国エリア">
<option value="鳥取県">鳥取県</option>
<option value="島根県">島根県</option>
<option value="岡山県">岡山県</option>
<option value="広島県">広島県</option>
<option value="山口県">山口県</option>
</optgroup>
<optgroup label="四国エリア">
<option value="徳島県">徳島県</option>
<option value="香川県">香川県</option>
<option value="愛媛県">愛媛県</option>
<option value="高知県">高知県</option>
</optgroup>
<optgroup label="九州エリア">
<option value="福岡県">福岡県</option>
<option value="佐賀県">佐賀県</option>
<option value="長崎県">長崎県</option>
<option value="熊本県">熊本県</option>
<option value="大分県">大分県</option>
<option value="宮崎県">宮崎県</option>
<option value="鹿児島県">鹿児島県</option>
<option value="沖縄県">沖縄県</option>
</optgroup>
</select>
</dd>
</dl>
<p><input type="submit" value="送信"></p>
</form>
RERUN
仕様
- HTML5.1
- 4.10.10. The option element
関連する要素
<form>
要素<input>
要素<textarea>
要素<select>
要素<optgroup>
要素<button>
要素<label>
要素<fieldset>
要素<legend>
要素