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>

Output

HTML datalist Tag Example

Browser Support

Element	Edge	Chrome	Firefox	Opera	Safari
`<datalist>`	Yes	Yes	Yes	Yes	Yes

Recommended :

1 . Creating a Footer in HTML
2 . What is an HTML Tag?
3 . Use of Quotation in HTML
4 . HTML Formatting Tags

5 . how to embed YouTube video in HTML
6 . Progress Bar with HTML and CSS
7 . Photography Snippets using HTML and CSS
8 . BootStrap 4 Photography Snippets

Topics

BootStrap Snippets
JS Keywords
Form Events
CSS Navbar
JS Objects
Cookies
Forms
Icons
Buttons
Progress
Footer
Errors