HTML <datalist> Tag
The HTML <datalist> tag is used to create a list of input options, predefined by the <input> tag. Learn how to use the <datalist> tag with examples.
The <datalist> tag is one of the HTML5 elements. It is used to create a list of input options, defined inside the <datalist> element and linked to an <input> field via the list attribute. Initially, the options are hidden, and the list of them becomes available when the user starts typing. The list attribute of the <input> tag must match the id of the <datalist> element.
Predefined options for input are enclosed in nested <option> elements.
Syntax
The <datalist> tag comes in pairs. The content is written between the opening (<datalist>) and closing (</datalist>) tags.
Example of the HTML <datalist> tag:
HTML <datalist> Tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<div>Choose browser</div>
<input list="browsers" />
<!-- The list attribute value matches the datalist id -->
<datalist id="browsers">
<option value="Opera">
<option value="Safari">
<option value="Firefox">
<option value="Google Chrome">
<option value="Maxthon">
</datalist>
</body>
</html>Attributes
The <datalist> tag supports Global Attributes and the Event Attributes.
Practice
What is the usage of the HTML <datalist> tag?