select要素の使い方

HTMLのselect要素は、用意された選択肢の中からユーザーが値を選ぶためのフォーム部品です。都道府県、カテゴリ、人数など、自由入力よりも決まった候補から選んでもらいたいときに使います。

先に結論

最小の例

<label for="pet">好きな動物</label>
<select id="pet" name="pet">
  <option value="cat">ねこ</option>
  <option value="dog">いぬ</option>
</select>

labelのforとselectのidを同じ値にすると、説明と選択部品が関連付けられます。画面には「ねこ」「いぬ」と表示されますが、フォーム送信では選ばれたvalue（この例ではcatまたはdog）が使われます。

この例では、送信先をこのページ、送信方法をGETとして明示しています。送信すると、選択した動物のvalueがURLのクエリとして送られます。実際のフォームでは、送信先にデータを処理するサーバー側の仕組みも必要です。

選択肢を作る

optionの開始タグと終了タグの間に、ユーザーが読む表示名を書きます。valueにはアプリケーションが受け取る値を書きます。表示名と送信値を分けると、画面を日本語にしながら、処理では安定した識別子を使えます。

書き方	役割
<option value="html">HTML</option>	表示はHTML、送信値はhtml
<option selected>未選択</option>	最初から選ばれた選択肢にする
<option disabled>準備中</option>	表示するが選べない選択肢にする

valueを省略すると、送信値にはそのoptionのテキストから得られる値が使われます。送信値を明確に管理したいフォームでは、valueを明示するのがおすすめです。

ひとつ選ぶ、複数選ぶ

目的	書き方	使い方
ひとつだけ選ぶ	<select>	通常のプルダウンから1つを選ぶ
複数選ぶ	<select multiple>	複数のoptionを選ぶ。操作方法を説明すると親切
一覧を広く見せる	<select size="4">	同時に表示する行数を指定する

<label for="topics">興味のある分野</label>
<select id="topics" name="topics" multiple size="3">
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="javascript">JavaScript</option>
</select>

multipleを付けると、送信時には選ばれた複数の選択肢が同じ名前で送られます。複数選択の方法は環境によって異なるため、説明文や見出しで伝えておくと迷いにくくなります。

選択肢をグループに分ける

選択肢が多いときは、optgroupで意味の近い項目をまとめます。グループ名は選択肢そのものではなく、選択肢を整理する見出しです。

<label for="language">言語</label>
<select id="language" name="language">
  <optgroup label="マークアップ">
    <option value="html">HTML</option>
  </optgroup>
  <optgroup label="プログラミング">
    <option value="javascript">JavaScript</option>
  </optgroup>
</select>

必須にする

単一選択の最初に空の値を持つ案内用のoptionを置き、requiredを付けると、実際の選択を必須にできます。

<label for="plan">プラン</label>
<select id="plan" name="plan" required>
  <option value="">選んでください</option>
  <option value="basic">ベーシック</option>
  <option value="pro">プロ</option>
</select>

案内用の選択肢が選ばれたままだと、値が空なのでブラウザーの制約検証に失敗します。ブラウザーの確認は入力を助ける仕組みであり、送信後にはサーバー側でも値を検証します。

よくある間違い

• 選択肢をselectの直接のテキストだけで書く。選べる項目はoptionで表します。
• placeholder属性をselectに付ける。selectにはplaceholderという使い方はなく、案内用の空のoptionを使います。
• 表示名だけを送信値として頼る。処理で使う値はvalueで明示します。
• 見た目を整えるために、標準のselectをdivと大量のJavaScriptで置き換える。まずはキーボードや支援技術に対応したネイティブのselectを使います。
• 複数選択を用意したのに、選び方を説明しない。multipleの操作方法を近くに書きます。

もう少し詳しく

selectは見た目が小さな部品でも、単一選択・複数選択、表示サイズ、選択状態、フォーム送信、制約検証、アクセシビリティが関係します。選択肢が少ない場合でも、利用者が候補を比較しやすいか、キーボードで操作できるか、送信後に意味のある値になるかを確認しましょう。

Atlasで確認する

選択肢そのもののvalue、selectedness、disabled、HTMLOptionElement APIまで確認したい場合は、Yugien Atlasのoption要素を参照してください。選択肢のグループ化、label解決、disabled境界はAtlasのoptgroup要素で確認できます。単一選択と複数選択の仕様上の分岐、placeholder label option、form owner、HTMLSelectElement API、アクセシビリティマッピングはAtlasのselect要素で確認できます。フォーム送信の共通処理はAtlasのform要素、ラベルとの関連付けはAtlasのlabel要素でも確認できます。