datalistはselectと同じ？候補を出す入力欄と選択肢の違いを試そう

候補が一覧に出る入力欄なら、一覧にない値は入力できないのかな。HTMLのdatalistは、selectと似て見えても役割が違うよ。

このページでは、自由に書ける入力への候補と、用意した項目からの選択を比べる。準備はブラウザだけ。練習では色の名前を使い、本当の個人情報は入力しないでね。

選ぶ項目を用意するselect

selectは、optionで用意した項目から選ぶための要素。単一選択の例なら、赤と青のうち一つを選べる。

<select aria-label="色">
  <option>赤</option>
  <option>青</option>
</select>

この通常の操作では、一覧にない「紫」を新しい項目として打ち込む入力欄ではない。複数選択など、別の設定もあるけれど、作例では単一選択を使うよ。

入力の候補を示すdatalist

datalistは、入力欄に候補を渡す要素。inputのlistと、datalistのidを対応させる。

<input aria-label="色の名前" list="colors">
<datalist id="colors">
  <option value="赤"></option>
  <option value="青"></option>
</datalist>

この例では、候補にない紫も入力できる。候補を用意しただけでは、入力値をその一覧に制限したことにならないんだ。

動かしてみよう

記事下の作例には、selectとdatalist付きの入力欄がある。

1. selectで青を選ぶ。
2. もう一方の入力欄へ紫と書く。
3. 「結果を確認」を押す。
4. selectは青、入力欄は紫と表示され、入力形式は有効と出ることを見る。
5. リセットで両方を赤へ戻す。

候補一覧の開き方や表示は、ブラウザ・端末・支援技術によって異なる。datalistは環境による利用しやすさの差もあるので、見た目が出たことだけで導入を決めないようにしよう。

制限したいときは条件を別に確認

候補以外を受け付けない業務ルールなら、その目的に合う部品と検証を用意する。selectを使った場合でも、サーバー側が受け取った値の検証は必要だよ。

候補を出すこと、入力形式を確認すること、受け付ける値を限定することを分けて考えよう。

標準の入力検証はrequiredとemailの確認、単一と複数の選択はチェックボックスとラジオボタンへ。

参照した公式資料

• MDN：datalist
• MDN：select

確認日：2026年10月24日。