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.


<!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
Microsoft Edge browser.png Edge
Chrome browser.png Chrome
Firefox browser.png Firefox
Opera browser.png Opera
safari browser.png Safari
<datalist>
Yes
Yes
Yes
Yes
Yes








Become a Patron!

Note: If the updated content is not visible to you please refresh the cookies by pressing CTRL + Shift + R.