<datalist> - データリスト

目次

概要

形式
<datalist></datalist>
サポート
https://caniuse.com/datalist
カテゴリ
フローコンテンツ
フレージングコンテンツ
親要素
フレージングコンテンツ を子要素に持てるもの
子要素
フレージングコンテンツ、もしくは 0個以上の option要素 および スクリプトサポート要素
タグの省略
開始タグ:必須 / 終了タグ:必須
属性
グローバル属性

説明

datalist は <option> と組み合わせて入力項目の選択肢を定義します。input 要素の label 属性と、datalist 要素の id 属性で両者を結び付けます。<input type="text"> は入力のみ、<select> は選択のみ可能なのに対して、datalist 付き input 要素は入力と選択の両方を利用することが可能です。

Internet Explorer 10、Chrome 20、Firefox 4.0、Opera 9.5 でサポートされています。

属性

グローバル属性
詳細は グローバル属性 を参照してください。

使用例

下記の例では、入力欄に文字を入力、または選択リストから選択することを可能としています。

HTML
<label>
  好きなスポーツは?
  <input name="fav_sports" list="sports_list">
  <datalist id="sports_list">
    <option value="サッカー">
    <option value="野球">
    <option value="ゴルフ">
  </datalist>
</label>
表示

下記の例では、datalist 要素に未対応のブラウザを考慮し、未対応の場合はテキスト入力欄と選択蘭の両方を表示しています。

HTML
<div>
  好きなスポーツは?
  <input name="fav_sports" list="sports_list">
  <datalist id="sports_list">
    もしくはリストから選択
    <select name="fav_sports">
      <option>サッカー</option>
      <option>野球</option>
      <option>ゴルフ</option>
    </select>
  </datalist>
</div>
表示(サポートブラウザの場合)
好きなスポーツは? もしくはリストから選択
表示(未サポートブラウザの場合)
好きなスポーツは? もしくはリストから選択