【HTML】datalistタグ - 入力値の選択肢

HTMLのdatalistタグについて解説します。

検証環境

HTML

macOS

14.1

datalistタグ

datalistタグは“入力項目の入力選択肢を定義するタグ”です。

optionタグと合わせて使用します。

datalist要素のid属性値をinput要素のlist属性値に設定すると、option要素の値が入力候補として表示されます。

基本構文

<datalist id=”ID”>
    <option>入力選択肢１</option>
    <option>入力選択肢２</option>
    <option>入力選択肢３</option>
</datalist>

サンプル

sample.html

<label>果物を入力してください。<label><br>
<input type="text" list="input-text-list">

___ih_hl_start
<datalist id="input-text-list">
    <option>リンゴ</option>
    <option>パイナップル</option>
    <option>ブドウ</option>
</datalist>
___ih_hl_end

プレビュー