Working with Forms - HTML5 Foundations - page 114

The <select> element is also responsible for grouping the options together and should contain one or more <op-
tion> elements, as shown in the following example.
<select name=”color” id=”color”>
<option>Green</option>
<option>Red</option>
<option>Blue</option>
</select>
Each of these <option> elements represents a potential value for the form control (the text contained within the
element is used as the value here). The concept is similar to how multiple radio buttons work. Here is how the previ-
ous example would look if it were implemented using radio buttons.
<label for=”green”>Green</label>
<input type=”radio” name=”color” id=”green” value=”Green”>
<label for=”red”>Red</label>
<input type=”radio” name=”color” id=”red” value=”Red”>
<label for=”blue”>Blue</label>
<input type=”radio” name=”color” id=”blue” value=”Blue”>
The main difference is that all the options are displayed at once when using radio buttons, whereas the <select>
element will group the options and display them in a drop-down menu. This is particularly useful if you have a large
number of options to choose from, because the screen space taken up by the drop-down menu does not increase
when you add more options. Figure 5-10 shows how these two examples differ.
Figure 5-10 Using the <select> element with <option> elements versus using radio buttons.
Adding the Restaurant Drop-Down Menu
to Your Page
The restaurant field in your bookings form is used to tell the bookings coordinator at which restaurant the customer
would like to make a reservation. Currently, this field just uses a normal text input; however, this is a bad practice
because it relies on the customer to type an accurate address into the location field. A better solution would be to cre-