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.
Output:
Now if you run the html page you have created your output will look like the below image.
Source Code:
You can download the full source code here.
If you like this article please share it. Comment your suggestions in the comment section.
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.
<html>
<head>
<title>HTML5
DataList Control</title>
</head>
<body>
<div>
<label>
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">
</datalist>
</div>
</body>
</html>
Output:
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...
- Disable cut copy paste operation on a textbox using asp.net/javascript
- Find difference between two dates using javascript
- Refresh page periodically in C#.Net/ASP.Net
- How To Use HTML5 DataList Control
- Add remove select and set items in select drop down list
- How to convert the typing language to tamil using javascript
If you like this article please share it. Comment your suggestions in the comment section.
Comments
Post a Comment