Open In App
Related Articles

Difference between <datalist> and <select> tags in HTML

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

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

fre

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.


Last Updated : 12 Jan, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads