<datalist> tag — TutorialBrain

Note/Info The <datalist> tag is a new tag in HTMl5.

HTML5 <datalist> tag

Using the <datalist> element, you can show an item list containing a pre-defined option in a drop down list.

This tag also helps in providing an autocomplete feature when it is used inside the <input> element.

Syntax:
<datalist>
<option value=”text…”>
<datalist>

Example

<form action="Form.html">
  <input list="Footwear" name="Footwears">
  <datalist id="Footwear">
    <option value="Casual Shoes">
    <option value="Sports Shoes">
    <option value="Formal Shoes">
    <option value="Flip Flops">
    <option value="Sandals">
  </datalist>
  <input type="submit">
</form>

Default CSS Value

display: none;

Difference between HTML4.01, XHTML and HTML5

HTML4	XHTML	HTML5
NA	NA	New tag in HTML5

Attributes used with <datalist> tag

NONE

Global Attributes

The <datalist> tag supports Global attributes.

Event Attributes

The <datalist> tag supports Event attributes.

Supporting Browsers

Related Tags

<form>, <input> and <option> tags.