 |
| USE OF HTML5 DATALIST TAG |
HTML5 <datalist> Tag
HTML5 defines <datalist> tag to define predefined options in an <input> element. The datalist Works as an autocomplete feature for input elements. This helps in getting input faster and user experience is also improved.
For example, when you search something on Google or any other search engine, the search bar shows you the list of related terms in your query. Similar to the search engine bar, you can also create such input boxes that when the value is input by the use, show a drop-down list of related predefined options.
Many times the user unknowingly inputs incorrect information. Many types of problems can be generated from Incorrect Information. You can help the user to input the correct information by using the <datalist> tag. Whenever the user tries to type an input, then the list of already defined options is displayed. The user can choose the option from this list. In this way, you can avoid typing mistakes of the user.
The <input> element and <datalist> element must be bond together to show the list of predefined options. For this, the list attribute is defined in the <input> element. In an <input> element, the list attribute is used to define the related list of the element. In this attribute, you can pass the id value of the <datalist> element.
Browser Compatibility
All browsers don’t support the <datalist> tag. This tag is not supported by Apple Safari and Internet Explorer. This element does not support older versions of other browsers.
1. Google Chrome - 20.0
2. Firefox - 4.0
3. Internet Explorer - 10.0
4. Opera - 9.0
5. Safari - Doesn't Support
Syntax of HTML5 <datalist> Tag
The general syntax for <datalist> tag is given below.
<input type = "text" name = "Name_Id" list = "Datalist_Id">
<datalist id = “Datalist_Id">
<option value = "option-1">
<option value = "option-2">
.....
<option value = "option-n">
</ datalist>
As you can see in the syntax above, the value of the list attribute in the <input> element and the value of the id attribute in the <datalist> element will be same. The <option> tag is used to define the options in <datalist>. In the <option> tag's value attribute, you can define the value that you want to show as a list.
Attributes of HTML5 <datalist> Tag
<datalist> supports all the global and event attributes of HTML such as id, class, onload, onpageshow, ononline etc.
How to use datalist tag in html5?
Example of HTML5 <datalist> Tag
<!DOCTYPE html>
<html>
<head>
<title> Example of HTML5 datalist </title>
</head>
<body>
<form>
<input type="text" name="countrySearch" list="CountryNameList" placeholder="Search Country Name">
<datalist id = "CountryNameList">
<option value = "America">
<option value = "Russia">
<option value = "China">
<option value = "France">
<option value = "England">
<option value = "Australia">
<option value = "Germany">
<option value = "India">
</datalist>
</form>
</body>
</html>
The above example produces the below output.
 |
| HTML5-datalist-Tag-example |
sdgh
ReplyDelete