web training room for online courses
Online Training for Asp.net MVC Web Designing Development, MS SQL, Digital Marketing

HTML5 Datalist Tag Example

In this article you learn datalist tag <datalist></datalist> that you have never used in earlier HTML.

In datalist now you can have a list of data and associate the list with some text field.

html5 datalist
datalist in html5 example
Datalist Implementation

This is how you can write datalist element in html code, This could be very useful if you have small list, and want to provide user friendly functionality with search option .

<label>
Enter country name
<input type="text" id="txtCountryList" list="dlCountryList">
<datalist id="dlCountryList">
<option value="India">
<option value="USA">
<option value="UK">
<option value="Australia"> <option value="Canada">
<option value="UAE">
<option value="Denmark">
<option value="Singapore">
<option value="South Africa">
<option value="Bangladesh">
<option value="China">
<option value="Germany">
</datalist>
</label>

Result: Enter any country name in the text box below

Earlier we used to write JavaScript function to achieve this functionality, now a simple html5 element can do this, it reduce huge JavaScript coding time.

Useful HTML5 Elements

Now you can implement auto complete feature of any textbox without writing any JavaScript code.

Comment
Name Email Website
Subscribe
 
datalist Tag in HTML5
HTML5 Datalist Tag


Consulting