HTMLのselectタグとは？option・value・selectedの書き方を初心者向けに解説

HTMLでお問い合わせフォームを作るとき、候補から1つ選ぶ欄には<select>を使います。しかし、<option>の内側に書く文字とvalueの違いや、selectedをどこへ付けるのかで迷う方も多いでしょう。

selectタグを理解するには、表示する文字・送る値・初期状態を分けて考えると整理しやすくなります。まずは各タグと属性の役割を確認し、実際の選択結果と見比べてみましょう。

この記事では、基本構文から必須選択・複数選択まで、コードと図解で順に確認します。最後には、1つのHTMLファイルで選択した値を確かめる練習例も用意しました。まずは単一選択の基本形を動かせれば大丈夫です。

HTMLのselectタグとは

<select>は、複数の候補から選ぶためのフォームコントロールを作るHTML要素です。MDNのselect要素リファレンスでは、「選択式のメニューを提供するコントロール」と説明されています。

都道府県、問い合わせ種別、希望プランなど、あらかじめ候補を限定できる項目に向いています。標準では1つを選ぶドロップダウンとして表示され、multipleを付けると複数選択もできます。

selectとoptionの関係

selectタグだけでは選択肢がありません。selectの中へ<option>を並べ、各候補の表示文字と送信値を指定します。

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

この例では、<select>が選択欄全体、3つの<option>が候補です。optionは基本的にselectの内側へ書きます。HTMLタグと属性の関係に慣れていない場合は、先にHTMLタグの基本と書き方を確認してください。

ラジオボタンとの使い分け

selectは省スペースですが、メニューを開くまで候補全体が見えません。候補が2〜4個程度で、最初から比較して選んでほしい場合は、ラジオボタンの方が分かりやすいことがあります。候補数、一覧性、画面の広さを基準に使い分けます。

selectタグの基本的な書き方

実用的な選択欄では、項目名を伝える<label>、選択欄を作る<select>、候補を作る<option>を組み合わせます。

<label for="inquiry-type">お問い合わせ種別</label>
<select id="inquiry-type" name="inquiry_type">
  <option value="estimate">見積もり相談</option>
  <option value="support">サポート</option>
  <option value="other">その他</option>
</select>

labelのforとselectのidを同じ値にすると、項目名と選択欄を明示的に関連付けられます。同じページ内でidを重複させず、選択欄ごとに別の値を付けてください。MDNのlabel要素リファレンスでも、forとフォームコントロールのidを対応させる方法が示されています。

selectタグには開始タグと終了タグが必要です。optionの終了タグは一部の条件で省略可能ですが、初心者のうちは</option>まで書き、親子関係を明確にするのがおすすめです。

optionタグとvalue属性の書き方

<option>は、select内の1つの選択肢を表します。通常は開始タグと終了タグの間が画面に見える文字、value属性がフォーム送信やJavaScriptで扱う値です（optionのlabel属性を指定した場合は、そのラベルが表示に使われます）。MDNのoption要素リファレンスでも、valueはフォームで送る値として定義されています。

<option value="estimate">見積もり相談</option>

• 画面に見える文字：見積もり相談
• 送信に使う値：estimate

表示文字とvalueの違い

表示文字はユーザーが理解しやすい言葉、valueは受信処理やデータ集計で安定して扱える値にします。画面の文言と送信値は同じでなくて構いません。

<select name="inquiry_type">
  <option value="estimate">見積もり相談</option>
  <option value="support">サポート</option>
</select>

「見積もり相談」を選ぶと、項目名inquiry_typeと値estimateの組がフォームデータになります。後から表示を「お見積もり」へ変えても、value="estimate"を維持すれば値は変わりません。図ではこの組をinquiry_type=estimateと表しています。

valueを省略した場合

value属性は省略できます。省略した場合は、option要素内の文字列が値として使われます。

<select name="course">
  <option>HTML入門</option>
  <option>CSS入門</option>
</select>

