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

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 »

Latest Updates

PHP Introduction

How to Run a PHP program in Xampp?

How can I create a phpinfo.php page?

How to Define a Variable in PHP

PHP Echo and Print Statements

Working with PHP Operators

Understanding the PHP Data Types

How to Write Comments in PHP

How to Define a Constant in PHP

PHP if...else...elseif Statements