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.
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 >GeeksforGeeks</ 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 >GeeksforGeeks</ 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
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. |
Last Updated :
12 Jan, 2024
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...