HTML <datalist> Tag
Last Updated :
26 Dec, 2023
The <datalist> tag is used to provide an in
autocomplete feature in the HTML files. It can be used with an input tag so that users can easily fill in the data in the forms using selecting the data. The <datalist>
 element’s id should be equal to the <input> element’s list attribute, this helps to bindan
them together.
The <datalist>
in HTML offers selectable options for the <input>
, while <option>
groups choices within a dropdown menu for better organization. The <datalist>
 tag also supports the Global Attributes and Event Attribute in HTML.
Syntax:
<datalist> ... </datalist>
Example 1: In this example, we will see implementation of the datalist Tag with an example.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport"
content = "width=device-width, initial-scale=1.0" >
< title >Document</ title >
< style >
body {
text-align: center;
}
</ style >
</ head >
< body >
< h1 style = "color: green;" >GeeksforGeeks</ 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: 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
- Edge 12
- Firefox 4
- Opera 9.5
- Safari 12.1
Share your thoughts in the comments
Please Login to comment...