datalist

<datalist> element – think of a combination of an input text element and selection list.

Usage: typically used where there is the likelihood of a visitor entering a value of other (not one of the items in the list). The alternate approach would be two fields (one with a selection list for the common answers, the other for the option other and free form text entry).

Permitted Content: typically contains zero or more <option> elements.

Tag omission: both start and end tag must be present.

Example code:

<input type=”text” name=”homePlanet” id=”homePlanet” list=”homeP” />
<datalist id=”homeP”>
<option value=”Earth” />
<option value=”Vulcan” />
<option value=”Clingon” />
<option value=”Romulus” />
</datalist>

Example page (opens in a new tab/ window – view source code): http://learning-html5.info/examples/ExampleForm5.html

Default display properties: will appear as text input box.

Common Attributes:

• id=”namedIdentified” – to associate <input> element with <datalist> element.

References: http://dev.w3.org/html5/markup/datalist.html