<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” />

Example page (opens in a new tab/ window – view source code):

Default display properties: will appear as text input box.

Common Attributes:

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


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.