HTML and CSS Reference
In-Depth Information
Note
The
datalist
element shown earlier uses
option
elements, too, but
formats them with self-closing tags and uses the
value
attribute for the list data.
The
option
element has four specific attributes:
disabled
,
selected
,
value
,
and
label
. Like the
disabled
attribute on
select
, this is a Boolean attribute that
prevents the user from selecting a particular item in the menu. The Boolean
selec-
ted
attribute is used to indicate to the user agent that a particular
option
should be
selected initially; without it, the browser may display either nothing at all (just a blank
select box) or the first
option
it encounters. For instance, to select the second option
by default,
selected
is added like so:
<select name="cheesemenu">
<option>Cheddar</option>
<option selected>Stilton</option>
<option>Brie</option>
</select>
Multiple
option
elements can have the
selected
attribute set, but only if the
se-
lect
has the
multiple
attribute added.
Adding different values
The
value
attribute is used to allow the submission of a value that differs from the
content of a particular
option
. If the
value
attribute is omitted, then the content is
used as the value. For example, given the following menu:
<select name="cheesemenu">
<option value="ch01">Cheddar</option>
<option value="ch02">Stilton</option>
<option>Brie</option>
</select>
If the first or second option is selected, they will submit the values
ch01
and
ch02
,
respectively. If the third option is selected, it will use the content “Brie” for its value
since there isn't a
value
attribute specified. This behavior is useful for situations where
what you show the user differs from what you want to submit to the server. For example,
if you were building a form for an e-commerce site, you might have a drop-down menu
of products. You'd want to show the names of the products to the user, but a product
number of some sort would be much easier for you to manage on the server side. So,
along with adding each product name, you would add the product number as a value
in each
option
in the list. The names would display to the user, but after selecting a
Search WWH ::
Custom Search