Adding a drop-down box

A drop-down box, also known as a select box, presents many options, from
which the user can select one. An example is a list of states, such as Alaska,
California, Wisconsin, and so on, where the user typically chooses one from
among the list. The drop-down box provides a good way to display that
information. You create a drop-down using the <select> element along
with <option> elements, like this:


<select name=”state”>
<option value=”CA”>California</option>
<option value=”WI”>Wisconsin</option>
</select>


Here’s a full form with a drop-down added to it:


<!doctype html>
<html>
<head>
<title>A Basic Select</title>
</head>
<body>
<h1>A Basic Select</h1>
<hr>
<form action=”#”>
<fieldset>
<legend>Form Information</legend>
<div>
<label for=”state”>State:</label>
<select id=”state” name=”state”>
<option value=”CA”>California</option>
<option value=”WI”>Wisconsin</option>
</select>
</div>
</fieldset>
</form>
</body>
</html>

When a drop-down box is displayed, the first element is the one that shows
up as the default California is displayed
as the default option. You can, however, change the default value in two
different ways, as discussed here.
Like text boxes, you can set a default value for a drop-down box. This is
accomplished using the selected attribute. Though not always required,
it’s a good idea to set a value for the selected attribute, as in this example
that would change the default value to Wisconsin:

<select name=”state”>
<option value=”CA”>California</option>
<option selected=”selected” value=”WI”>Wisconsin</option>
</select>

Another way to set a default value of sorts is to set a blank option as the
first option in the list. While this isn’t technically a default value, it shows
up first on the list so it’ll show as the default option when a user loads the
page. A common way you’ll see this is to use “Select a value” or similar
wording as the first option, indicating to the user that there’s some action
required.

<select name=”state”>
<option value=””>Select a value...</option>
<option value=”CA”>California</option>
<option value=”WI”>Wisconsin</option>
</select>