Skip to main content

How To Use HTML5 DataList Control

By Anonymous
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.

<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.

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
Labels:

Comments

Post a Comment

Popular posts from this blog

Code To Convert rupees(numbers) into words using C#.Net

By
Introduction: In my previous article I have explained about how to validate emailid using javascript . In this article I am going to explain about code used to convert rupees(numbers) into words using C#.Net . Explanation: For explanation purpose I have a page. It has a textbox to input the numbers. And when you click on the convert to words button then it will convert the input numbers into words and shows it in the below label. Below is the C# code used to do this functionality. public static string NumbersToWords( int inputNumber) {     int inputNo = inputNumber;     if (inputNo == 0)         return "Zero" ;     int [] numbers = new int [4];     int first = 0;     int u, h, t;     System.Text. StringBuilder sb = new System.Text. StringBuilder ();     if (inputNo < 0)     { ...
16 comments
Read More...

Puzzles for kids - 12 Days Of Christmas

By
According to the traditional song, on the first day of Christmas (25th December), my true love sent to me: . A partridge in a pair tree On the second day of Christmas (26th December), my true love sent to me THREE presents: . Two turtle doves . A partridge in a pear tree On the third day of Christmas (27th December and so on) my true love sent to me SIX presents: . Three French hens . Two turtle doves . A partridge in a pear tree This carries on until the the twelfth day of Christmas, when my true love sends me: Twelve drummers drumming Eleven pipers piping Ten lords a-leaping Nine ladies dancing Eight maids a-milking Seven swans a-swimming Six geese a-laying Five gold rings Four calling birds Three French hens Two turtle doves A partridge in a pear tree After the twelve days of Christmas are over, how many presents has my true love sent me altogether? Our Solution: 1 + 3 + 6 + 10 + 15 + 21 + 28 + 36 + 45 + 55 + 66 + 78 = 364 presents Which is really interesting when you think ...
Post a Comment
Read More...

Asp.Net DataTable Manipulation - Add, Update,Delete & Sort DataTable in C#.Net & VB.Net

By Anonymous
In the asp.net developer's life it is very common to come across the datatable manipulation. So here i have decided to explain the datatable manipulation like adding records to datatable, editing and updating datatable records,deleting records from datatable based on the condition and finally sorting datatable based on columns.
Post a Comment
Read More...