The Current State of HTML5 Forms

The option Element

<input type="text" list="datalist">
<datalist id="datalist">
  <option>First Choice</option>
  <option label="2nd">Second Choice</option>
  <option>Third Choice</option>
</datalist>

<select name="selection">
  <option>First Choice</option>
  <option label="2nd">Second Choice</option>
  <option value="3">Third Choice</option>
</select>
      

Live Demo

parent
Firefox
4+
Safari
8-
Safari Mobile
8-
Chrome
20+
Opera
9+
IE
10+
Android
4.4.3-
select Supported Supported Supported Supported Supported Supported Supported
datalist Supported No support No support Supported Supported Supported Supported

Supported Browser Screenshots

Time with datalist

The Low Down

The <option> is used to provide options for a <select> or <datalist>.

  • <option>s can be nested in a <datalist>, <select> or within an <optgroup> within a <select>.
  • The closing </option> is optional if your <option>, <datalist>, <select> or <optgroup> is coded correctly.
  • In addition to the global attributes, other attributes include value, selected, disabled, and label.
  • Within a <select>, the <option> with the selected attribute is by default selected, and can be targeted with the :default UI pseudoclass. selected has no impact on a datalist option.
  • The name attribute on an option is obsolete. Use id instead.
  • The label attribute is text for the label showing the meaning of the option. If the¬†label¬†attribute isn't defined, its value is that of the element text content. For example, if we include the following:
      <option label="Midnight">00:00</option>
      <option label="Early Morning">06:00</option>
      <option label="Noon">12:00</option>
      <option label="Dinner time">18:00</option>
    in a <datalist>, both the time and label will appear. In a <select>, only the label will be displayed, but the value within the opening and closing <option> tags is what will be sent with the form.
  • If you include a value, the value will be submitted to the server rather than the label or the content within the <option>.