The <datalist> tag is used to provide autocomplete feature in the HTML files. It can be used with an input tag so that users can easily fill the data in the forms using select the data.
Syntax:
<datalist> ... </datalist>
Example 1: The below code explains datalist Tag.
HTML
<!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>
|
Output:
Example 2: The <datalist> tag object can be easily accessed by an input attribute type.
HTML
<!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>
|
Output:
Supported Browsers:
- Google Chrome 20.0 and above
- Edge 12.0 and above
- Internet Explorer 10.0 and above
- Firefox 4.0 and above
- Opera 9.5 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 :
21 Jul, 2022
Like Article
Save Article