option要素の使い方

HTMLのoption要素は、selectの中でユーザーが選べる候補を表します。たとえば、都道府県、料金プラン、言語など、あらかじめ用意した選択肢から選んでもらうときに使います。

先に結論

最小の例

<label for="plan">プラン</label>
<select id="plan" name="plan">
  <option value="basic">ベーシック</option>
  <option value="pro">プロ</option>
</select>

selectが選択部品全体、optionがその中の1つの候補です。画面には「ベーシック」「プロ」と表示されます。ユーザーが「プロ」を選ぶと、フォーム送信では表示名ではなくproが使われます。

この例では送信先を指定していないため、送信すると現在のページへ移動します。実際のフォームでは、formのactionとサーバー側の処理も用意します。

表示名と送信値を分ける

表示名は人が読みやすく、送信値はプログラムで扱いやすく作ると便利です。日本語の表示を保ったまま、サーバー側では安定した識別子を受け取れます。

書き方	画面に表示されるもの	送信に使われる値
<option value="jp">日本</option>	日本	jp
<option value="en">英語</option>	英語	en
<option>その他</option>	その他	テキストから作られる値

valueを省略すると、送信値にはoptionのテキストから得られる値が使われます。表示内容を変更しても処理の値を変えたくない場合は、valueを明示しましょう。

最初から選んでおく

ページを開いたときの初期選択を指定するには、selectedを付けます。単一選択のselectでは、通常は選択状態を初期値として1つだけ指定します。

<select name="format">
  <option value="html">HTML</option>
  <option value="markdown" selected>Markdown</option>
</select>

selectedは「最初の状態」をHTMLに記録する属性です。ユーザーが別の候補を選んだ後の現在の状態とは区別して考えます。

選べない候補にする

disabledを付けたoptionは、候補として表示しながらユーザーが選べない状態にできます。まだ提供していない機能や、条件に合わない候補を示すときに使います。

<select name="delivery">
  <option value="standard">通常配送</option>
  <option value="express">お急ぎ便</option>
  <option disabled>冷蔵便（準備中）</option>
</select>

選べない理由を画面上で分かるように書きます。単に選択肢を隠すのではなく、存在と状態を伝えるべき場合にdisabledが役立ちます。

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

候補が多いときは、optgroupで関連するoptionをまとめます。optgroup自体は選択肢ではなく、グループ名を表示するための要素です。

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

グループを選ぶのではなく、その中のoptionを選びます。すべての候補を同じ階層に並べるより、意味の近い候補を見つけやすくできます。

select以外で使う場合

optionはdatalistの候補にも使えます。ただし、selectが候補から選ぶための部品なのに対して、datalistはinputへの入力候補を示す仕組みです。入力を候補に限定したいのか、候補を参考として示したいのかで使い分けます。

よくある間違い

• optionをselectの外に単独で置く。通常の選択肢はselect、またはdatalistの中に置きます。
• 表示名だけを送信値として頼る。処理で使う識別子はvalueで明示します。
• selectedを現在の選択状態を読むJavaScriptのプロパティだと考える。現在の状態はoption.selected、HTMLに書いた初期指定はoption.defaultSelectedで確認します。
• 選択肢の説明をoptionごとの見た目だけに任せる。まずlabelとselectを関連付け、何を選ぶ部品かを伝えます。
• 標準のselectを、キーボード操作や支援技術への対応を確認せずにdivとJavaScriptで置き換える。まずネイティブのフォーム部品を検討します。

もう少し詳しく

optionには、表示用のラベル、フォーム送信用の値、初期選択、現在の選択、無効状態が関係します。見た目が似ていても、それぞれは別の情報です。少し複雑なフォームでは、ユーザーに何が見えているかと、ブラウザーやサーバーがどの値を扱うかを分けて確認しましょう。

Atlasで確認する

selected属性とselectednessの違い、valueとラベルの解決、disabledとoptgroup、HTMLOptionElement API、フォーム送信、アクセシビリティマッピングまで確認したい場合は、Yugien Atlasのoption要素を参照してください。選択肢のグループ化はAtlasのoptgroup要素、選択部品全体のルールはAtlasのselect要素、フォーム送信の共通処理はAtlasのform要素でも確認できます。