HTML list Attribute
The HTML list attribute associates an input field with a datalist element, providing a predefined list of options for user selection.
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.
Attribute Values:
Name | Description |
|---|---|
datalist_id | It is used to specify the Id of the datalist that will used to make a link up with the input element. |
HTML list attribute Examples
Here we have some basic examples of HTML list attribute.
Example 1: In this example we demonstrates the use of the list attribute within an input field, providing a predefined list of car names for user selection.
<!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:
Example 2: In this example we demonstrates the list attribute, providing a predefined list of car names for selection, with a button to display the chosen option.
<!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() {
let o1 = document.getElementById("carsInput").value;
document.getElementById("output").innerHTML = "You select "
+ o1 + " option";
}
</script>
</body>
</html>
Output: 
Supported Browsers: The browser supported by list attribute are listed below:
HTML list Attribute – FAQs
What types of <input> elements can use the list attribute?
The list attribute can be used with <input> types such as text, search, url, tel, email, number, date, color, and others that accept user input.
What is the purpose of the <datalist> element?
The <datalist> element provides a list of predefined options that users can select from, which is referenced by the list attribute on an <input> element.
Can you use multiple list attributes for a single <input> element?
No, an <input> element can only reference one <datalist> using the list attribute. However, the <datalist> can contain multiple options.
Can the list attribute be used with input validation?
Yes, the list attribute can work with input validation, allowing users to select from valid options while still permitting manual input.
How do you provide default values in a <datalist>?
Use the value attribute inside an <option> within a <datalist> to suggest predefined values. However, there is no default selection, and users must actively choose an option or type their input.