「CSS入門」を選べば、course=CSS入門に相当するデータになります。ただし、表示文言の修正が送信値にも影響するため、受信処理や集計で使うフォームではvalueを明示する方が変更に強い設計です。

selected属性と初期選択

selectedは、HTMLで初期選択にしたいoptionへ付ける属性です。属性があるかどうかで有効・無効が決まる「論理属性」に当たります。ブラウザーが以前の入力状態を復元する場合などを除き、この指定が最初の表示に使われます。

<select name="contact_method">
  <option value="email" selected>メール</option>
  <option value="phone">電話</option>
</select>

初期表示では「メール」が選ばれます。ユーザーが「電話」へ変更して送信すれば、実際に送られる値はcontact_method=phoneです。selectedは初期状態を指定し、選択を固定する属性ではありません。

selectedを省略した場合

multipleがなく、sizeを省略または1にした通常のドロップダウンでは、selectedが1つもない場合、最初の選択可能なoptionが初期選択になります。先頭の候補をそのまま初期値にしたいだけなら、selectedは必須ではありません。

一方、コード上で初期値を明確に伝えたい場合や、先頭以外を初期選択にしたい場合はselectedを指定します。multipleのないselectでは、selectedを複数のoptionへ付けず、1つに絞ります。

selected="false"とは書かない

selectedは論理属性なので、属性が存在すること自体が「有効」を意味します。selected="false"と書いても、falseという文字列で無効になるわけではありません。

<!-- 選択する -->
<option value="email" selected>メール</option>

<!-- 選択しない：selected属性を書かない -->
<option value="phone">電話</option>

name・valueと送信データの関係

フォーム送信では、selectのnameが項目名、選ばれたoptionのvalueが値になります。

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

スタンダードが選ばれた状態なら、項目名はplan、値はstandardです。名前と値の組を次のように表せます。

plan=standard

MDNのフォームデータの送信でも、フォームデータは名前と値の組として説明されています。

nameがないselectの値は通常送られない

<!-- 表示・選択はできるが、送信用の項目名がない -->
<select id="plan">
  <option value="basic">ベーシック</option>
</select>

idはlabel、CSS、JavaScriptとの関連付けに使いますが、送信時の項目名にはなりません。受信したいselectにはnameを付けます。nameがないselectは通常のフォームデータに含まれません。

multipleでは同じnameが繰り返される

multipleを付けたselectで複数のoptionを選ぶと、同じnameと複数のvalueが送られます。

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

HTMLとCSSを選んだ場合、URL形式ではskills=html&skills=cssのように同じ項目名が繰り返されます。受信側でも複数値を扱う必要があります。JavaScriptのFormDataなら、1件だけ返すget()ではなくgetAll("skills")で選択した値をまとめて取得できます。

必須選択に使うrequiredと空のoption

<input>にはplaceholder属性がありますが、通常のselectでは同じ使い方をするplaceholder属性はありません。selectの案内文は、先頭にvalueが空のoptionを置いて作ります。

<label for="inquiry-type">お問い合わせ種別（必須）</label>
<select id="inquiry-type" name="inquiry_type" required>
  <option value="" selected>選択してください</option>
  <option value="estimate">見積もり相談</option>
  <option value="support">サポート</option>
</select>

この例では、requiredがあり、multipleとsizeは省略しています。このような表示行数1の単一選択で、select直下の先頭optionがvalue=""なら、そのoptionは未選択を示す案内（プレースホルダーラベル）として扱われます。通常の入力チェックが有効なフォームでは、案内文のまま送信しようとするとブラウザーが選択を促します。「見積もり相談」を選べば、この欄の必須チェックを通過します。

案内optionのselectedとdisabled

空optionが先頭なら、selectedがなくても通常は最初に選ばれます。例のselectedは必須ではなく、「これを初期状態にする」という意図をコードへ明示するためのものです。

案内optionへdisabledを加えると、別の候補を選んだ後に案内へ戻せなくなります。未選択へ戻す必要があるかを考え、操作性を確認してから使ってください。

select・optionでよく使う属性

基本のname・value・selectedに加え、必須、無効化、複数選択、グループ化を目的に応じて使います。

