In HTML, the datalist Data List tag used to provide an auto-complete feature on the form element. This tag generates a drop-down list with predefined options for users to select. The datalist tag is one of the new sectioning element in HTML 5.
By default, the options are hidden , and the list of them becomes available when the user starts typing. For Example, when you do a search from your search engine it will suggest the related terms. It is helpful to save time and reduces errors.
The datalist tag is used with an element that contains a “list” attribute. Predefined options for input are enclosed in a nested element.
Estimated reading time: 2 minutes
Syntax:
This tag contains both the starting datalist tag and ending datalist tag. The content is written between these two tags.
<datalist>... </datalist>
HTML datalist Tag:
| HTML datalist tag | Defines a list of suggested valuer for an input element |
| Content categories | Flow content, phrasing content, palpable content. |
| Permitted content | Either Phrasing content or zero or more tags. |
| Tag omission | None, both opening and closing tags are mandatory. |
| Permitted parents | Any HTML element that accepts phrasing content. |
| Implicit ARIA role | listbox |
| Permitted ARIA roles | No role permitted |
| DOM interface | HTMLDataListElement |
Sample of the HTML datalist tag:
Here is the example for HTML Data List tag.
<!DOCTYPE html>
<html>
<head>
<title>Title of the Document</title>
</head>
<body>
<div>Select your browser:</div>
<input list="Browsers" />
<datalist id="Browsers">
<option value="Google Chrome">
<option value="Safari">
<option value="Firefox">
<option value="Opera">
<option value="Maxthon">
</datalist>
</body>
</html>
Note : The datalist tag’s “id” attribute must be equal to the element’s “list” attribute.
Result:
Download Sample File:
Attributes:
The HTML Data list tag supports both Global Attributes and Event Attributes.
Browser Support:
Related Articles:
The post HTML datalist Data List Tag appeared first on Share Point Anchor.
Top comments (0)