The list attribute is used to associate an <input> field with a <datalist> element to provide predefined options for the input field.
Definition and Usage
➔ The list attribute of an <input> field takes the id of a <datalist> element as its value.
➔ This is useful when an input field requires an "autocomplete" or dropdown suggestion feature.
Syntax
//In HTML
<form action="#" method="get">
<label for="browser">Choose a fruit from the list:</label>
<input list="fruits" name="fruit" id="fruit">
<datalist id="fruits">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="berry">Berry</option>
<option value="cherry">Cherry</option>
<option value="orange">Orange</option>
</datalist>
<br><br>
<input type="submit" value="Submit" onclick="myFunction()">
</form>
//In JavaScript
<script>
const element = document.getElementById('fruit');
element.list = "fruits";
element.setAttribute('list', 'fruits');
</script>
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML list attribute example</title>
<style>
.mydiv {
border: 2px solid black;
padding: 30px;
background: rgb(100, 100, 100, 0.1);
}
input[list="fruits"] {
padding: 3px;
}
input[type='submit'] {
margin: 10px 0px;
padding: 10px 20px;
border-radius: 5px;
background-color: #f6f6f6;
color: #000;
}
input[type='submit']:hover {
background-color: #000;
color: white;
}
</style>
</head>
<body>
<div id="sample" class="mydiv">
<h3>HTML list attribute example</h3>
<p>The list attribute is used to provide predefined options for an input field.</p>
<form action="#" method="get">
<label for="browser">Choose a fruit from the list:</label>
<input list="fruits" name="fruit" id="fruit">
<datalist id="fruits">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="berry">Berry</option>
<option value="cherry">Cherry</option>
<option value="orange">Orange</option>
</datalist>
<br><br>
<input type="submit" value="Submit" onclick="myFunction()">
</form>
</div>
</body>
<script>
function myFunction() {
event.preventDefault();
const url = new URL(window.location.href);
//const data={name:value, name2:value2}//name-value pair.
const data = { fruit: document.getElementById("fruit").value };
const params = new URLSearchParams(data);
url.search = params.toString();
history.replaceState(null, '', url);
alert(url.href);
}
</script>
</html>
Click on the "Try it Now" button to see how it works.