HTML Tutorial
HTML Introduction
HTML Tutorial
HTML Tags
HTML Attributes
HTML Formatting
HTML Heading
HTML Paragraph
HTML Anchor
HTML Image
HTML Table
HTML Fonts
HTML Lists
HTML Ordered List
HTML Unordered List
HTML Description List
HTML Forms
HTML Forms
HTML Input Types
HTML Form Attributes
HTML Tags
HTML Title
HTML Marquee Tag
HTML Code
HTML Quotes
HTML Button Tag
HTML BR Tag
HTML HR Tag
HTML Bold Tag
HTML 5
HTML5 Tutorial
HTML Meter
HTML Article Tag
HTML Footer Tag
HTML Figure Tag
HTML Dialog Tag
HTML 5 Advance
HTML Doctype
HTML Meta Tags
HTML Styles
HTML Scripts
HTML Progress Tag
HTML Symbols
HTML Media
HTML Video Tag
HTML Audio Tag
HTML Youtube Video
HTML 5 Form
HTML Datalist Tag
HTML keygen Tag
HTML output Tag
HTML 5 Graphics
HTML Canvas
HTML SVG
Reading Section
Interview Questions
HTML 5 Quiz
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.
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>
<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
Browser Support
 Edge |
 Chrome |
 Firefox |
 Opera |
 Safari |
|
|---|---|---|---|---|---|
<datalist> |
Recommended :
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 »