datalistの使い方についてまとめ

datalistの概要

datalistはoption要素と組み合わせて入力項目の選択肢を定義します。「input要素のlabel属性」と、「datalist要素のid属性」で両者を結び付けます。datalist付き input要素は、入力と選択の両方が利用できます。

datalistのカテゴリー

コンテンツカテゴリー

    コンテンツモデル

    • コンテンツモデルなし

datalistに入れられるタグ一覧

タグ早見表

フレージングコンテンツ、もしくは option要素とスクリプトサポーティング

入れられるタグのカテゴリー・モデル

この記事の目次

datalistに使える属性

属性とは<datalist> タグ内に入れることのできるものです。属性をあてはめることにより、CSS・JavaScriptなどで操作する際に識別させることが可能になります。

よく使うグローバル属性

id 概要 要素に対してID固有の識別名を付けることができます。
属性の値 英字から始まる英数字
class 概要 要素に対して分類名を付けることができます。
属性の値 英字から始まる英数字
style 概要 要素に対して直接スタイルを指定することができます。
属性の値 スタイルシートのコード
グローバル属性一覧はこちら

スポンサードサーチ

<datalist>の使い方

ブラウザ対応状況

ブラウザの対応（PC)
Chrome あり
Safari あり
Internet Explorer あり
Edge あり
Firefox あり
Opera あり
ブラウザの対応（SP)
Chrome あり
Safari あり
Samsung Internet あり