HTMLのセレクトボックス（プルダウン）の使い方を完全ガイド！selectとoptionの基本を覚えよう

1. HTMLのselect要素とは

1. HTMLのselect要素とは

select要素は、ユーザーに選択肢を表示するためのHTMLタグです。ドロップダウン形式のセレクトボックス（プルダウンメニュー）を作るときに使います。中には複数のoption要素を含めることで、選択肢を増やすことができます。

基本的なselectの使い方は以下のとおりです。

<form>
	<select name="fruit">
		<option value="apple">りんご</option>
		<option value="banana">バナナ</option>
		<option value="orange">オレンジ</option>
	</select>
</form>

2. option要素とは

2. option要素とは

option要素は、select要素の中で1つ1つの選択肢を表すタグです。ユーザーに表示するテキストはタグの中に書き、実際に送信される値はvalue属性で指定します。

例えば、上の例で「りんご」が選ばれた場合、送信される値は「apple」になります。フォームからデータを受け取るプログラムではこのvalueが使われます。

3. 初期値を設定する方法

3. 初期値を設定する方法

ユーザーが最初に見るときに、あらかじめ選択されている項目を指定したいときは、option要素にselected属性をつけます。

<form>
	<select name="color">
		<option value="red" selected>赤</option>
		<option value="blue">青</option>
		<option value="green">緑</option>
	</select>
</form>

このようにselectedをつけることで、最初に表示される選択肢を指定できます。

4. セレクトボックスを使った実践的なフォーム

4. セレクトボックスを使った実践的なフォーム

都道府県を選ぶセレクトボックスを使った実践的な例を見てみましょう。

<form action="/submit" method="post">
	<label for="pref">都道府県を選んでください：</label>
	<select name="prefecture" id="pref">
		<option value="tokyo">東京都</option>
		<option value="osaka">大阪府</option>
		<option value="kyoto">京都府</option>
	</select>
	<input type="submit" value="送信">
</form>

labelタグを使ってセレクトボックスとラベルを関連付けると、よりアクセシビリティが高くなります。初心者の方でもHTMLフォームが扱いやすくなります。

5. セレクトボックスにグループを作るoptgroup要素

5. セレクトボックスにグループを作るoptgroup要素

optgroup要素を使うと、選択肢をカテゴリで分けることができます。例えば、東日本と西日本で都道府県を分けて表示することが可能です。

<form>
	<select name="prefecture">
		<optgroup label="東日本">
			<option value="hokkaido">北海道</option>
			<option value="tokyo">東京</option>
		</optgroup>
		<optgroup label="西日本">
			<option value="osaka">大阪</option>
			<option value="fukuoka">福岡</option>
		</optgroup>
	</select>
</form>

optgroupを使うことで、選択肢のまとまりがわかりやすくなり、ユーザーにとって選びやすいセレクトボックスになります。

6. 複数選択できるセレクトボックス

6. 複数選択できるセレクトボックス

select要素にmultiple属性をつけると、複数の項目を同時に選択できるようになります。Ctrlキー（MacではCommandキー）を使って複数選択ができます。

<form>
	<select name="languages" multiple size="4">
		<option value="html">HTML</option>
		<option value="css">CSS</option>
		<option value="javascript">JavaScript</option>
		<option value="python">Python</option>
	</select>
</form>

複数選択するフォームはアンケートなどでよく使われます。ただし、スマホなどでは操作しづらいため注意が必要です。

まとめ

まとめ

HTMLのセレクトボックスとプルダウンメニューの重要ポイント

HTMLでフォームを作成するとき、ユーザーに選択肢を提示する方法としてよく使われるのがセレクトボックスです。セレクトボックスはプルダウンメニューとも呼ばれ、限られたスペースの中で複数の選択肢を分かりやすく表示できるという大きな特徴があります。

HTMLではselectタグを使うことでセレクトボックスを作ることができます。そして、その中にoptionタグを配置することでユーザーに見せる選択肢を作成します。この仕組みは非常にシンプルですが、フォーム入力を扱う多くのWebサイトで使われている基本的で重要なHTML技術です。

