HTML and CSS Reference
In-Depth Information
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>
</select>
Required Attributes
The
option
element doesn't require any attributes.
Optional 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.
optgroup
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
