【HTML】list属性を使ってフォームなどにリストを表示する方法

このページについて

このページではHTMLで使えるlist属性の機能と使い方を解説しています。

list属性はdatalistタグで事前に作成・定義したデータリストを表示する機能を持っています。通常のolタグやliタグを使ったリストとは違い、フォームの中で使えてデータを送信することもできます。

list属性はinputタグでのみ使えます。datalistタグのページでも書きましたが、listの値とdatalistタグのid属性を一致させておく必要があります。

<input list="pokemon">

<datalist id="pokemon">
<option value="カメックス">
<option value="カイオーガ">
<option value="インテレオン">
</datalist>

このように一致させて関連付けしておくことでinputタグでリストを使用可能となります。

実際に書くとこのようになります。

inputタグのlistの値を書き間違えると以下のようになります。

list属性はdatalistタグとの連携を前提に作られています。そのためlistの値とdatalistのid属性を一致させておかないと使う事ができません。そこに注意すれば、事前に作ったリストの中から選んでもらう事が可能となります。