例えば、会員登録フォーム、アンケートフォーム、都道府県選択フォーム、言語選択フォームなど、多くの入力画面でセレクトボックスが使われています。ユーザーが自由入力するよりも、あらかじめ用意された選択肢を選ぶほうが入力ミスが少なく、データ管理もしやすくなるためです。

HTMLのselectタグを理解することは、フォーム作成の基本を理解することにもつながります。Web制作やフロントエンド開発を学ぶ人にとって、非常に重要な知識です。

selectタグとoptionタグの基本構造

セレクトボックスは、selectタグの中にoptionタグを配置するという構造で作られます。selectタグがセレクトボックス本体を表し、optionタグがそれぞれの選択肢になります。

optionタグの中にはユーザーに表示する文字を書き、value属性には送信される値を指定します。このvalueはフォーム送信時にサーバー側のプログラムが受け取る値になります。

<form>
    <select name="fruit">
        <option value="apple">りんご</option>
        <option value="banana">バナナ</option>
        <option value="orange">オレンジ</option>
    </select>
</form>

このような構造を理解しておくことで、フォームの入力データを正しく扱えるようになります。Webアプリケーション開発やフォーム処理の基本として必ず覚えておきたいポイントです。

初期選択を設定するselected属性

セレクトボックスでは、最初に表示される選択肢を設定することもできます。これを初期値設定と呼びます。初期値を設定するときは、optionタグにselected属性を追加します。

<select name="color">
    <option value="red" selected>赤</option>
    <option value="blue">青</option>
    <option value="green">緑</option>
</select>

この設定を行うことで、ページを開いたときに最初から指定した項目が選択された状態になります。ユーザーがよく選ぶ項目を初期値として設定しておくことで、操作しやすいフォームになります。

optgroupを使った選択肢のグループ化

セレクトボックスの選択肢が多くなる場合は、optgroupタグを使ってグループ分けをすることができます。これによりユーザーは目的の項目を見つけやすくなります。

<select name="prefecture">
    <optgroup label="東日本">
        <option value="hokkaido">北海道</option>
        <option value="tokyo">東京</option>
    </optgroup>
    <optgroup label="西日本">
        <option value="osaka">大阪</option>
        <option value="fukuoka">福岡</option>
    </optgroup>
</select>

このように地域やカテゴリーごとにグループを作ることで、セレクトボックスの使いやすさが大きく向上します。特に都道府県選択や商品カテゴリ選択などではよく使われるテクニックです。

複数選択できるセレクトボックス

selectタグにはmultiple属性という機能があります。この属性を追加すると、複数の項目を同時に選択できるセレクトボックスを作ることができます。

<select name="languages" multiple size="4">
    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="javascript">JavaScript</option>
    <option value="python">Python</option>
</select>

複数選択はアンケートフォームやスキルチェックフォームなどでよく使われます。ただし、スマートフォンでは操作が少し分かりにくい場合もあるため、ユーザーの利用環境を考えて設計することが大切です。

フォームとセレクトボックスを組み合わせた実践例

実際のWebサイトでは、セレクトボックスはフォーム入力と組み合わせて使われます。labelタグを使って入力項目の説明を表示することで、ユーザーは何を選択すればよいか分かりやすくなります。

<form action="/submit" method="post">
    <label for="pref">都道府県を選択してください</label>
    <select name="prefecture" id="pref">
        <option value="tokyo">東京都</option>
        <option value="osaka">大阪府</option>
        <option value="kyoto">京都府</option>
    </select>
    <input type="submit" value="送信">
</form>

labelタグとid属性を正しく関連付けることでアクセシビリティが向上し、ユーザーにとって使いやすいフォームになります。フォーム設計ではユーザー体験を意識することが非常に重要です。

HTMLのセレクトボックスは、Webフォームを作るうえで欠かせない基本機能です。selectタグ、optionタグ、selected属性、optgroupタグ、multiple属性などを理解することで、より使いやすく整理されたフォームを作ることができます。