JavaScript | HTML / CSS 連携：フォーム基礎 － select

select は「候補の中から選んでもらうための“選択メニュー”」

<select> は、 「あらかじめ用意した選択肢の中から、ユーザーに選んでもらうための入力欄」 です。

テキストボックスや textarea が「自由入力」なのに対して、 select は「用意された候補から選ぶ」スタイル。

国や都道府県の選択 プランの選択 カテゴリーの選択 数量の選択（ドロップダウンで選ぶタイプ）

こういう場面でよく使われます。

select の基本構造と option の役割

select と option の関係

いちばんシンプルな例からいきます。

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

ここでの役割はこうです。

select 選択メニュー全体の箱。 name="plan" が、送信されるときのキー名になります。

option 1 つ 1 つの選択肢。 value が「送信される値」、タグの中身が「画面に表示されるラベル」です。

ユーザーが「スタンダード」を選んで送信すると、 サーバー側にはだいたい plan = "standard" という形で届きます。

重要ポイント： 「ユーザーに見せる文字」と「送信する値」は別物。 見せるのは option の中身、送るのは value。

初期選択と「選んでいない状態」をどう作るか

デフォルトで選ばれる option

何も指定しない場合、 最初の option が自動的に選ばれます。

<select name="plan">
  <option value="basic">ベーシック</option>  <!-- これが最初に選ばれる -->
  <option value="standard">スタンダード</option>
  <option value="premium">プレミアム</option>
</select>

特定の option を初期選択にしたいときは、selected を付けます。

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

この場合、 最初に開いたときに「スタンダード」が選ばれています。

「まだ何も選んでいません」を表現する option

ユーザーに「選んでください」と促したいときは、 こういう“ダミーの option” を置きます。

<select name="plan" required>
  <option value="" selected>プランを選択してください</option>
  <option value="basic">ベーシック</option>
  <option value="standard">スタンダード</option>
  <option value="premium">プレミアム</option>
</select>

value="" の option を最初に選んでおき、 required を付けることで、

「プランを選択してください」のまま送信しようとすると ブラウザが「選んでください」と止めてくれます。

「選んでいない状態」を明示的に作ることで、 ユーザーに選択を促すことができる。

よくある select の使い方をフォームでイメージする

都道府県の選択

<form>
  <p>お住まいの都道府県：</p>
  <select name="prefecture" required>
    <option value="" selected>選択してください</option>
    <option value="tokyo">東京都</option>
    <option value="chiba">千葉県</option>
    <option value="kanagawa">神奈川県</option>
    <option value="saitama">埼玉県</option>
  </select>
  <button type="submit">送信</button>
</form>

ここで select が担っている役割は、

自由入力ではなく、 決められた候補から選んでもらうことで、 入力ミスや表記ゆれ（「東京」「東京都」「TOKYO」など）を防ぐ

という点です。

プラン選択と他の入力欄の組み合わせ

<form action="/signup" method="post">
  <p>お名前：</p>
  <input type="text" name="username" required>

  <p>メールアドレス：</p>
  <input type="email" name="email" required>

  <p>プラン：</p>
  <select name="plan" required>
    <option value="" selected>選択してください</option>
    <option value="basic">ベーシック</option>
    <option value="standard">スタンダード</option>
    <option value="premium">プレミアム</option>
  </select>

  <button type="submit">登録</button>
</form>

ここでは、 「プラン名を自由入力させる」のではなく、 select で選ばせることで、

サーバー側の処理がシンプルになる ユーザーの入力ミスが減る

というメリットがあります。

JavaScript と select：選ばれた値を読む・書く

選択された値を読む

HTML：

<select name="plan" id="plan">
  <option value="" selected>選択してください</option>
  <option value="basic">ベーシック</option>
  <option value="standard">スタンダード</option>
  <option value="premium">プレミアム</option>
</select>
<button type="button" id="show">選択を表示</button>
<p id="result"></p>

JavaScript：

const select = document.querySelector("#plan");
const button = document.querySelector("#show");
const result = document.querySelector("#result");

