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)