HTML5 DataList

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 Autocompletefeature using this tag.

Consider a textbox to take country name input from user.

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

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

<datalist id="countries">
	<option value="India">India</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>

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

  • Chrome 31
  • Firefox (Gecko) 26.0
  • Internet Explorer 10.0
  • Opera 19.0

About Sallah Ud Din Sarwar

I am a multi skilled Software Engineer with over 4 year’s industry experience in designing and developing Object oriented solutions in Multi layered & N-Tired. I have substantial success to my credit. I have consistently handled complex problems to the satisfaction of my clients by working in stressful situations. I enjoy learning and applying new technologies in a dynamic and forward thinking professional environment.

Check Also

Interview questions and answers ranging from basic to advanced C#

C# is a type-safe and simple object-oriented programming language. Interview questions and answers ranging from …

Leave a Reply