How To Use HTML5 DataList Control

As a develop we are very familiar with the html controls. Now in html 5 many new controls has been added to the existing collection. HTML5 DataList is one of the type in the new collection. I am going to explain about what is datalist control and how to use datalist control in our projects.
What is HTML5 DataList Control?

Datalist is a tag which is used to provide list of pre-defined values to an input control. The datalist control is used to provide auto complete feature to an input control. Users can see the list of predefined values while clicking on the down icon present with the input element. We can assign list of values using list attribute of input element.

DataList Example:

Here to explain how html5 datalist tag is used i have created a input element that will accept the month as the input. And i have defined the datalist which defines all the months. And now in the list attribute if the input element i have mentioned the id of the datalist control. Below is the entire code i used to explain.

    <title>HTML5 DataList Control</title>
            Enter Month:</label>
        <input type=”text” list=”months” />
        <datalist id=”months”>
             <option value=”January”>
             <option value=”February”>
             <option value=”March”>
             <option value=”April”>
             <option value=”May”>
             <option value=”June”>
             <option value=”July”>
             <option value=”September”>
             <option value=”October”>
             <option value=”November”>
             <option value=”December”>


Now if you run the html page you have created your output will look like the below image.

Output of How To Use HTML5 DataList Control

Source Code:

You can download the full source code here.

Sourcecode of How To Use HTML5 DataList Control

Subscribe For Latest Updates

Signup for our newsletter and get notified when we publish new articles for free!