Skip to content
Related Articles

Related Articles

HTML | list Attribute
  • Difficulty Level : Basic
  • Last Updated : 19 Jul, 2019

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:



Program 1:




<!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:




<!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

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :