HTML datalist Tag
Last Updated :
24 Feb, 2025
Improve
The <datalist> tag in HTML provides a way to display a list of predefined options for <input> elements.
This allows users to either type their own value or select from the list of suggestions, making data entry more efficient.
<!DOCTYPE html>
<html>
<body>
<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>
Syntax
<input list="datalist-id">
<datalist id="datalist-id">
<option value="Option 1">
<option value="Option 2">
<option value="Option 3">
...
</datalist>
Features of <datalist> Tag
- Autocomplete: When a user starts typing in the associated <input> field, the browser suggests matching options from the <datalist>.
- User Input: Users can either select from the list of options or enter a custom value that is not in the list.
- Cross-browser Support: Most modern browsers support the <datalist> element, but it's always good to check for compatibility if you're targeting older browsers.
More Example
<!DOCTYPE html>
<html>
<body>
<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="datalistcall()" type="button">
Click Here
</button>
</form>
<p id="output"></p>
<script type="text/javascript">
function datalistcall() {
var o1 = document.getElementById("carsInput").value;
document.getElementById("output").innerHTML =
"You select " + o1 + " option";
}
</script>
</body>
</html>
