Open In App
Related Articles

HTML <datalist> Tag

Improve Article
Improve
Save Article
Save
Like Article
Like

The <datalist> tag is used to provide autocomplete feature in the HTML files. It can be used with an input tag so that users can easily fill the data in the forms using select the data.
Syntax:

<datalist> ... </datalist>

Example 1: The below code explains datalist Tag.

HTML




<!DOCTYPE html>
<html>
<body>
    <form action="">
        <label>Your Cars Name: </label>
        <input list="cars">
            
        <!--datalist Tag starts here -->
        <datalist id="cars">
            <option value="BMW"/>
            <option value="Bentley"/>
            <option value="Mercedes"/>
            <option value="Audi"/>
            <option value="Volkswagen"/>
        </datalist>
        <!--datalist Tag ends here -->
 
    </form>
</body>
</html>


Output: 

Example 2: The <datalist> tag object can be easily accessed by an input attribute type.

HTML




<!DOCTYPE html>
<html>
<body>
    <form action="">
        <label>Your Cars Name: </label>
        <input list="cars" id="carsInput" />
 
        <!--datalist Tag starts here -->
        <datalist id="cars">
            <option value="BMW" />
            <option value="Bentley" />
            <option value="Mercedes" />
            <option value="Audi" />
            <option value="Volkswagen" />
        </datalist>
        <!--datalist Tag ends here -->
 
        <button onclick="datalistcall()" type="button">
            Click Here
        </button>
    </form>
    <p id="output"></p>
 
 
 
    <!-- Will display the select option -->
    <script type="text/javascript">
        function datalistcall() {
            var o1 = document.getElementById("carsInput").value;
            document.getElementById("output").innerHTML =
              "You select " + o1 + " option";
        }
    </script>
</body>
</html>


Output:

Supported Browsers: 

  • Google Chrome 20.0 and above
  • Edge 12.0 and above
  • Internet Explorer 10.0 and above
  • Firefox 4.0 and above
  • Opera 9.5 and above
  • Safari 12.1 and above

 


Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 21 Jul, 2022
Like Article
Save Article
Previous
Next
Similar Reads
Complete Tutorials