View video tutorial

HTML <datalist> Tag


The <datalist> tag provides a list of predefined options to the users to select data

HTML <datalist> Tag

The <datalist> element contains a set of <option> elements that represent the recommended options to choose from among the other controls.

It provides an autocomplete feature on form elements.

Global attributes

Global attributes may be applied on all elements, although some elements may have no effect on them.

<accesskey>, <class>, <contenteditable>, <contextmenu>, <data-*>, <dir>, <draggable>, <dropzone>, <hidden>, <id>, <lang>, <spellcheck>, <style>, <tabindex>, <title>, <translate>.

Learning with HTML Editor "Try it Now"

You can edit the HTML code and view the result using online editor.


<p>Enter your favorite food name:</p>
<input type="text" list="food">
<datalist id="food">
  <option value="Beverages">
  <option value="Dairy Products">
  <option value="Grains">
  <option value="Meat">
  <option value="Seafood">
Try it Now »

Click on the "Try it Now" button to see how it works.