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.
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>
<input type=”text” list=”months” />
Now if you run the html page you have created your output will look like the below image.
You can download the full source code here.
You May Also Like…
If you like this article please share it. Comment your suggestions in the comment section.