The option Element

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