Creating Lists of Options
Description
The select
element creates lists of options for the user to select.
select
has local attributes: name, disabled, form, size, multiple, autofocus, required
.
It can contents option
and optgroup
elements.
The form, autofocus and required attributes are new in HTML5
The name, disabled, form, autofocus, and required attributes work in the same way with the input elements.
The size
attribute specifies how many choices you want to show to the user.
The multiple attribute allows the user to select more than one value.
You use the option
element to define the choices that
you want to present to the user.
Example
The following code shows how you use the select and option elements.
<!DOCTYPE HTML>
<html>
<body>
<form method="post" action="http://example.com/form">
<p>
<label for="fave"> Favorite Fruit:
<select id="fave"name="fave">
<option value="A" selected label="Apples">Apples</option>
<option value="B" label="Batch">Batch</option>
<option value="C" label="C">C</option>
<option value="S" label="SQL">SQL</option>
</select>
</label>
</p><!--from w w w .j a v a 2s .c om-->
<input type="submit" value="Submit" />
</form>
</body>
</html>
Example 2
You can use the size
attribute on the select element to
show more than one option to the user, and the multiple attribute to allow the user
to select more than one option.
<!DOCTYPE HTML>
<html>
<body>
<form method="post" action="http://example.com/form">
<p>
<label for="fave" style="vertical-align: top"> Favorite
Fruit: <select id="fave" name="fave" size="5" multiple>
<option value="a" selected label="Apples">Apples</option>
<option value="o" label="Oracle">Oracle</option>
<option value="c" label="C">C</option>
<option value="p" label="Pascal">Pascal</option>
</select>
</label>
</p><!--from w w w . j ava2 s. c om-->
<input type="submit" value="Submit" />
</form>
</body>
</html>