Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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

  • Last Updated : 24 Jan, 2022

In this article, we’ll be differentiating the two tags: <datalist> and <select> tag. Generally, both the tags 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 its own 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: This tag specifies the predefined options for an <input> element. This tag also gives the autocomplete feature for the <input> element of HTML. Like once the user starts typing the input element of <datalist> tag, the user will see the pre-defined options starting with the letter or word typed by the user. Note that to use the <datalist> tag, the id of the tag must be the same as of the <input> element attribute.

Syntax:

<datalist id="courses">
   <option value="DSA">
   <option value="ML and AI">
</datalist>

Example:

HTML




<!DOCTYPE html>
<html>
  
<body>
    <h1>GeeksforGeeks</h1>
    <h3>Using Datalist</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 <br>and also give 
        an input and filter values from 
        the option list.
    </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>

Example:

HTML




<!DOCTYPE html>
<html>
  
<body>
    <h1>GeeksforGeeks</h1>
    <h3>Using Select</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.

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!