<datalist> - データリスト

• トップ
• HTMLリファレンス
• <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 でサポートされています。

属性

グローバル属性

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

使用例

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

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

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

<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>

関連項目

• <input>
• <option>

リンク

• https://html.spec.whatwg.org/multipage/form-elements.html#the-datalist-element
• https://developer.mozilla.org/ja/docs/Web/HTML/Element/datalist
• https://caniuse.com/datalist