あなたに合った学習プランは？LINE適正コース診断はこちら プログラミングが全て無料で学習可能！
HTMLのselectタグとは？ドロップダウンリストの作り方や属性を初心者向けに解説 - 忍者CODEマガジン

HTMLのselectタグとは？ドロップダウンリストの作り方や属性を初心者向けに解説

プログラミング言語の辞書

お問い合わせフォームや申込みフォームで、「都道府県を選択してください」「職種を選んでください」のようなドロップダウンリストを見たことがあると思います。このような選択式の入力欄をHTMLで作るときに使うのがselectタグです。
selectタグは、複数の選択肢の中からユーザーに1つまたは複数を選んでもらうためのフォーム部品です。この記事では、selectタグの基本、optionタグとの関係、よく使う属性、実務で注意したいポイントを初心者向けに解説します。

HTMLのselectタグとは？

selectタグは、フォームで使う選択式の入力欄を作るためのHTMLタグです。選択肢そのものはoptionタグで作り、それらをselectタグで囲みます。

selectタグの役割

selectタグの役割は、ユーザーに選択肢を提示し、選ばれた値をフォーム送信できるようにすることです。

<select name="prefecture">
  <option value="tokyo">東京都</option>
  <option value="osaka">大阪府</option>
  <option value="fukuoka">福岡県</option>
</select>

この例では、prefectureという名前の入力欄に対して、東京都・大阪府・福岡県の中から選べるようにしています。

selectタグとoptionタグの関係

selectタグだけを書いても、選択肢は表示されません。中にoptionタグを入れることで、ユーザーが選べる候補を作れます。

<select name="course">
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="javascript">JavaScript</option>
</select>

selectタグは入力欄全体、optionタグはその中に入る選択肢と覚えるとわかりやすいです。

selectタグの中にpタグやdivタグなどを自由に入れることはできません。基本的にはoptionタグやoptgroupタグを使います。

関連記事：「HTMLのformタグとは？フォームの作り方を解説」

selectタグの基本的な書き方

selectタグはformタグの中で使われることが多いです。ユーザーが選んだ値をサーバーへ送るためには、name属性を指定します。

labelタグと組み合わせる

フォームでは、入力欄が何を選ぶためのものなのかをlabelタグで示すのが基本です。

<label for="job">職種</label>
<select id="job" name="job">
  <option value="">選択してください</option>
  <option value="designer">Webデザイナー</option>
  <option value="engineer">エンジニア</option>
  <option value="director">ディレクター</option>
</select>

labelタグのfor属性とselectタグのid属性を同じ値にすると、ラベルをクリックしたときに該当のselectへフォーカスできます。

selectタグは、labelタグとセットで使うことでフォームの意味が伝わりやすくなります。

name属性を指定する

name属性は、フォーム送信時に「どの項目の値か」を示すために使います。

<select name="plan">
  <option value="basic">ベーシックプラン</option>
  <option value="standard">スタンダードプラン</option>
  <option value="premium">プレミアムプラン</option>
</select>

たとえば、ユーザーがスタンダードプランを選ぶと、plan=standardのような形で値を扱えます。

name属性を付け忘れると、フォーム送信時に選択内容を正しく受け取れないことがあります。

オススメ：HTML入門講座でフォームの基礎を学ぶ
関連記事：「HTMLフォームとは？作り方やformタグの使い方を解説【サンプルコード付き】」

selectタグでよく使う属性

selectタグには、フォームを使いやすくするためのさまざまな属性があります。ここでは、実務でもよく使われる代表的な属性と、実装時の注意点を解説します。

required属性で選択を必須にする

required属性を付けると、ユーザーが選択しないままフォームを送信しようとしたときに、ブラウザ側で入力を促せます。

<select name="prefecture" required>
  <option value="" disabled selected hidden>選択してください</option>
  <option value="tokyo">東京都</option>
  <option value="osaka">大阪府</option>
</select>

必須項目では、最初のoptionにvalue=””を設定して未選択状態を作るのが一般的です。

また、実務では初期表示用の「選択してください」にdisabled selected hiddenを付けるケースがよくあります。これにより、ユーザーが一度選択したあとに再びプレースホルダーを選べなくなり、入力ミスを防ぎやすくなります。

必須項目のselectでは、valueが空の初期選択肢とrequired属性を組み合わせ、さらにdisabled selected hiddenを設定するのが実務でよく使われる書き方です。

multiple属性で複数選択にする

multiple属性を付けると、複数の選択肢を選べるselectになります。

<select name="skills" multiple>
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="javascript">JavaScript</option>
</select>

ユーザーは複数の項目を同時に選択できます。

ただし、multiple属性は操作方法がわかりにくいというデメリットがあります。特にPCでは、複数選択する際にCtrlキー（Windows）やCommandキー（Mac）を押しながらクリックする必要があり、初心者には気付きにくいことがあります。また、スマートフォンでは操作感がブラウザによって異なる場合もあります。

そのため、選択肢が少ない場合や操作性を重視する場合は、複数選択用のselectよりもチェックボックスを使用した方がユーザーにとってわかりやすいケースが少なくありません。

