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
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
24 Aug, 2022
Like Article
Save Article