The option Element

The Current State of HTML5 Forms

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

Chrome
20+

Opera
9+

IE
10+

Android
4.4.3-
select
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>.

Our Cookie Policy and Privacy Policy outline how we use cookies to help optimize service, personalize content, tailor and measure our marketing, and improve your user experience. I agree to use of cookies for these purposes.