Home » HTML » HTML Datalist Tag

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">
<title> HTML datalist Tag </title>
<meta charset="UTF-8">
<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">
<input type="submit">


HTML datalist Tag Example

Browser Support

Microsoft Edge browser.png Edge
Chrome browser.png Chrome
Firefox browser.png Firefox
Opera browser.png Opera
safari browser.png Safari