HTML | list Attribute - GeeksforGeeks

21 Jan, 2022
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:  
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:  
After clicking the button:  
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.
hritikbhatnagar2182
ManasChhabra2
HTML-Attributes
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to update Node.js and NPM to next version ?
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?