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




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