HTML | list Attribute
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 and above
- Edge 12.0 and above
- Firefox 4.0 and above
- Opera 12.1 and above
- Safari 12.1 and above
Please Login to comment...