<select>~</select>
select（セレクト）要素はプルダウンメニューを表します。
子要素としてoption要素を持つことが可能で、option要素は選択肢として表示される。また、option要素はoptgroup要素でグループにすることができる。
また、子要素としてhr要素を持つことが可能で、これは選択肢が多い場合などに視認性を高めるための区切り線としても利用できる。
| select要素 | 説明 |
|---|---|
| カテゴリー | ・インタラクティブコンテンツ ・サブミット可能なフォーム関連要素 ・パルパブルコンテンツ ・フォーム関連要素 ・フレージングコンテンツ ・フローコンテンツ ・ラベル付け可能な要素 ・リスト可能なフォーム関連要素 ・リセット可能なフォーム関連要素 ・自動大文字化継承フォーム関連要素 |
| コンテンツモデル | 0個以上の option 要素、optgroup 要素、hr 要素、およびスクリプト支援要素 |
| 使用できる場所 | フレージングコンテンツが期待される場所 |
select要素で使用できる属性
グローバル属性
すべてのHTML要素で使用できる属性になります。
autocomplete属性
オートコンプリートの可否を指定する。下記の 2つの値が指定できる。
| 属性値 | 説明 |
|---|---|
| on | オートコンプリートを行う （初期値） |
| off | オートコンプリートを行わない |
disabled属性
フォームの入力コントロールやコマンドなどを無効にする。論理属性。
form属性
任意のform要素に付与したid属性値を指定することで、そのフォームと、form属性をもつ入力コントロールなどを関連付けることができる。
multiple属性
multiple属性はinput要素 （input type=”file”） やselect要素において、選択肢の複数選択を可能にする。論理属性。
対応するブラウザにおいては、select要素の選択肢やアップロードするファイルを Ctrl キーなどを押しながらクリックすることで、複数選択可能になる。
送信されるデータは、選択した内容がカンマ （,） 区切りで送信される。
name属性
要素に名前を付与する。この名前を使用して、JavaScript から要素にアクセスしたり、iframe要素に付与した名前はリンクのターゲットに使用したりすることができる。
required属性
入力コントロールへのデータ入力や選択を必須とする。この属性が指定された入力コントロールに値がない場合、対応するブラウザではフォームの送信が行われない。論理属性。
下記の条件では、required属性は無視される。
- 関連づけられた form 要素に novalidate 属性が付与され、入力内容の検証が無効になっているとき。
- 同じ入力コントロール要素に disabled 属性、または readonly 属性が付与されているとき。
size属性
ユーザエージェントが入力コントロールをレンダリングする際のサイズ （文字数） を指定する。1以上の正の整数を値として入力することが可能で、指定した文字数分が初期状態で表示できるように入力コントロールのサイズが調整される。
使用例
select要素内のoption要素にvalue属性あり
<form action="./select.php" method="post" target="_blank">
<p>
選択肢：
<select name="sampleName">
<option value="値Ａ">選択肢Ａ</option>
<option value="値Ｂ">選択肢Ｂ</option>
<option value="値Ｃ">選択肢Ｃ</option>
</select>
</p>
<p>
<button type="submit">送信</button>
</p>
</form>表示