button.addEventListener("click", () => {
  const value = select.value; // ← 選ばれている option の value
  const text = select.options[select.selectedIndex].text; // ← 表示されているラベル

  result.textContent = `選択されたプラン：${text}（value: ${value}）`;
});

const select = document.querySelector("#plan");
const button = document.querySelector("#show");
const result = document.querySelector("#result");

button.addEventListener("click", () => {
  const value = select.value; // ← 選ばれている option の value
  const text = select.options[select.selectedIndex].text; // ← 表示されているラベル

  result.textContent = `選択されたプラン：${text}（value: ${value}）`;
});

ここでのポイントは、

select.value 今選ばれている option の value が入る

select.options[select.selectedIndex].text 今選ばれている option の「表示ラベル」が取れる

という 2 つです。

「送信される値」と「画面に見えている文字」を 両方意識して扱えるようになると、select が一気に使いこなせます。

選択状態を JavaScript から変える

select.value = "premium"; // 「プレミアム」を選択状態にする

select.value = "premium"; // 「プレミアム」を選択状態にする

value を書き換えることで、 選択状態をプログラムから変更できます。

ユーザーの入力や条件に応じて、 自動的に選択肢を切り替える UI を作ることもできます。

multiple と size：複数選択やリスト表示

multiple で「複数選択」を許可する

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

multiple を付けると、 Ctrl や Shift キーを使って複数の option を選べるようになります。

送信されるときは、 選ばれた value が複数送られます（サーバー側の受け取り方は環境による）。

size で「何行ぶん表示するか」を決める

<select name="skills" multiple size="4">
  <option value="js">JavaScript</option>
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="react">React</option>
</select>

size="4" とすると、 4 行ぶんのリストとして表示されます。

ドロップダウンではなく、 「常に選択肢が一覧で見えている UI」にしたいときに使います。

CSS と select：見た目を整えるときの注意

幅を揃える

<select name="plan" id="plan">
  <option value="" selected>選択してください</option>
  <option value="basic">ベーシック</option>
  <option value="standard">スタンダード</option>
  <option value="premium">プレミアム</option>
</select>

#plan {
  width: 200px;
}

select はブラウザごとに見た目が少し違いますが、 幅やフォントサイズなどは CSS で整えられます。

完全なカスタムデザインは少し難しい

select を「完全にオシャレなデザイン」にするのは、 実はけっこう難しいです。

多くのブラウザが、 矢印や枠の部分を独自に描画しているためです。

本格的にカスタムしたい場合は、

select を隠して 自作のドロップダウン UI を JavaScript で作る

というアプローチを取ることもあります。

ただ、 初心者のうちは「ブラウザ標準の見た目を活かしつつ、幅や余白だけ整える」くらいで十分です。

select を使うか迷ったときの判断基準

「ここは“決められた候補から選んでもらう”場面か？」

自分にこう聞いてみてください。

ここでユーザーに入力してもらいたいのは、 自由な文字列ではなく「決められた選択肢のどれか」か？

YES → select NO → input や textarea

国や都道府県 プラン カテゴリー ステータス（有効／無効など）

こういったものは、 select にすることで、

入力ミスが減る 表記ゆれがなくなる サーバー側の処理がシンプルになる

というメリットがあります。

初心者として「select」で絶対に掴んでほしいこと

<select> は、 「あらかじめ用意した候補の中から、ユーザーに選んでもらうための選択メニュー」 です。

中に <option> を並べて、 value に送信する値、テキストに表示ラベルを書く name が送信時のキー名になる 初期選択は最初の option か、selected で指定する 「選択してください」用のダミー option と required の組み合わせが定番 JavaScript では select.value で選ばれた value を、options[selectedIndex].text でラベルを取れる

あなたが select を書くときに、 「この欄は“自由入力”ではなく、“この候補のどれかを選んでもらう場所”なんだよな？」 と意識できていたら、 もう select を“ただのプルダウン”ではなく、 “ユーザーの選択を安全に・確実に受け取るためのインターフェース”として扱えている状態です。