<datalist> Tag Syntax
<body> ... ... phrasing content expected ... <datalist id="..."> <option value="..." label="...">... text content ...</option> ... phrasing content ... </datalist>... ... </body>
Rules for coding HTML datalist elements
Make sure you understand the difference between a tag and element and are familiar with the definitions of namespace and other HTML terms.
- Code the datalist element where phrasing content is expected.
- Begin the datalist element with a starting <datalist> tag. The element name uses lower case letters and should be in the HTML namespace, which it will pick up automatically from the
xmlns
attribute on the <html> tag. - Inside the <datalist> starting tag, include an id attribute that can be used to refer to the data list.
- Inside the datalist element, between the starting
<datalist>
tag and the ending</datalist>
tag, code the option elements for the predefined suggestions. - Also inside the datalist element,code the fallback text and/or phrasing content.
- End the datalist element with a matching
</datalist>
closing tag.
datalist Content Model
Content of the datalist element
The content of the datalist element consists of a list of option elements along with fallback content for browsers that do not support the <datalist> tag.
Note that the options cannot be grouped with the <optgroup> tag like the options in a <select> list can.
According to the HTML 5 specifications:
In the rendering, the datalist element represents nothing and it, along with its children, should be hidden.
However, this applies only to browsers that support the <datalist> tag. Browsers that do not support <datalist> will display the content of the datalist element, including the text content of any child option elements. See the examples of the <datalist> tag below for how to hande this.