HTML の <select> 要素は、選択式のメニューを提供するコントロールを表します。
| コンテンツカテゴリー | フローコンテンツ、フレージングコンテンツ、インタラクティブコンテンツ、リスト化、ラベル付け可能、リセット可能、および サブミット可能 な フォーム関連コンテンツ 要素 |
|---|---|
| 許可された内容 | 0 個以上の <option> 要素または <optgroup> 要素 |
| タグの省略 | 不可。開始と終了タグの両方が必要。 |
| 許可された親要素 | フレージングコンテンツを受け入れるすべての要素 |
| 許可された ARIA ロール | menu |
| DOM インターフェイス | HTMLSelectElement |
属性
この要素は グローバル属性 を持っています。
autofocusHTML5- この属性は、例えば異なるコントロールで入力していることによってユーザーがそれを覆すような場合を除き、ページが読み込まれた際、フォームコントロールが入力フォーカスを持つべきことを指定できるようにします。文書内の 1 つのフォーム要素のみが、真偽値である、
autofocus属性を持つことができます。 disabled- この真偽値属性は、ユーザーがそのコントロールを利用することができないことを示します。もしこの属性が指定されていない場合、コントロールはその設定を親要素、例えば
fieldset要素から継承します。もし親要素にdisabled属性を持つものがなければ、そのコントロールは利用可能です。 formHTML5- この属性で、select 要素が関連付けられた form 要素（フォームの所有者）を指定できます。属性値は同じ文書内の form 要素の ID でなければなりません。この属性によって、select 要素を、form 要素の子孫としてだけでなく、文書内の任意の場所に置くことができます。
multiple- この真偽値属性は、リストの複数の選択肢を選択することができることを示します。指定されていない場合は、一度に選択することができるのは 1 つの選択肢のみです。
name- この属性は、コントロールの名前を指定するために使用します。
requiredHTML5- 空ではない文字列の値の選択肢を選択しなければならないことを示す真偽値属性です。
size- もしコントロールがスクロールリストボックスとして表される場合、この属性は一度に見えるべきリストの行数を表します。ブラウザーは、 select 要素をスクロールリストボックスとして提供する必要はありません。初期値は 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> の定義 |
勧告 |
ブラウザー実装状況
| 機能 | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| 基本サポート | 1.0 | (有) | 1.0 (1.7 or earlier) [3] | (有) | (有) | (有) |
required 属性 |
(有) | (有) | 4.0 (2.0) | 10 | (有) | (有) |
| 機能 | Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| 基本サポート | (有) [1] | (有) | 1.0 (1.0) [2] | (有) | (有) | (有) |
required 属性 |
(有) | (有) | 4.0 (2.0) | 未サポート | (有) | (有) |
[1] Android 4.1 (おそらく以降のバージョンも含む) のブラウザーアプリでは background、border、または border-radius のスタイルを <select> へ適用した場合に、<select> の横にある三角印のメニューインジケーターが表示されないバグがあります。
[2] Android 版 Firefox はデフォルトで、すべての <select multiple> 要素に background-image でグラデーションを設定します。これは background-image: none を使用して無効化できます。
[3] 歴史的に、Firefox はキーボードやマウスのイベントが <option> 要素から親の <select> 要素に伝播することを許可してきました。これは Chrome では発生しませんが、この動作は多くのブラウザー間で一貫性がありません。ウェブ互換性を高めるため (および技術的な理由で)、Firefox がマルチプロセスモードであり <select> 要素がドロップダウンリストとして表示されるときに、<select> がインラインで提供されていて multiple 属性が定義されているか size 属性が 1 より大きければ、動作は変わりません。イベントのために <option> 要素を監視するのではなく、<select> の change イベントを監視してください。詳しくは バグ 1090602 をご覧ください。
Chrome および Safari は <select> で、-webkit-appearance を適切な値でオーバーライドしなければ border-radius を無視します。
関連情報
- フォームに関連する他の要素。
<form>、<legend>、<label>、<button>、<option>、<datalist>、<optgroup>、<fieldset>、<textarea>、<keygen>、<input>、<output>、<progress>、<meter>。 <select>で発生するイベント: change