HTML5 <datalist> Tag
Topic: HTML5 Tags ReferencePrev|Next
Description
The <datalist> element specifies a set of pre-defined options for an <input> element. It can be used to provide the quick choices for an input field like an "autocomplete" feature. Its not only saves the time of a user but also reduces errors, because the user has less likelihood of making a spelling mistake. The list attribute of the input element is used to bind it together with a datalist element.
The following table summarizes the usages context and the version history of this tag.
| Placement: | Block |
|---|---|
| Content: | <option> elements |
| Start/End Tag: | Start tag: required, End tag: required |
| Version: | New in HTML5 |
Syntax
The basic syntax of the <datalist> tag is given with:
The example below shows the <datalist> tag in action.
Example
Try this code »<p>Enter your favorite browser name:</p>
<input type="text" list="browsers">
<datalist id="browsers">
<option value="Firefox">
<option value="Chrome">
<option value="Internet Explorer">
<option value="Opera">
<option value="Safari">
</datalist>Tag-Specific Attributes
The <datalist> tag doesn't have any specific attribute.
Global Attributes
Like all other HTML tags, the <datalist> tag supports the global attributes in HTML5.
Event Attributes
The <datalist> tag also supports the event attributes in HTML5.
Browser Compatibility
The <datalist> tag is supported in all major modern browsers.
 |
Basic Support—
|
Further Reading
See tutorial on: HTML Forms.
