HTML Datalist Tag
The HTML<datalist> tag is is used to provide an auto complete feature.
As the user starts typing it provides a list of predefined options related to the user input.
HTML Datalist Tag Examples
The<datalist> tag should be used with an <input> element that contains a list attribute which is linked with the datalist id.Let's see the simple example of HTML5 datalist tag. If you press C from keyboard, it will show a list of browser starting with C letter. The
type attribute defines the format of the video file used.
Example
Try this code »
<!DOCTYPE html>
<html lang="en">
<head>
<title> HTML datalist Tag </title>
<meta charset="UTF-8">
</head>
<body>
<form action="action-page.php" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Microsoft Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
<option value="UC Browser">
</datalist>
<input type="submit">
</form>
</body>
</html>
<html lang="en">
<head>
<title> HTML datalist Tag </title>
<meta charset="UTF-8">
</head>
<body>
<form action="action-page.php" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Microsoft Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
<option value="UC Browser">
</datalist>
<input type="submit">
</form>
</body>
</html>
Output
Browser Support
 Edge |
 Chrome |
 Firefox |
 Opera |
 Safari |
|
|---|---|---|---|---|---|
<datalist> |
Recommended :
Color Picker
List of color names supported by all browser »
Character Code
List of character codes to display special character »
Language Code
List of all language supported by all browser »
Country Code
List of Country code supported by all browser »