HTML <datalist> Tag

Last Updated : 26 Dec, 2023

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>