Difference between <datalist> and <select> tags in HTML
<datalist> and <select> tags generally are used for choosing an option from the given list. But the main difference between both is that in the <datalist> tag the user can enter their input and add that as an option with the help of the <input> element whereas the <select> tag doesn’t provide this feature.
Table of Content
- HTML <datalist> tag
- HTML <select> tag
HTML <datalist> tag:
The <datalist> tag provides predefined options for an <input> element and enables autocomplete functionality. When a user starts typing in the <input> element, they will see a list of pre-defined options beginning with the letter or word they have typed. It is important to note that for the <datalist> tag to work, the id of the tag must be the same as the id attribute of the <input> element.
Syntax:
<datalist id="courses">
<option value="DSA">
<option value="ML and AI">
</datalist>
Example 1: Implementation of <datalist> tag
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title >< datalist > tag</ title > </ head > < body > < h1 >w3wiki</ h1 > < h3 >HTML < datalist > tag</ h3 > < label for = "courses" > Choose your favorite course from the list: </ label > < input list = "courses" name = "course" id = "course" > < datalist id = "courses" > < option value = "Java" > < option value = "C++" > < option value = "Python" > < option value = "DSA" > < option value = "ML and AI" > </ datalist > < p style = "color: gray;" > User can choose an option from a given options </ p > </ body > </ html > |
Output:
HTML <select> tag:
This tag creates a drop-down menu list in a webpage that is mostly used in the online forms that we all use for collecting the user input. The <select> tag contains <option> tag to display the list of available options from the drop-down list. The tag has various attributes that include <name>, <autofocus>, etc.
Syntax:
<select id="courses">
<option value="Java">Java</option>
<option value="C++">C++</option>
</select>
Example2: Implementation of <select> tag in an HTML document .
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title >< select > tag</ title > </ head > < body > < h1 >w3wiki</ h1 > < h3 >HTML < select > tag</ h3 > < label for = "courses" > Choose your favorite course from the list: </ label > < select id = "courses" > < option value = "Java" >Java</ option > < option value = "C++" >C++</ option > < option value = "Python" >Python</ option > < option value = "DSA" >DSA</ option > < option value = "ML and AI" >ML and AI</ option > </ select > < p style = "color: gray;" > User has to choose any one option from a list. </ p > </ body > </ html > |
Output:
Differences Between <datalist> and <select> tag
<select> tag |
<datalist> tag |
---|---|
The user can choose only one option from the given list. | The user can choose any option from the given list but can also use its own input. |
This tag is a form input type. | This tag is not a form input type. |
The user has to scan a long list so as to select an option. | The user can easily input the option and get the hints and then can be chosen by the user. |
The user can be restricted to a list of options. | The user is not restricted by the list of options. |
It doesn’t provide the auto-complete feature. | It provides the auto-complete feature. |
Contact Us