HTML Tag Reference

select 要素

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

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

また、子要素として hr 要素を持つことが可能で、これは選択肢が多い場合などに視認性を高めるための区切り線としても利用できます。

select 要素の仕様

コンテンツモデル
  • 0個以上の option 要素、optgroup 要素、hr 要素、およびスクリプト支援要素
この要素を使用できる文脈

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

詳細説明

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

属性 概要
name 属性 データが送信される際のクエリ名を指定します。
multiple 属性 複数の選択肢を選択を可能にします。
disabled 属性 入力コントールを無効にします。
form 属性 任意の form 要素に付与された id 属性値を指定することで関連付けを行います。
autocomplete 属性 オートコンプリートの可否を指定します。
required 属性 該当する select 要素を、必ず選択しなければならないプルダウンメニューとします。
size 属性 閲覧者に表示する選択肢の数を指定します。初期値は、multiple 属性が指定されている場合で 「4」、multiple 属性が指定されていない場合で 「1」 です。
multiple 属性、および size="10" を付与した select 要素の例

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>東京都</option>
  <option value="神奈川県">神奈川県</option>
 </optgroup>
 <optgroup label="甲信越地方" disabled="disabled">
  <option value="山梨県">山梨県</option>
  …省略…
 </optgroup>
</select>
<!-- hr 要素を区切りに使用した例 -->
<select name="pref">
  <option value="">都道府県を選択してください</option>
  <hr>
  <option value="北海道">北海道</option>
  <hr>
  <option value="青森県">青森県</option>
  <option value="岩手県">岩手県</option>
  <option value="宮城県">宮城県</option>
  <option value="秋田県">秋田県</option>
  <option value="山形県">山形県</option>
  <option value="福島県">福島県</option>
  <hr>
  <option value="群馬県">群馬県</option>
  <option value="栃木県">栃木県</option>
  <option value="茨城県">茨城県</option>
  <option value="埼玉県">埼玉県</option>
  <option value="千葉県">千葉県</option>
  <option value="東京都" selected>東京都</option>
  <option value="神奈川県">神奈川県</option>
  <hr>
  <option value="山梨県">山梨県</option>
  …省略…
</select>

主要ブラウザの対応

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

関連する要素

仕様書の該当箇所

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

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