HTML selectタグ：ドロップダウン・複数選択と送信値

HTMLリファレンス

作成日 2026-10-30 最終更新日 2026-10-30

HTML <select> は option によって定義された選択肢から値を選ぶためのフォームコントロールです。デフォルトでは1つだけ選択可能で、multiple は複数選択を可能にします。select 要素の name は送信されるフィールドを識別し、選択された option 要素の value がその値を提供します。

フィールド名、表示ラベル、および送信された値を区別する

label 要素の for を select 要素の id に一致させることで、コントロールに説明を関連付けます。id は文書内で要素を識別し、name は送信されるデータのキーとなります。表示されるオプションのテキストは value と異なる場合があります: ウェブ開発 を選択すると web が送信される場合があります。value を省略すると、オプションのテキストが値として使用されます。

通常の単一選択コントロールでは、selected を省略すると、一般的に最初に利用可能なオプションが初期選択となります。明示的な選択を必須にするには、最初のオプションに空の value を指定し、required を追加します。以下の例の通りです。値が空の場合、表示される指示は必須選択を満たしません。

完全な例: 必須および複数選択

コードをselect-demo.htmlとして保存し、ブラウザーで開きます。JavaScriptは送信を防ぎ、現在のフォームデータをページに表示します。この演習はデータを実際のサーバーや外部サイトに送信しません。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>selectの値を確認</title>
  <style>
    body { max-width: 36rem; margin: 1rem auto; padding: 0 1rem; }
    label, select { display: block; margin-bottom: 0.5rem; }
    select, button { font: inherit; max-width: 100%; }
    pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
</head>
<body>
  <h1>選択した値を確認</h1>
  <form id="demo">
    <label for="topic">関心のあるテーマ（必須）</label>
    <select id="topic" name="topic" required>
      <option value="" selected>テーマを選んでください</option>
      <optgroup label="開発">
        <option value="web">ウェブ開発</option>
        <option value="data">データ処理</option>
      </optgroup>
    </select>
    <label for="skills">学習する技術（複数選択可）</label>
    <select id="skills" name="skills" multiple size="3">
      <option value="html" selected>HTML</option>
      <option value="css" selected>CSS</option>
      <option value="javascript">JavaScript</option>
    </select>
    <label for="locked">無効な項目</label>
    <select id="locked" name="locked" disabled>
      <option value="sample">変更できません</option>
    </select>
    <button type="submit">値を確認</button>
    <button type="reset">初期化</button>
  </form>
  <pre id="result" aria-live="polite"></pre>
  <script>
    const form = document.getElementById('demo');
    const result = document.getElementById('result');
    form.addEventListener('submit', (event) => {
      event.preventDefault();
      const data = new FormData(form);
      result.textContent = JSON.stringify(Array.from(data.entries()), null, 2);
    });
    form.addEventListener('reset', () => { result.textContent = ''; });
  </script>
</body>
</html>

トピックを選ばずに値を確認を押します。ブラウザーの必須入力フィールドの検証により、送信は防止されます。
ウェブ開発を選び、値を確認を押します。出力にはtopicにwebが含まれ、skillsの2つの項目にhtmlとcssがあります。無効になっているlockedフィールドは含まれません。
スキルの選択を変更して再度確認します。選択された各オプションは別のskillsという名前の項目を生成します。すべてのオプションを解除すると、skillsの項目が存在しない場合があります。
初期化を押します。トピックは空の指示オプションに戻り、スキルはHTMLとCSSに戻り、出力はクリアされます。

multipleとsizeは異なる属性です。

multipleは複数の値を許可しますが、sizeは表示される行数を指定します。sizeを増やしても自動的に複数選択が有効になるわけではありません。キーボードの組み合わせはオペレーティングシステムによって異なります。デスクトップのコントロールでは、CtrlまたはCommandをクリックと組み合わせる、または範囲選択にはShiftを使用できる場合があります。モバイルデバイスでは、別の選択画面を提供する場合があります。

JavaScriptで複数選択を読み取る場合、select.valueは最初に選択された値のみを返します。すべての値を取得するには、selectedOptionsを繰り返し処理するか、FormDataインスタンス（例えばnew FormData(form).getAll('skills')）でgetAll('skills')を呼び出してください。サーバー側では、同じ名前の繰り返しフィールドに対してフレームワークの解析ルールに従ってください。

disabled、required、selectedは慎重に使用してください。

disabledは操作を防止し、フォーム送信データからフィールドを除外します。selectにはinput要素のreadonly属性に相当するネイティブな機能がないため、readonlyを追加してもロックされません。ブラウザでコントロールを無効にしても、サーバー側の認可チェックを置き換えることはできません。

required、disabled、multiple、そして selected はブール属性です。selected="false" でさえ属性を残すため、このオプションは最初に選択されているものとして扱うことができます。属性を削除するか、対応する JavaScript プロパティを false に設定して false にします。リセットは HTML で宣言された初期の選択を復元します。必ずしもすべての選択をクリアするわけではありません。

autofocus はコントロールに自動でフォーカスを当てることができますが、リーダーの位置やモバイルキーボードの動作を考慮して、必要な場合にのみ使用してください。ネイティブのコントロールやポップアップはブラウザやオペレーティングシステムによって異なるため、label の関連付けと標準のキーボード操作を保持することは、一般的なフォームにおいて有用です。MDNのselect要素リファレンスおよび MDNのoption要素リファレンスは詳細なルールを説明しています。

HTMLリファレンス