<datalist> Tag Examples
Examples of the datalist
tag in HTML 5
Example of <datalist> with inline list values
(see <datalist> tag demo above)
<label>What is your favorite color? <input name="color" type="text" list="html-colors"/> <datalist id="html-colors"><br/>Some suggestions: <option value="black">Black</option> <option value="blue">Blue</option> <option value="fuchsia">Fuchsia</option> <option value="gray">Gray</option> <option value="green">Green</option> <option value="lime">Lime</option> <option value="maroon">Maroon</option> <option value="navy">Navy</option> <option value="olive">Olive</option> <option value="purple">Purple</option> <option value="red">Red</option> <option value="silver">Silver</option> <option value="teal">Teal</option> <option value="white">White</option> <option value="yellow">Yellow</option> </datalist> </label>
Example of <datalist> with <option label>
s
<input name="datalist-item" list="datalist-items" size="40" style="border: 1px solid black" /> <datalist id="datalist-items"><br/>Some suggestions: <option value="datalist item without label"></option> <option value="datalist item with label" label="label for datalist item"></option> <option value="datalist item with text">text for datalist item</option> </datalist>
In browsers that do not support the <datalist> tag, the text content of any <option> tags ("text for datalist item" above) appears along with any other fallback code. The <p>Some suggestions:</p>
is included to indicate to the user what the fallback text from the <option>s means.
Here is an actual working demo of the code above. (Do View Source to verify that this page is using the HTML 5 DOCTYPE. You can also verify it is Valid HTML 5 using the HTML Validator.)
Note: The first browser where this datalist demo actually works is Opera. It may not work yet in other browsers.