select要素 - ドロップダウンとリストで選択肢をえらぶフォーム部品

This page gently walks you through how to use the HTML select element to build dropdowns and list-style select boxes, and how to choose between single-choice and multi-select lists when creating forms.

select 要素

HTMLのselect要素（selectタグ）を使って、ドロップダウン式やスクロール式のセレクトボックスを作り、一つだけ選ぶ場合や複数選べるリストをどう使い分けるかを、フォーム初心者向けにゆっくり整理したページです。

select要素とは？

select要素は、セレクトボックスを作成する際に使用します。一般的なブラウザでは、ドロップダウン式のセレクトボックスや、スクロール式のセレクトウィンドウとして表示されます。

<select>～</select> でセレクトボックス全体を定義して、その中に option要素を配置して個々の選択肢リストを作成します。option要素で作成した選択肢を <optgroup>～</optgroup> で囲むと、選択肢をグループ化することができます。

multiple属性は、選択肢を複数選択できるようにする際に使用します。multiple属性を指定しない場合には、選択肢を1つだけ選択できるようになります。

パソコンでは、Ctrlキー（macOSではCommandキー）を押しながらクリックすると複数選択できます。ただし、スマートフォンでは端末ごとに表示や操作方法が変わるため、複数選択を使うときは実際の画面も確認しておきましょう。

size属性は、ユーザーに向けて表示する選択肢の数を指定する際に使用します。size属性の値として指定できるのは、1以上の正の整数です。size属性を指定しない場合、multiple属性がないときは1つだけ見えるドロップダウン表示になり、multiple属性があるときは、何行分を表示するかはブラウザ側の判断に任されます（多くのブラウザでは4行前後がよく使われます）。

尚、選択肢をあらかじめ選択状態にするには、option要素にselected属性を指定します。

※メモ：select要素は必ずボックスとして表示されるわけではありません。従って“セレクトボックス”という表現は正確ではありませんが、分かりやすさを優先しています。正確に解説するなら、「select要素は、選択肢リストから選択するための操作機能を表す要素です。」となります。

HTML4.01から HTML5へのバージョンアップによる変更点

select要素は、HTML4.01の頃からあるおなじみの要素ですが、HTML5以降では、新しくautofocus属性とform属性が使えるようになりました。既存の基本的な使い方はそのまま使えますが、「最初からフォーカスを当てたい」「離れた場所の<form>と結びつけたい」といった場面で便利になっています。

属性

autofocus属性: 自動フォーカスを指定する（autofocus）
disabled属性: 操作を無効にする（disabled）
form属性: どのフォームと関連付けるかを<form>のid名で指定
multiple属性: 選択肢を複数選択できるようにする（multiple）
name属性: セレクトボックスの名前を指定
size属性: 表示する選択肢の数を指定（1以上の正の整数）

使用例

HTML

<p>
	<label for="language">言語を選択してください：</label>
	<select id="language" name="language">
		<option value="en">英語</option>
		<option value="de">ドイツ語</option>
		<option value="fr">フランス語</option>
		<option value="ja" selected>日本語</option>
		<option value="zh">中国語</option>
	</select>
</p>
<p>
	<label for="contact">ご希望の連絡方法（複数選択可）：</label>
	<select id="contact" name="contact" multiple size="5">
		<option value="email" selected>電子メール</option>
		<option value="tel" selected>電話</option>
		<option value="fax" selected>ファックス</option>
		<option value="postal" selected>郵便</option>
		<option value="office">ご来店時に係員より説明</option>
	</select>
</p>

言語を選択してください：

ご希望の連絡方法（複数選択可）：

よくある質問（FAQ）

Q. ドロップダウンとスクロール式の違いは何ですか？: ブラウザや指定したsize属性の値によって、1行だけのドロップダウンとして表示されたり、複数行見えるスクロール式のリストとして表示されたりします。どちらも中身は同じselect要素で、「見た目だけ」が違うイメージです。
Q. 必須入力にしたいときはどうすればいいですか？: select要素にrequired属性を付けます。さらに、最初の選択肢を「選択してください」といった文言にして、value=""でdisabled属性とselected属性を付けておくと、送信前に必ず何かが選ばれるようにできます。
Q. 複数選択を使うときの注意点はありますか？: multiple属性を付けると複数選択できますが、パソコンとスマートフォンで操作方法や見た目が変わります。フォームを公開する前に、実際に使われそうな環境（PC／スマホ）でテストしておくと安心です。
Q. option要素のvalue属性には何を書けば良いですか？: ユーザーに見せる文字（ラベル）と、フォーム送信時にサーバーへ送る値（value属性の値）は分けて考えます。プログラムで扱いやすい短い英数字をvalueにし、画面側には日本語の分かりやすいラベルを表示するのがおすすめです。

よくあるエラー早見表

選択したはずの値がサーバー側で受け取れない: select要素にname属性が付いていないと、その項目はフォーム送信されません。idだけでなく、name属性が付いているか確認しましょう。
「選択してください」がそのまま送信されてしまう: 案内用のoptionにはvalue=""を指定し、disabled属性とselected属性を付けておくと送信されにくくなります。必須項目にしたい場合は、select要素にrequired属性も付けましょう。
複数選択が1つ分しか送信されない: サーバー側の受け取り方（言語やフレームワーク）によっては、同じnameの値が複数送られても1つ目しか拾わないことがあります。必要に応じて、nameを「contact[]」のように配列風にしたり、サーバー側の設定を見直したりしてください。
リストの高さが思った通りにならない: size属性が指定されていない場合、何行分表示するかはブラウザによって変わることがあります。見た目を揃えたいときは、size属性に具体的な行数を指定しましょう。