selectタグの主な属性

optionタグの主な属性

optgroupで選択肢を分類する

候補が多い場合は、<optgroup>で意味のあるグループへ分けられます。MDNのoptgroup要素リファレンスでは、label属性でグループ名を指定します。

<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>

optgroupは分類見出しであり、グループ名そのものを選ぶためのoptionではありません。

multipleの操作と注意点

multiple selectは、PCでCtrl・Command・Shiftキーを併用する場合があり、端末やブラウザーで操作感も変わります。候補が少なく、各項目を一覧で見せたいならチェックボックスも比較してください。

selectタグを使ったフォームのコード例

この練習では、PCのテキストエディターとブラウザーを使います。サーバーを用意せず、必須選択と現在の値を確認できます。

テキストエディターで新しい空のファイルを作り、次のコードを<!doctype html>から</html>まで丸ごとコピーします。文字コードをUTF-8、ファイル名をselect-practice.htmlにして保存してください。末尾が.html.txtにならないようにします。

保存したファイルをブラウザーのウィンドウへドラッグして開きます。「選択した値を確認する」という見出し、2つの選択欄、「値を確認する」ボタンが表示されれば準備完了です。以下は記事上ではコードとして表示されるため、操作は自分で保存したファイルで行います。

練習用のJavaScriptで、reportValidity()による入力チェックとFormDataによる値の取得を行います。ボタンはtype="button"なので、押してもフォームを送信しません。この例だけではメール送信やサーバーへの保存は行いません。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>selectの練習</title>
</head>
<body>
  <h1>選択した値を確認する</h1>
  <form id="practice-form">
    <p>
      <label for="inquiry-type">お問い合わせ種別（必須）</label>
      <select id="inquiry-type" name="inquiry_type" required>
        <option value="" selected>選択してください</option>
        <option value="estimate">見積もり相談</option>
        <option value="support">サポート</option>
        <option value="other">その他</option>
      </select>
    </p>
    <p>
      <label for="contact-method">希望する連絡方法</label>
      <select id="contact-method" name="contact_method">
        <option value="email" selected>メール</option>
        <option value="phone">電話</option>
      </select>
    </p>
    <button type="button" id="check-values">値を確認する</button>
  </form>
  <pre id="result" aria-live="polite">まだ確認していません</pre>
  <script>
    const form = document.querySelector("#practice-form");
    const result = document.querySelector("#result");
    document.querySelector("#check-values").addEventListener("click", () => {
      if (!form.reportValidity()) {
        result.textContent = "お問い合わせ種別を選んでください";
        return;
      }
      const data = new FormData(form);
      result.textContent = Array.from(data, ([name, value]) => {
        return `${name}=${value}`;
      }).join("\n");
    });
  </script>
</body>
</html>

練習の操作と確認結果

inquiry_type=estimate
contact_method=email

表示されるのは、送信時に使う名前と値の組を読みやすく並べたものです。実際の通信結果ではありません。MDNのFormDataリファレンスでも、フォームの名前と値を組として扱う仕組みを確認できます。

練習を繰り返すときは、お問い合わせ種別を「選択してください」、連絡方法を「メール」に戻してボタンを押します。再び選択を促されれば、最初の確認からやり直せます。練習が終わったら、このファイルのタブを閉じて終了です。

症状に応じた確認方法

ファイルを開いてもコードの文字がそのまま出る場合は、ファイル名の末尾が.htmlかを確認します。ファイル名を直してブラウザーで開き直し、2つの選択欄が表示されれば解消です。

ボタンを押しても「まだ確認していません」のままなら、コード末尾の<script>から</script>までコピーされているか確認し、保存後に再読み込みします。コードが揃っている場合は、そのページでJavaScriptが無効になっていないかを確認してください。選択後に2行の結果が出れば解消です。

結果の一方の行だけが出ない場合は、該当するselectのnameが抜けていないか、selectや選択したoptionにdisabledが付いていないかを確認します。記事のコードに戻して保存・再読み込みし、2行とも出れば解消です。