multiple属性を使う場合は、操作方法の説明を添えるか、チェックボックスの方が適していないかを事前に検討しましょう。

disabled属性で選択できない状態にする

selectタグにdisabled属性を付けると、その入力欄を選択できない状態にできます。

<select name="plan" disabled>
  <option value="basic">ベーシック</option>
</select>

一時的に利用できない項目を表示したい場合や、条件を満たすまで入力を無効化したい場合によく使われます。

なお、disabledが設定されたフォーム部品は送信時に値が送信されません。そのため、表示だけ無効化したい場合と、実際に送信対象から除外したい場合の違いを理解して使い分けることが重要です。

関連記事：「HTMLタグ一覧｜コピペで使える目的別リファレンス」

実務でselectタグを使うときの注意点

selectタグは便利ですが、選択肢が多すぎると使いにくくなります。実務では、ユーザーが迷わず選べるかどうかを意識することが大切です。

選択肢が多い場合は分類を検討する

都道府県や職種のように選択肢が多い場合は、順番や分類をわかりやすく整えましょう。optionタグをoptgroupタグで分類することもできます。

<select name="area">
  <optgroup label="関東">
    <option value="tokyo">東京都</option>
    <option value="kanagawa">神奈川県</option>
  </optgroup>
  <optgroup label="関西">
    <option value="osaka">大阪府</option>
    <option value="kyoto">京都府</option>
  </optgroup>
</select>

スマホでの使いやすさも確認する

selectタグは、スマートフォンではOS標準の選択UIとして表示されることがあります。PCで見た目を整えていても、スマホでは表示や操作感が変わる場合があります。

実務では、selectタグを作ったあとにPCとスマホの両方で操作しやすいか確認することが重要です。

公式ドキュメントも確認する

selectタグの属性や仕様を詳しく確認したい場合は、公式ドキュメントも参考になります。

見た目を完全に自由にしたいからといって、selectタグをdivだけで自作すると、キーボード操作やアクセシビリティ対応が難しくなることがあります。

オススメ：HTML、CSSの問題集に無料で挑戦しよう！
HTMLを勉強していると、調べれば分かることもありますが、実際に自分でアウトプットするのは難しいと感じることがあります。
忍者CODEのHTML、CSS 学習の無料問題集では、HTML、CSSに関する問題を用意しています。

selectタグのデザイン変更とJavaScript連携

selectタグは選択式のフォームを簡単に作れる便利な要素ですが、実務では見た目のカスタマイズや、選択内容に応じた画面の切り替えを行うこともあります。ここでは、よく使われるCSSとJavaScriptの活用方法を紹介します。

CSSでデフォルトの矢印デザインを変更する

selectタグはブラウザやOSごとに標準デザインが異なります。そのままではサイト全体のデザインと統一しにくいため、CSSで見た目を調整することがあります。一般的には、appearance: none;を指定してブラウザ標準の矢印を非表示にし、背景画像などを使って独自の矢印を表示します。

select {
  -webkit-appearance: none; /* Safari用 */
  appearance: none;         /* デフォルトのスタイルを解除 */
  
  /* このあと背景画像などで独自の矢印を配置する */
}

appearance: none;を指定すると標準の矢印は非表示になります。必要に応じて背景画像などを使ってデザインを調整しましょう。ただし、ブラウザごとに表示が異なる場合があるため、PCとスマートフォンの両方で表示確認を行うことが大切です。

selectタグの見た目を変更する際は、appearance: none;で標準デザインを解除してからカスタマイズするのが一般的です。

JavaScriptで選択された値を取得する

selectタグでは、ユーザーが選んだ値に応じて表示内容を切り替えたり、フォームの入力項目を変更したりできます。そのような処理を行う場合は、JavaScriptのchangeイベントを利用します。

const selectElement = document.querySelector('select[name="job"]');

selectElement.addEventListener('change', (event) => {
  console.log(`選択された値: ${event.target.value}`);

  // ここに選ばれた値に応じた処理を書く
});

この例では、ユーザーが職種を選択するたびに、選ばれたvalueの値を取得しています。お問い合わせフォームや申し込みフォームで入力項目を動的に切り替える場合によく使われる方法です。

JavaScriptでselectタグを操作する場合は、画面表示だけでなくキーボード操作やアクセシビリティにも配慮しましょう。

関連記事：「JavaScriptでのonclickの使い方を初心者向けに解説」

まとめ

この記事では、HTMLのselectタグについて解説しました。

selectタグは、ユーザーに選択肢の中から値を選んでもらうためのフォーム部品です。選択肢はoptionタグで作り、フォーム送信で値を扱うためにname属性を指定します。

labelタグとの組み合わせ、required属性、multiple属性、スマホでの操作感などを意識すると、実務でも使いやすいフォームを作りやすくなります。まずは「selectは入力欄全体、optionは選択肢」と覚えておきましょう。

関連記事：「HTMLのoptionタグとは？初期値・selectedが効かない原因・value取得まで解説」