HTML and CSS Reference
We've given each of the option elements in Listing 8-17 a value attribute that will be submitted in place
of the element's text label. This way a back-end system can receive whatever machine-friendly values it's
been programmed to handle while the user still sees sensible text labels. In this example, the first option
acts as a label for the control and shouldn't be submitted with the form (it's also been preselected by
adding a selected attribute). An empty value attribute prevents the first option's text from being
submitted as its value, allowing the automatic validation indicated by the required attribute to kick in—a
user can't submit this form with an empty value (in browsers that support the required attribute for
select elements, at least).
Listing 8-17 . option elements with value attributes; one is preselected
<select name="cape-length" required>
<option value="" selected>Choose a length</option>
<option value="S">Short (36")</option>
<option value="M">Medium (48")</option>
<option value="L">Long (72")</option>
<option value="XL">Extra-long (96")</option>
The option element doesn't require any attributes.
disabled : When present, disables the option so it can't be selected. Many browsers will display
disabled options in a “grayed-out” style.
label : Provides a shorter alternative text label, displayed in place of the element's contents to
improve accessibility when the regular value is too verbose. Not every browser supports this
attribute so it's usually best to keep your option text short.
selected : Indicates an initially selected option.
value : Specifies a value to pass with submitted form data. If no value attribute is present, the
selected option element's text contents are passed as the selection's value.
You can collect option elements into related sections or categories by enclosing them in an optgroup
element, so named because it forms a “group of options.” An option group can only contain option
elements; no other elements are allowed, and you can't nest an optgroup within an optgroup .
In browsers, the value of the required label attribute will be displayed as a title at the top of the group with
the options listed beneath it, usually indented. All browsers display optgroup labels in some distinctive
fashion, but the particular style varies and isn't very susceptible to CSS. Firefox and Internet Explorer
render them in a boldfaced and italicized font, while Chrome, Safari, and Opera render them in a gray
color. Furthermore, some browsers change the label's style when the select is multi-line instead of