実際に送信するフォームで、画面上の確認はできてもサーバー側へ値が届かない場合は、formのaction（送信先）・method（送信方法）と受信側の処理を確認します。この練習コードは送信しないため、メールや保存データが届かないのは正常です。

selectタグでよくある間違いと直し方

optionをselectの外へ書く

optionだけを並べても、選択式フォームとして正しく構成できません。基本構文どおりselectで囲みます。

表示文字がそのまま送られると思う

valueがある場合、送られるのはvalueです。画面の「見積もり相談」とvalue="estimate"を分け、受信側が期待する値と一致させます。

selectedをselectへ付ける

selectedを付ける先はselectではなく、初期選択にしたいoptionです。単一選択では1つのoptionだけへ指定します。

selected="false"で解除しようとする

selectedは論理属性です。無効にしたいoptionから属性そのものを削除します。JavaScriptで現在の選択を変える場合は、selectのvalueプロパティなどを使います。

requiredだけ付け、最初の実データが選ばれている

先頭がvalue="estimate"のような実データだと、ユーザーが操作していなくても有効な選択として送信できます。この記事の単一選択で未選択を判定したい場合は、先頭へvalue=""の案内optionを置きます。

disabledのselectも送られると思う

disabledのselectや選択不可のoptionは、通常のフォーム送信で値を受け取れません。操作不可の表示と、送信したい固定値を同じものとして扱わないようにしてください。値を送る必要がある場合は、受信側で決定するか、改ざんを前提に検証できる別の設計を検討します。

multipleの値を1つだけで受け取る

multipleでは同じnameに複数のvalueが届く可能性があります。受信側の言語やフレームワークで、複数値を受け取る方法を確認します。

よくある質問

再読み込みしてもselectedの選択に戻らないのはなぜですか？

ブラウザーが前回の選択を復元することがあるためです。HTMLのselectedは初期状態の指定で、常に現在の選択を上書きする命令ではありません。コード変更の確認では、新しいタブで開き直すなど、以前の入力状態の影響を分けて確認してください。

selectがformの外側にあっても送信できますか？

selectのform属性に、同じ文書内にあるformのidを指定すれば関連付けられます。まずはformの内側に置く基本形を使い、レイアウト上の理由で外へ置くときに検討してください。

JavaScriptで選択中の値を取得するにはどうしますか？

単一選択なら、select要素のvalueプロパティで現在の値を取得できます。例えばdocument.querySelector("#contact-method").valueです。複数選択ではselectedOptionsやFormDataのgetAll()を使い、選ばれた値を列挙します。

まとめ

selectタグは、選択肢を表示するだけでなく、選ばれた値をフォームデータへつなぐ要素です。

• selectは選択欄全体、optionは各選択肢を作る
• labelのforとselectのidを対応させる
• optionの内側は表示文字、valueは送信値になる
• selectのnameと選ばれたoptionのvalueがname=valueになる
• selectedはHTML上の初期選択を指定する
• 必須の案内文は、空の先頭optionとrequiredで作る
• multipleでは同じnameのvalueが複数送られる

まずは記事内の練習コードで、選んだ表示文字からname=valueを予測してみてください。メールから電話へ変えて結果を確認できたら、valueとselectedの役割を区別できています。

次に読む記事

選択欄を作れたら、次はフォーム全体のつながりや、ほかの選択方法を確認してみましょう。

送信先・入力欄・ボタンまで含めて理解する：

あわせて読みたい

HTMLのフォームとは？form・input・label・buttonの違いと書き方を初心者向けに解説 HTMLフォームの基本を初心者向けに解説。form・input・label・buttonの役割、主要属性、最小コード、よくある間違いを図解付きで学べます。

候補をすべて見せる選択欄と比較する：

あわせて読みたい

HTMLのチェックボックスとラジオボタンの違いとは？checked・name・valueの書き方を初心者向けに解説 HTMLのチェックボックスとラジオボタンの違い、checked・name・value、送信データ、requiredの書き方を初心者向けに解説します。