HTML5 Datalist is a new html tag shipped with HTML5 specification. HTML5 Datalist can be used to create a simple poor man’s Autocomplete feature for a webpage.

In this tutorial we will go through the basics of HTML5 Datalist tag and check some quick examples of autocomplete.

Introduction to HTML5 Datalist tag

As part of HTML5 specification a new tag <datalist> has been introduced. Using this tag, we can define a list of data which then can be used as list for an input box. We can create a simple Autocomplete feature using this tag.

html5-datalist-example

Consider a textbox to take country name input from user.

Syntax:

<input type="text" list="countries" name="mycountry" />

See how we used attribute list and pass a list of countries called ‘countries’. We can define this list of countries using datalist tag.

<datalist id="countries">
    <option value="Pakistan">Pakistan</option>
    <option value="United States">United States</option>
    <option value="United Kingdom">United Kingdom</option>
    <option value="Germany">Germany</option>
    <option value="France">France</option>
</datalist>

So we created a list of countries using <datalist> tag. The id of datalist tag must match with the list attribute of the input box.

Leave a Reply

Your email address will not be published. Required fields are marked *