Cloud Cloud Cloud Cloud

The option Element

The Current State of HTML5 Forms

Let Wufoo do the hard work. Sign up for a free account and start making forms the easy way.

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

Let Wufoo do the hard work.

Sign up for a free account and start making forms the easy way.