概要
HTML の select 要素（<select>）は、選択式のメニューを提供するコントロールを表します。メニューの中にある選択肢は、 <optgroup> 要素でグループ化することのできる、 <option> 要素で表されます。ユーザーのため、選択肢をあらかじめ選択しておくことができます。
使用可能な場所
| コンテンツカテゴリ | フローコンテンツ、フレージングコンテンツ、インタラクティブコンテンツ、リスト化、ラベル付け可能、リセット可能、およびサブミット可能なフォーム関連コンテンツ要素 |
| 許可された内容 | 0 個以上の <option> 要素または <optgroup> 要素。 |
| タグの省略 | 不可。開始タグと終了タグの両方が必要です。 |
| 許可された親要素 | フレージングコンテンツを受け入れる全ての要素。 |
属性
この要素はグローバル属性を持っています。
autofocusHTML5- この属性は、例えば異なるコントロールで入力していることによってユーザーがそれを覆すような場合を除き、ページが読み込まれた際、フォームコントロールが入力フォーカスを持つべきことを指定できるようにします。文書内の 1 つのフォーム要素のみが、真偽値である、
autofocus属性を持つことができます。 disabled- この真偽値属性は、ユーザーがそのコントロールを利用することができないことを示します。もしこの属性が指定されていない場合、コントロールはその設定を親要素、例えば
fieldset要素から継承します。もし親要素にdisabled属性を持つものが無ければ、そのコントロールは利用可能です。 formHTML5- その select 要素が関連付けられた form 要素（フォームの所有者）です。属性値は同じ文書内の form 要素の ID でなければなりません。もしこの属性が指定されていない場合、その select 要素は form 要素の子孫でなければなりません。この属性によって、 select 要素を、 form 要素の子孫としてだけでなく、文書内の任意の場所に置くことができます。
multiple- この真偽値属性は、リストの複数の選択肢を選択することができることを示します。指定されていない場合は、一度に選択することができるのは 1 つの選択肢のみです。
name- コントロールの名前です。
requiredHTML5- 空ではない文字列の値の選択肢を選択しなければならないことを示す真偽値属性です。
size- もしコントロールがスクロールリストボックスとして表される場合、この属性は一度に見えるべきリストの行数を表します。ブラウザは、 select 要素をスクロールリストボックスとして提供する必要はありません。初期値は 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 <select> の定義 |
勧告 | |
| HTML 4.01 Specification <select> の定義 |
勧告 |
ブラウザ実装状況
| 機能 | 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 (おそらく以降のバージョンも含む) のブラウザアプリでは background、border、または border-radius のスタイルを <select> へ適用した場合に、<select> の横にある三角印のメニューインジケータが表示されないバグがあります。
[2] Android 版 Firefox はデフォルトで、すべての <select multiple> 要素に background-image でグラデーションを設定します。これは background-image: none を使用して無効化できます。
Chrome および Safari は <select> で、-webkit-appearance を適切な値でオーバーライドしなければ border-radius を無視します。
関連情報
- フォームに関連する他の要素。
<form>、<legend>、<label>、<button>、<option>、<datalist>、<optgroup>、<fieldset>、<textarea>、<keygen>、<input>、<output>、<progress>and<meter>。