datalistタグとは?|入力候補のリストを作成してみよう

datalistタグとは?|入力候補のリストを作成してみよう
博士
<option>タグと<datalist>というタグと組み合わせれば、入力候補のリストも作ることが可能じゃ。
リンゴ
検索窓などのテキストを入力するところで入力候補が出ると、ユーザーも助かりますね!
 
 
リンゴ
リンゴ
ブログを書くことが大好きな少年。
世界にたった一つのWordPressテーマを作るため、HTML/CSSについて日々勉強中!
博士
博士
リンゴが師と仰ぐ人物。
毎日HTML/CSSデザインの研究をしており、その知識を余すことなくリンゴに教えてくれる。

スポンサーリンク

<datalist>タグとは

 

<datalist>

対応ブラウザInternet Explorer / Firefox / Google Chrome / Safari / Opera
分類フロー・コンテンツ / フレージング・コンテンツ
利用場所フレージング・コンテンツが期待される場所
内容フレージング・コンテンツ、または0個以上のoption要素


 
 
<datalist>タグは、入力候補のリストを作成する際に使用するタグです。
datalist要素は、入力候補となる項目の集まりを表す要素で、個々の入力項目は<datalist>〜</datalist>の中に入れたoption要素で指定します。

<datalist>タグを使って作成する入力候補リストの代表的な例が、検索エンジンでキーワードの入力候補を表示するオートコンプリート機能です。
datalist要素に指定したid属性の値と、input要素のlist属性の値を同じにすれば、該当のテキストフィールドに入力候補が表示されるようになります。
 
 

博士
ユーザーは入力候補から選択できるだけでなく、任意のテキストも入力できるぞ。
 
 

入力候補の設定方法

<datalist>タグを使って入力候補を設定する方法は、以下のような流れになります。

  1. datalist要素で入力候補のリストを作成。
  2. そのdatalist要素にID名を指定。
  3. 対象となる入力欄(input要素)にlist属性を指定し、その値にdatalist要素に指定したID名を記述。

 
 
このID名によって、入力候補のリストと入力欄が関連付けられます。

 
 
博士
入力候補の選択肢は、option要素で作成するぞ。
 
 

スポンサーリンク

datalist要素の内容

datalist要素の内容には、option要素だけでなくフレージング・コンテンツも含めることができます。
datalist要素に対応していないブラウザでは、このフレージング・コンテンツが代替コンテンツとして表示されます。

 
 
博士
対応しているブラウザでは、このコンテンツは表示されんぞ。
 
 

関連付け可能なフォーム部品

datalist要素は、以下のフォーム部品と関連付けることができます。

 
 

スポンサーリンク

使用例

 
 

表示例




 
 

まとめ

<datalist>タグは、入力候補のリストを作成する際に使用するタグです。
 
 

リンゴ
アンケートページなどでも活用できそうですね!
 
 
HTML5 タグ図鑑

HTML5タグ全種類を図鑑としてまとめています。タグの意味や使い方でわからないことがあれば、ぜひこのページをご活用ください。

HTML5 タグ図鑑へ

 
HTML5 タグ図鑑

スポンサーリンク








datalistタグとは?|入力候補のリストを作成してみよう