Open In App
Related Articles

HTML <datalist> Tag

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

The <datalist> tag is used to provide an in autocomplete feature in the HTML files. It can be used with an input tag so that users can easily fill in the data in the forms using selecting the data. The <datalist> element’s id should be equal to the <input> element’s list attribute, this helps to bindan them together.

The <datalist> in HTML offers selectable options for the <input>, while <option> groups choices within a dropdown menu for better organization. The <datalist> tag also supports the Global Attributes and Event Attribute in HTML.

Syntax:

<datalist> ... </datalist>

Example 1: In this example, we will see implementation of the datalist Tag with an example.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            text-align: center;
        }
    </style>
</head>
 
<body>
    <h1 style="color: green;">GeeksforGeeks</h1>
    <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: 

ugv

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
  • Edge 12
  • Firefox 4
  • Opera 9.5
  • Safari 12.1


Last Updated : 26 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads