In our previous tutorial I have explained HTML5 Datalist with a simple example. If you are a novice HTML programmer, then you would have a confusion on difference between <datalist> and <select> elements. The reality is that, both are used for the entirely different purposes.
Datalist Tag
This tag is used for suggesting the possible values from the large array of values relevant to that filed. This element is a text field. Normally this field would have larger array where user can choose the values by typing the part of the words. Also user can input their own value instead of selecting from the list. This element is newly introduced as part of the HTML5 specification. Unlike in the select element, datalist can have only one value, it can not have two values like one for label and another one for real value of that selection.
Select Tag
This is old tag from the previous versions, this helps to list down the only valid value for that field. User won’t have privilege to input their own value. It imposes the valid values and asking user to select any one from the list. Select list can have label and value which can be different each other.
The above definitions would make things very clear for you. If I would write down a simple example in the below section with screenshots, that should be perfect for understanding the difference between datalist and select elements.
Datalist and Select Tag example
[code lang=”html”]
<!DOCTYPE html>
<html>
<head>
<title>Datalist and Select Element </title>
</head>
<body>
<h3>DataList Example</h3>
<input list= "countries">
<datalist id= "countries">
<option value= "India"></option>
<option value= "USA"></option>
<option value= "UK"></option>
<option value= "Germany"></option>
<option value= "Australia"></option>
</datalist>
<h3>Select Example</h3>
<select name="countries">
<option value= "India">India</option>
<option value= "USA">USA</option>
<option value= "UK">UK</option>
<option value= "Germany">Germany</option>
<option value= "Australia">Australia</option>
</select>
</body>
</html>
[/code]
Output…
Leave a Reply