Skip to content
Related Articles

Related Articles

HTML | list Attribute

Improve Article
Save Article
  • Difficulty Level : Basic
  • Last Updated : 24 Aug, 2022
Improve Article
Save Article

The list attribute in HTML is used to identify a list of pre-defined options for an <input> element to suggest the user.
Usage: This attribute is used by the <input> element.

Syntax: 

<input list="name">

Where, name is a string that will work as id and will be used to link the <input> element with the <datalist> element.
Below programs illustrate the list attribute:

Attribute Values:

  • datalist_id: It is used to specify the Id of the datalist that will used to make a link up with the input element.

Program 1: 

HTML




<!DOCTYPE html>
<html>
<head>
    <title>HTML list Attribute</title>
</head>
<body>
    <h1 style="color:green">HTML list Attribute</h1>
    <form action="">
        <label>Your Cars Name: </label>
        <input list="cars">
        <datalist id="cars">
            <option value="BMW" />
            <option value="Bentley" />
            <option value="Mercedes" />
            <option value="Audi" />
            <option value="Volkswagen" />
        </datalist>
    </form>
</body>
</html>

Output: 

list

Program 2: 

HTML




<!DOCTYPE html>
<html>
<head>
    <title>HTML | list Attribute</title>
</head>
<body style="text-align:center">
    <h1 style="color:green">HTML list Attribute</h1>
    <form action="">
        <label>Your Cars Name: </label>
        <input list="cars" id="carsInput">
        <datalist id="cars">
            <option value="BMW" />
            <option value="Bentley" />
            <option value="Mercedes" />
            <option value="Audi" />
            <option value="Volkswagen" />
        </datalist>
        <button onclick="geek()" type="button">
            Click Here
        </button>
    </form>
    <p id="output"></p>
 
    <script type="text/javascript">
        function geek() {
            var o1 = document.getElementById("carsInput").value;
 
            document.getElementById("output").innerHTML = "You select "
                + o1 + " option";
        }
    </script>
</body>
</html>

Output: 
Before clicking the button: 

list

After clicking the button: 

list

Supported Browsers: The browser supported by list attribute are listed below: 

  • Google Chrome 20.0 and above
  • Edge 12.0 and above
  • Firefox 4.0 and above
  • Opera 12.1 and above
  • Safari 12.1 and above

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!