HTML Tag Reference

option 要素

選択肢を表す

option 要素は select 要素によって作成されるプルダウンメニューの選択肢、または datalist 要素によって提供される入力候補の選択肢を表します。

option 要素の仕様

カテゴリ
  • なし
コンテンツモデル
  • option 要素が label 属性および value 属性を持つ場合は「空」
  • option 要素が label 属性を持つが value 属性を持たない場合は「テキスト」
  • option 要素が label 属性を持たない場合は「要素内の空白文字でないテキスト」
  • option 要素が label 属性を持たず、かつ datalist 要素の子要素である場合は「テキスト」
この要素を使用できる文脈

詳細説明

option 要素に指定可能な属性は下記の通りです。

属性 概要
value 属性 送信されるクエリ値を指定します。
label 属性 option 要素のラベルを指定します。
disabled 属性 この属性を指定された option 要素は、選択できない選択肢になります。 disabled属性は論理属性です。
selected 属性 この属性を指定された option 要素は、初期状態で選択された選択肢になります。selected 属性は論理属性です。

option 要素のサンプルソース

<select name="pref">
  <option value="">都道府県を選択してください</option>
 <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="東京都" selected="selected">東京都</option>
  <option value="神奈川県">神奈川県</option>
 </optgroup>
 <optgroup label="甲信越地方" disabled="disabled">
  <option value="山梨県">山梨県</option>
  …省略…
 </optgroup>
</select>
<!-- value 属性が省略された場合は、要素の内容となるテキストが値として送信されます -->
<select name="pref">
  <option value="">都道府県を選択してください</option>
 <optgroup label="北海道・東北地方">
  <option>北海道</option>
  <option>青森県</option>
  <option>岩手県</option>
  <option>宮城県</option>
  <option>秋田県</option>
  <option>山形県</option>
  <option>福島県</option>
 </optgroup>
 <optgroup label="関東地方">
  <option>群馬県</option>
  <option>栃木県</option>
  <option>茨城県</option>
  <option>埼玉県</option>
  <option>千葉県</option>
  <option selected="selected">東京都</option>
  <option>神奈川県</option>
 </optgroup>
 <optgroup label="甲信越地方" disabled="disabled">
  <option>山梨県</option>
  …省略…
 </optgroup>
</select>
<!-- label 属性と value 属性を同時に持つ場合、要素の内容は空 -->
<select name="pref">
  <option label="都道府県を選択してください" value=""></option>
 <optgroup label="北海道・東北地方">
  <option label="北海道" value="北海道"></option>
  <option label="青森県" value="青森県"></option>
  <option label="岩手県" value="岩手県"></option>
  <option label="宮城県" value="宮城県"></option>
  <option label="秋田県" value="秋田県"></option>
  <option label="山形県" value="山形県"></option>
  <option label="福島県" value="福島県"></option>
 </optgroup>
 <optgroup label="関東地方">
  <option label="群馬県" value="群馬県"></option>
  <option label="栃木県" value="栃木県"></option>
  <option label="茨城県" value="茨城県"></option>
  <option label="埼玉県" value="埼玉県"></option>
  <option label="千葉県" value="千葉県"></option>
  <option label="東京都" value="東京都" selected="selected"></option>
  <option label="神奈川県" value="神奈川県"></option>
 </optgroup>
 <optgroup label="甲信越地方" disabled="disabled">
  <option label="山梨県" value="山梨県"></option>
  …省略…
 </optgroup>
</select>

主要ブラウザの対応

IE11 ○
Edge（EdgeHTML） ○
Edge（Chromium） ○
Chrome ○
Firefox ○
Safari ○
iOS Safari ○
Android Chrome ○

関連する要素

仕様書の該当箇所

用途から目的の要素を探す

用途から HTML 要素を逆引きできます。