【HTML Living Standard】select要素の使い方

select要素の使い方について、初心者にもわかりやすく解説します。

作成日: 2025年09月29日更新日: 2026年03月26日

基本的な使い方

selectオブジェクトは、HTMLの文書中でユーザーに選択肢のリストを提供するUIコンポーネントを表すオブジェクトです。これは、ドロップダウンリスト（プルダウンメニューとも呼ばれます）を作成する際に使用され、ユーザーが提示された複数の項目の中から一つ、または複数を選択できるようにします。

このオブジェクトは、通常、子要素として<option>要素を持ちます。それぞれの<option>要素は、リスト内の個別の選択肢を表します。また、関連する選択肢をグループ化したい場合には、<optgroup>要素を用いて選択肢を論理的にまとめることも可能です。

主な属性としては、フォーム送信時にこの選択リストの値を識別するためのname属性があります。size属性を使用すると、一度に表示される選択肢の数を指定でき、multiple属性を追加すると、ユーザーが複数の項目を同時に選択できるようになります。さらに、required属性を設定することで、フォーム送信前にユーザーに選択を必須にできますし、disabled属性で選択リストを無効にすることも可能です。

selectオブジェクトは、Webフォームにおいて、ユーザーからの多様な入力を効率的に収集するための重要な要素の一つとして機能します。

公式リファレンス: <select>: The HTML Select element

構文(syntax)


1<select name="exampleSelect" id="example-select">
2  <option value="option1">選択肢1</option>
3  <option value="option2">選択肢2</option>
4  <option value="option3">選択肢3</option>
5</select>

引数(parameters)

引数なし

引数はありません

戻り値(return)

戻り値なし

戻り値はありません

サンプルコード

HTMLのselectとoptionで選択肢を作る


1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>セレクトボックスの基本例</title>
7</head>
8<body>
9    <h1>好きなプログラミング言語を選択してください</h1>
10
11    <!-- label要素は、フォーム要素（ここではselect）に説明を提供し、アクセシビリティを向上させます。 -->
12    <!-- for属性とselectのid属性を一致させることで関連付けます。 -->
13    <label for="programming-language">プログラミング言語:</label>
14
15    <!-- select要素は、ドロップダウンリストを作成します。 -->
16    <!-- name属性は、フォーム送信時にこの選択ボックスの値を識別するために使用されます。 -->
17    <!-- id属性は、labelとの関連付けやJavaScriptからの操作に利用されます。 -->
18    <select id="programming-language" name="selected_language">
19        <!-- option要素は、ドロップダウンリスト内の個々の選択肢を定義します。 -->
20        <!-- value属性は、選択されたときにサーバーに送信される値です。 -->
21        <!-- optionタグで囲まれたテキストが、ユーザーに表示される項目です。 -->
22        <!-- selected属性を追加すると、ページロード時にその項目が初期選択されます。 -->
23        <option value="">選択してください</option>
24        <option value="python">Python</option>
25        <option value="javascript" selected>JavaScript</option>
26        <option value="java">Java</option>
27        <option value="csharp">C#</option>
28        <option value="ruby">Ruby</option>
29    </select>
30</body>
31</html>

このサンプルコードは、ウェブページ上でユーザーが複数の選択肢から一つを選ぶためのドロップダウンリスト（選択ボックス）をHTMLで作成する基本的な方法を示しています。

この機能の核となるのは、選択ボックス全体を定義する<select>要素と、その中の個々の選択肢を定義する<option>要素です。<select>要素は、ユーザーが選択肢を選ぶための入力欄を形成します。name属性は、フォームが送信される際に、この選択ボックスでユーザーが選んだ値をサーバーに送る際の識別子として機能します。また、id属性は、後述する<label>要素との関連付けや、JavaScriptからこの要素を操作するために利用されます。HTMLの要素自体は、プログラミング言語の関数のように直接引数や戻り値を持つものではありませんが、その属性を通じて挙動や表示が制御されます。

<option>要素は、<select>要素の内部に記述され、ドロップダウンリストに表示される個々の選択肢を定義します。value属性には、この選択肢が選ばれたときにサーバーに送信される具体的な値を設定します。<option>タグで囲まれたテキストが、ユーザーの画面に表示される項目名です。selected属性を任意の<option>要素に追加すると、その項目がページを読み込んだ際の初期選択状態となります。

