HTML の <select> 要素は、選択式のメニューを提供するコントロールを表します。

コンテンツカテゴリー フローコンテンツフレージングコンテンツインタラクティブコンテンツリスト化ラベル付け可能リセット可能、および サブミット可能フォーム関連コンテンツ 要素
許可された内容 0 個以上の <option> 要素または <optgroup> 要素
タグの省略 不可。開始と終了タグの両方が必要。
許可された親要素 フレージングコンテンツを受け入れるすべての要素
許可された ARIA ロール menu
DOM インターフェイス HTMLSelectElement

属性

この要素は グローバル属性 を持っています。

autofocus HTML5
この属性は、例えば異なるコントロールで入力していることによってユーザーがそれを覆すような場合を除き、ページが読み込まれた際、フォームコントロールが入力フォーカスを持つべきことを指定できるようにします。文書内の 1 つのフォーム要素のみが、真偽値である、 autofocus 属性を持つことができます。
disabled
この真偽値属性は、ユーザーがそのコントロールを利用することができないことを示します。もしこの属性が指定されていない場合、コントロールはその設定を親要素、例えば fieldset 要素から継承します。もし親要素に disabled 属性を持つものがなければ、そのコントロールは利用可能です。
form HTML5
この属性で、select 要素が関連付けられた form 要素(フォームの所有者)を指定できます。属性値は同じ文書内の form 要素の ID でなければなりません。この属性によって、select 要素を、form 要素の子孫としてだけでなく、文書内の任意の場所に置くことができます。
multiple
この真偽値属性は、リストの複数の選択肢を選択することができることを示します。指定されていない場合は、一度に選択することができるのは 1 つの選択肢のみです。
name
この属性は、コントロールの名前を指定するために使用します。
required HTML5
空ではない文字列の値の選択肢を選択しなければならないことを示す真偽値属性です。
size
もしコントロールがスクロールリストボックスとして表される場合、この属性は一度に見えるべきリストの行数を表します。ブラウザーは、 select 要素をスクロールリストボックスとして提供する必要はありません。初期値は 0 です。
Firefox の注意: HTML5 の仕様によると、size 属性の初期値は 1 であるべきとされています。しかしながら、実際のところは、このことによっていくつかのウェブサイトを壊してしまうことがわかり、他のブラウザーでも現在そうしているものはなく、Mozilla は当分の間、Firefox でも 0 を返し続けることを選択しました。

<!-- 最初に 2 番目の値が選択されます。 -->
<select name="select"> <!-- 'name' を使用する代わりに id を補います -->
  <option value="value1">Value 1</option> 
  <option value="value2" selected>Value 2</option>
  <option value="value3">Value 3</option>
</select>

結果

注意

この要素の内容は静的で、編集可能 ではありません。

仕様

仕様書 策定状況 コメント
HTML Living Standard
<select> の定義
現行の標準  
HTML5
<select> の定義
勧告  
HTML 4.01 Specification
<select> の定義
勧告  

ブラウザー実装状況

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本サポート 有り2 有り13 有り 有り 有り2
autofocus 有り 有り1 有り 有り 有り
disabled 有り 有り1 有り 有り 有り
form 有り 有り1 有り 有り 有り
multiple 有り 有り1 有り 有り 有り
name 有り 有り1 有り 有り 有り
required 有り 有り410 有り 有り
size 有り 有り1 有り 有り 有り
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
基本サポート 有り1 2 有り2 有り44 有り 有り 有り2
autofocus 有り 有り 有り4 有り 有り 有り
disabled 有り 有り 有り4 有り 有り 有り
form 有り 有り 有り4 有り 有り 有り
multiple 有り 有り 有り4 有り 有り 有り
name 有り 有り 有り4 有り 有り 有り
required 有り 有り 有り4 無し 有り 有り
size 有り 有り 有り4 有り 有り 有り

1. In the Browser app for Android 4.1 (and possibly later versions), there is a bug where the menu indicator triangle on the side of a <select> will not be displayed if a background, border, or border-radius style is applied to the <select>.

2. border-radius on <select> elements is ignored unless -webkit-appearance is overridden to an appropriate value.

3. Historically, Firefox has allowed keyboard and mouse events to bubble up from the <option> element to the parent <select> element, although this behavior is inconsistent across many browsers. For better Web compatibility (and for technical reasons), when Firefox is in multi-process mode the <select> element is displayed as a drop-down list. The behavior is unchanged if the <select> is presented inline and it has either the multiple attribute defined or a size attribute set to more than 1. Rather than watching <option> elements for events, you should watch for change events on <select>. See bug 1090602 for details.

4. Firefox for Android, by default, sets a background-image gradient on all <select multiple> elements. This can be disabled using background-image: none.

関連情報

ドキュメントのタグと貢献者

 このページの貢献者: yyss, ethertank, sii
 最終更新者: yyss,