selectの概要
select要素はプルダウンの選択式のメニューを実装することができるタグです。
注意点
select要素を使用するには、最低1つ以上のoption要素を入れ子させてあげる必要があります。またクローラーにちゃんと認識させるため（アクセシビリティ）label要素のfor属性とselect要素のid属性の名前は一致させましょう。
selectに使える属性
属性とは<select> タグ内に入れることのできるものです。属性をあてはめることにより、CSS・JavaScriptなどで操作する際に識別させることが可能になります。
よく使うグローバル属性
| id | 概要 | 要素に対してID固有の識別名を付けることができます。 |
|---|---|---|
| 属性の値 | 英字から始まる英数字 | |
| class | 概要 | 要素に対して分類名を付けることができます。 |
| 属性の値 | 英字から始まる英数字 | |
| style | 概要 | 要素に対して直接スタイルを指定することができます。 |
| 属性の値 | スタイルシートのコード |
selectに使える属性
| autocomplete | 概要 | フォーム内のオートコンプリート機能のデフォルト値を指定します。この設定はフォーム関連要素のautocomplete属性で上書きできます。 |
|---|---|---|
| 属性の値 | onまたはoff | |
| autofocus | 概要 | 要素に対してautofocus属性が存在が指定されている場合、ページ読み込み時にあらかじめフォームが選択された状態になります。 |
| 属性の値 | なし | |
| disabled | 概要 | 要素に対してdisabled属性が存在が指定されている場合、要素をクリックすることができなくなります。 |
| 属性の値 | なし | |
| form | 概要 | form要素と紐づけるために使用します。form属性はform要素のid属性と同じ名前でなければいけません。 |
| 属性の値 | form要素のid属性と同名 | |
| multiple | 概要 | multiple属性を付与すると、プルダウンから一覧に変更でき、ShiftまたはCtrlで複数選択することができるようになります。 |
| 属性の値 | なし | |
| name | 概要 | 属性に名前を付与する際に使用します。JavaScriptから要素に動作を与えたりすることができるようになります。 |
| 属性の値 | なし | |
| required | 概要 | その要素に対して選択が必須か否かを判定する属性です。 |
| 属性の値 | なし | |
| size | 概要 | ボックスのサイズを指定することができます。 |
| 属性の値 | 表示文字数 |
スポンサードサーチ
selectの使い方
ブラウザ対応状況
| ブラウザの対応（PC) | |
|---|---|
| Chrome | あり |
| Safari | あり |
| Internet Explorer | あり |
| Edge | あり |
| Firefox | あり |
| Opera | あり |
| ブラウザの対応（SP) | |
| Chrome | あり |
| Safari | あり |
| Samsung Internet | あり |