さらに、<label>要素は、<select>要素のようなフォーム部品に説明文を提供し、ユーザー体験とアクセシビリティを向上させる役割があります。<label>のfor属性を<select>のid属性と一致させることで、両者が関連付けられます。これにより、ユーザーは説明文をクリックするだけでも選択ボックスにフォーカスを当てることができ、操作性が向上します。これらの要素を適切に組み合わせることで、ユーザーが直感的に操作できる選択機能がウェブページに実装されます。

select要素はドロップダウンリストを作成し、option要素で各選択肢を定義します。初心者が特に注意すべき点は、label要素のfor属性とselect要素のid属性を一致させ、視覚的な説明だけでなくアクセシビリティを確保することです。select要素のname属性は、フォーム送信時に選択値がサーバーに送られる際の識別子として不可欠です。option要素では、value属性にサーバーへ送信する値を設定し、タグ内のテキストをユーザーに表示する内容とします。これらは異なる値でも構いません。また、特定のoptionにselected属性を付与することで、ページ読み込み時の初期選択項目を指定できます。ユーザーが選択する前のガイドとして、空のvalueを持つoptionを最初に配置することも一般的です。

HTML Select 初期値を設定する


1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>HTML Select 初期値サンプル</title>
7</head>
8<body>
9    <h1>お気に入りのフルーツを選んでください</h1>
10
11    <!-- ユーザーが選択可能なドロップダウンリスト（select要素）を作成します -->
12    <label for="fruit-select">フルーツ:</label>
13    <select id="fruit-select" name="favorite_fruit">
14        <!-- option要素はドロップダウンリストの各項目を定義します -->
15        <option value="apple">りんご</option>
16        <!-- selected属性を付与することで、この項目が初期値として選択された状態になります -->
17        <option value="banana" selected>バナナ</option>
18        <option value="orange">オレンジ</option>
19        <option value="grape">ぶどう</option>
20        <option value="strawberry">いちご</option>
21    </select>
22</body>
23</html>

HTMLのselect要素は、ウェブページ上でユーザーが複数の選択肢の中から一つを選ぶための「ドロップダウンリスト」を作成する際に使用されます。この要素は、単体ではなく、選択肢となる各項目を定義するoption要素を内部に含めることで機能します。

サンプルコードでは、<select id="fruit-select" name="favorite_fruit">でドロップダウンリストの本体を作成しています。ここでid属性は、JavaScriptなどからこの要素を一意に識別するために用いられ、name属性はフォームが送信された際に、どの項目が選択されたかをサーバーに伝えるための名前となります。また、<label for="fruit-select">と組み合わせることで、入力欄に対するラベルの関連付けを明確にしています。

その中に配置される<option value="apple">りんご</option>のようなoption要素は、ドロップダウンリスト内の個々の選択肢を定義します。value属性に指定された値は、ユーザーがその項目を選択してフォームを送信した際に、サーバーへ送られる実際のデータとなります。タグの開始タグと終了タグの間に記述された「りんご」のようなテキストは、ユーザーが画面上で目にする表示名です。

このサンプルコードのポイントは、<option value="banana" selected>バナナ</option>のようにselected属性が付与されているoption要素があることです。このselected属性が付与された項目は、ページが読み込まれた時点で、初期値として選択された状態になります。これにより、ユーザーが何も操作しなくても、あらかじめ設定された値が表示されるため、初期設定や推奨値を提示する際に役立ちます。

HTML要素には、一般的なプログラミング言語の関数のような「引数」や「戻り値」の概念は直接適用されません。しかし、select要素のname属性と、選択されたoption要素のvalue属性が、ユーザーの選択という結果（戻り値に相当する情報）をフォームデータとしてサーバーに渡し、処理に利用されるという役割を担っています。

HTMLのselect要素で初期値を設定するには、デフォルトで選択させたいoption要素にselected属性を記述します。サンプルコードでは「バナナ」が初期値として設定されています。複数のoption要素にselected属性を記述した場合、ブラウザによって挙動が異なることがあり、意図しない選択になる可能性がありますので、通常は一つのselect要素内で一つのみに設定するようにしてください。また、option要素のvalue属性は、ユーザーが選択した際にサーバーに送信される値です。表示されるテキストとは異なる場合があるため、正しく設定することが重要です。label要素でselect要素と関連付けることで、アクセシビリティが向上します。