<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.


Some suggestions: