option 要素選択肢を表す

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

さらに詳細な説明を見る

サンプルソースを見る

option 要素の仕様

カテゴリ
  • なし
コンテンツモデル
  • option 要素が label 属性および value 属性を持つ場合は「空」
  • option 要素が label 属性を持つが value 属性を持たない場合は「テキスト」
  • option 要素が label 属性を持たない場合は「要素内の空白文字でないテキスト」
この要素を使用できる文脈
この要素で使用できる属性
DOM インタフェース
[NamedConstructor=Option(),
 NamedConstructor=Option(DOMString text),
 NamedConstructor=Option(DOMString text, DOMString value),
 NamedConstructor=Option(DOMString text, DOMString value, boolean defaultSelected),
 NamedConstructor=Option(DOMString text, DOMString value, boolean defaultSelected, boolean selected)]
interface HTMLOptionElement : HTMLElement {
           attribute boolean disabled;
  readonly attribute HTMLFormElement? form;
           attribute DOMString label;
           attribute boolean defaultSelected;
           attribute boolean selected;
           attribute DOMString value;

           attribute DOMString text;
  readonly attribute long index;
};

詳細説明

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>

W3C HTML5 仕様書

4.10.12 The option element