Skip to content
Related Articles

Related Articles

HTML <datalist> Tag

View Discussion
Improve Article
Save Article
  • Difficulty Level : Easy
  • Last Updated : 21 Jul, 2022
View Discussion
Improve Article
Save Article

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

 


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!