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 selected>Stilton</option>
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>
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