HTMLのselectタグ徹底解説！ドロップダウンリストの作り方と使いどころ

HTMLの<select>タグは、ユーザーが1つまたは複数の選択肢を選べるリスト（セレクトボックス）を作成するための要素です。<select>タグの中には、ユーザーが選択できる選択肢を表す<option>タグを1つ以上配置します。

セレクトボックスは多くのWebフォームにおいて重要な役割を担っています。ユーザーの入力を受け付けながら、選択できる項目をあらかじめ指定したものだけに限定できる点が大きな特徴です。

本記事では、HTMLの<select>タグの基本的な使い方から、実際のコード例、利用できる属性までをわかりやすく解説します。

HTMLフォームの基本

フォームは多くのWebサイトに欠かせない要素であり、ユーザーからデータを受け取り、サイト側で処理することを可能にします。たとえば、コーヒーショップのWebサイトを制作しているなら、お客様からのフィードバックを受け付けるフォームを作りたいと考えるでしょう。

HTMLでは<form>タグでフォームを宣言し、その中に<input>や<select>といった要素を配置することで、フォームが収集するデータを定義します。本記事では、特に<select>タグに焦点を当て、フォームでのデータ収集の方法を紹介します。

HTML <select>タグとは

HTMLの<select>タグは、ユーザーが1つまたは複数の選択肢を選べるリストを生成します。<option>要素は、<select>タグ内の個々の選択肢を表します。

<select>タグは、クリックすると選択肢が並んだドロップダウンリストを表示するフォーム部品を作成します。

<select>タグの基本構文は以下の通りです。

<select></select>

<select>タグ単体では選択肢は何も表示されません。<option>タグを使って、リストに表示される選択肢を定義する必要があります。

<option>タグの構文は以下の通りです。

<select>
	<option value="optionOne">Option One</option>
</select>

<option>タグは<select>タグの中に記述します。上の例では、value属性も併せて指定しています。

value属性は、ユーザーが特定の選択肢を選んだ際にサーバーへ送信されるデータ値を格納するために使います。この例では、ユーザーが「Option One」を選択すると、「optionOne」という値がサーバーに送信されます。

各<option>タグには、必ずvalue属性を指定するようにしましょう。

なお、HTMLの<select>タグは、すべての主要なモダンブラウザでサポートされています。

<select>タグを使うべき場面

<select>タグは、フォームに入力できる値をあらかじめ決められた選択肢に制限したい場合に便利です。以下のようなケースで活用できます。

• 国の一覧から選択してもらう
• 商品の在庫カラーから選択してもらう
• 購入数量（1〜10個など）を選択してもらう

こうした場面では選択肢が限られています。ドロップダウンメニューを使えば、コードが想定している範囲内の回答だけを受け取れます。テキスト入力欄と異なり、ユーザーが予期しない自由な値を入力してしまう心配がないためです。

HTML <select>タグの実装例

ここで、地元のパン屋さんのWebフォームを作成する例を見てみましょう。パンを注文できるフォームの作成を依頼され、パンの種類を選べるドロップダウンリストを用意することになりました。表示すべき選択肢は以下の4つです。

• プレーンホワイト
• プレーンブラウン
• 全粒粉
• サワードウ

デフォルトでは「プレーンホワイト」が選択された状態にします。

このドロップダウンメニューは、次のようなコードで実現できます。

<select name="breadType">
	<option value="plainWhite" selected>プレーンホワイト</option>
	<option value="plainBrown">プレーンブラウン</option>
	<option value="wholeGrain">全粒粉</option>
	<option value="sourdough">サワードウ</option>
</select>

まず<select>タグでセレクトボックスを定義し、name属性に「breadType」を指定しています。name属性は、フォームコントロールの名前を示すものです。

続いて、4つの<option>タグでユーザーに表示する選択肢を作成しています。それぞれの<option>タグにはvalue属性が指定されており、フォーム送信時にサーバーへ送られる値を格納します。

最初の<option>タグ（ラベル：「プレーンホワイト」）にはselected属性が指定されています。これにより、「プレーンホワイト」がデフォルトで選択された状態になります。

multiple属性を使うと、ユーザーが複数の選択肢を選べるようになります。

<select name="breadType" multiple>
  	<option value="plainWhite" selected>プレーンホワイト</option>
	<option value="plainBrown">プレーンブラウン</option>
	<option value="wholeGrain">全粒粉</option>
	<option value="sourdough">サワードウ</option>
</select>

multiple属性はキーワード属性（論理属性）のため、イコール（=）で値を代入する必要はありません。

複数の値を選択するには、WindowsではCtrlキー、MacではCmdキーを押しながらクリックします。

<select>タグで使える主な属性

<select>タグには、以下のような専用のHTML属性を指定できます。

属性	値	説明
autofocus	autofocus	ページ読み込み時にドロップダウンリストへフォーカスを当てる
disabled	disabled	ドロップダウンリストを無効化する（ユーザーが値を選択・送信できなくなる）
form	form_id	<select>要素を関連付けるフォームを指定する
multiple	multiple	複数の選択肢を選択できるようにする
name	name	要素の名前を指定する
required	required	フォーム送信前に必ず選択が必要であることを示す
size	number	ユーザーに表示する選択肢の数を指定する

まとめ

HTMLの<select>要素は、あらかじめ定義された値のリストを表示するフォーム部品を作成します。ユーザーはリストから1つ、または複数の値を選択できます。ユーザーに候補の中から値を選ばせたい場合に、<select>フィールドは非常に役立ちます。

本記事では、具体例を挙げながら、<select>タグを使ってHTMLでドロップダウンリストを作成する方法を解説しました。

HTMLについてさらに学びたい方は、HTML学習ガイドもぜひ参考にしてください。効率的な学習のコツや、知識を深めるためのおすすめ学習リソースをまとめています。