Skip to content
Related Articles

Related Articles

Improve Article

HTML | list Attribute

  • Difficulty Level : Basic
  • Last Updated : 16 Jul, 2021
Geek Week

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>Datalist Tag</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
  • Internet Explorer 10.0
  • Firefox 4.0
  • Opera 9.6

 

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :