Drop-down List

When there are more options to choose from, a drop-down list saves space. We create it with the select element, and each option in it with an option element.

Each option has a value attribute, which is sent with the form, and its content is the text the user sees. The name and id attributes, and the label, belong to the select element, just like with an input. Unlike input, select has a closing tag, because the options go inside it.

<label for="input-pizza">Pizza</label>
<select name="pizza" id="input-pizza">
	<option value="margherita">Margherita</option>
	<option value="salami">Salami</option>
	<option value="hawaii">Hawaii</option>
</select>

This code is displayed like this:

When the user chooses Salami, the form sends pizza=salami.

In our form, the user will choose the course they want to sign up for.