Dropdown Lists

The drop down lists is another way to give the user the opportunity to choose just one of a series of choices. When would you use the drop down list? As the first item on the list is normally the default choice, using the drop down list can been a good choice when you know that a specific option is often chosen over the other options. The drop down list should only be used when the user has to choose between the options as the drop down list does not gives the user opportunity not to choose anything (such as radio-buttons do).

The drop down lists are defined by the <select> element and the values being sent to you (either via email or to your database) are defined by the value attribute.

<form method="post">
	<select name="Icecream Flavours">
		<option value="double chocolate">Double Chocolate</option>
		<option value="vanilla">Vanilla</option>
		<option value="strawberry">Strawberry</option>
		<option value="caramel">Caramel</option>
	</select>
</form>

If you want another item to be selected instead of the first one on the list, you use the selected attribute. HTML5 allows you to shorten you markup when using the selected attribute, so instead of writing

<option value="strawberry" selected="selected">Strawberry</option>

You can write it like this:

<form>
	<select name="Icecream Flavours">
		<option value="double chocolate">Double Chocolate</option>
		<option value="vanilla">Vanilla</option>
		<option value="strawberry" selected>Strawberry</option>
		<option value="caramel">Caramel</option>
	</select>
</form>