フォーム

`<datalist>` 入力の候補

重要度2 / 5

意味

入力欄に、候補を表示する場合に使います。<input> の list 属性に <datalist> の id を書きます。候補以外の値も入力できます。

コード

HTML

<label for="pref">都道府県</label>
<input id="pref" name="pref" list="pref-list">
<datalist id="pref-list">
  <option value="大阪府">
  <option value="京都府">
  <option value="兵庫県">
</datalist>

プレビュー（初期表示）

ブラウザ対応

主要ブラウザの対応状況
ブラウザ	対応
Chrome	20〜
Firefox	4〜
Safari	12.1〜
Edge	12〜
Chrome Android	33〜
Safari iOS	12.2〜

出典: MDN Web Docs（`@mdn/browser-compat-data`）