select 要素プルダウンメニューを表す

select 要素はプルダウンメニューを表します。子要素として option 要素を持つことが可能で、option 要素は選択肢として表示されます。また、option 要素は optgroup 要素でグループにすることができます。

さらに詳細な説明を見る

サンプルソースを見る

select 要素の仕様

カテゴリ
コンテンツモデル
  • 0個以上の option または optgroup 要素
この要素を使用できる文脈

フレージング・コンテンツが期待される場所

この要素で使用できる属性
DOM インタフェース
interface HTMLSelectElement : HTMLElement {
           attribute boolean autofocus;
           attribute boolean disabled;
  readonly attribute HTMLFormElement? form;
           attribute boolean multiple;
           attribute DOMString name;
           attribute boolean required;
           attribute unsigned long size;

  readonly attribute DOMString type;

  readonly attribute HTMLOptionsCollection options;
           attribute unsigned long length;
  getter Element item(unsigned long index);
  object namedItem(DOMString name);
  void add((HTMLOptionElement or HTMLOptGroupElement) element, optional (HTMLElement or long)? before = null);
  void remove(long index);
  setter creator void (unsigned long index, HTMLOptionElement? option);

  readonly attribute HTMLCollection selectedOptions;
           attribute long selectedIndex;
           attribute DOMString value;

  readonly attribute boolean willValidate;
  readonly attribute ValidityState validity;
  readonly attribute DOMString validationMessage;
  boolean checkValidity();
  void setCustomValidity(DOMString error);

  readonly attribute NodeList labels;
};

詳細説明

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

属性 概要
name 属性 データが送信される際のクエリ名を指定します。
multiple 属性 複数の選択肢を選択を可能にします。
disabled 属性 入力コントールを無効にします。
form 属性 任意の form 要素に付与された id 属性値を指定することで関連付けを行います。
autofocus 属性 文書読み込み時、自動的にフォーカスさせます。
required 属性 該当する select 要素を、必ず選択しなければならないプルダウンメニューとします。
size 属性 閲覧者に表示する選択肢の数を指定します。初期値は、multiple 属性が指定されている場合で 「4」、multiple 属性が指定されていない場合で 「1」 です。

select 要素のサンプルソース

<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>

W3C HTML5 仕様書

4.10.9 The select element