Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

select 要素

概要

HTML の select 要素(<select>)は、選択式のメニューを提供するコントロールを表します。メニューの中にある選択肢は、 <optgroup> 要素でグループ化することのできる、 <option> 要素で表されます。ユーザーのため、選択肢をあらかじめ選択しておくことができます。

使用可能な場所

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

属性

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

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

DOM インターフェイス

この要素は、 HTMLSelectElement インターフェースを実装しています。

<!-- 最初に 2 番目の値が選択されます。 -->
<select name="select">
  <option value="value1">Value 1</option> 
  <option value="value2" selected>Value 2</option>
  <option value="value3">Value 3</option>
</select>

結果

注意

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

編集可能な選択肢を持つセレクトボックスをシミュレーションする方法の例を、以下に示します。注意: スクリーンリーダーや支援技術は以下フォームと正しく対話できません。この例は正しい要素を使用していても妥当ではない HTML です:

ラジオボタンテキストボックスを持った <fieldset> を使用して、 select 要素をエミュレートするサンプル (JavaScript を使わず、純粋な CSS で書かれている)。

仕様

仕様書 策定状況 コメント
HTML5
The definition of '<select>' in that specification.
勧告  
HTML 4.01 Specification
The definition of '<select>' in that specification.
勧告  

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 1.0 1.0 (1.7 or earlier) (有) (有) (有)
required 属性 (有) 4.0 (2.0) 10 (有) (有)
機能 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート (有) [1] 1.0 (1.0) [2] (有) (有) (有)
required 属性 (有) 4.0 (2.0) 未サポート (有) (有)

[1] Android 4.1 (おそらく以降のバージョンも含む) のブラウザアプリでは backgroundborder、または border-radius のスタイルを <select> へ適用した場合に、<select> の横にある三角印のメニューインジケータが表示されないバグがあります。

[2] Android 版 Firefox はデフォルトで、すべての <select multiple> 要素に background-image でグラデーションを設定します。これは background-image: none を使用して無効化できます。

Chrome および Safari は <select> で、-webkit-appearance を適切な値でオーバーライドしなければ border-radius を無視します。

関連情報

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

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