HTML5 tags list with examples

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

Consider a textbox to take country name input from user.

Syntax:

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

India United States United Kingdom Germany France

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

Demo

Below is the demo. Enter some text in the Country textbox and see how an autocomplete list appears below it.

Browser Compatibility

Not every browser out there supports html5 datalist for now. So far IE 10 and above, Firefox, Chrome and Opera 19 above supports html5 datalist tag. Safari doesn’t support datalist yet :(

This might change in future. Check the latest compatibility matrix for HTML5 Datalist here

Backward Compatibility for HTML5 Datalist tag

As seen in above compatibility table, not all browser supports html5 datalist tag. If you are using datalist, the older browser will simply ignores the datalist tag and renders rest of the webpage. The textbox which is linked to datalist will remain just a textbox. No autocomplete will be added. Internet explorer 9 and below has unique way of parsing datalist. If you try to check above example in IE 9 or below you will see all the option values are simply printed on the page. To avoid this we can wrap the options in datalist tag with a select tag. For example:

This can give user option to select from the list if autocomplete is not available. Check below screenshot.