HTML and CSS Reference
In-Depth Information
ate a drop-down menu that already contains the three restaurant locations so that customers can select the restaurant
they want rather than having to type in the location.
The code for this exercise can be found in folder 5.
Follow these steps to modify the restaurant field on the Bookings page.
1.
Open the
bookings.html
file.
2.
Locate the
<input>
element that is currently used for the restaurant field and remove it.
<div class=”field”>
&
nbsp; <label for=”restaurant”>Restaurant:</label>
<input type=”text” id=”restaurant” name=”restaurant”>
</div>
3.
Create a new
<select>
element in its place.
<div class=”field”>
&
nbsp; <label for=”restaurant”>Restaurant:</label>
<select></select>
</div>
4.
Set the
name
and
id
attributes on this
<select>
element to
restaurant
.
<select name=”restaurant” id=”restaurant”></select>
5.
Within this
<select>
element, create a new
<option>
element with the text
310 West 38th
Street, NY
.
<option>310 West 38th Street, NY</option>
6.
Create another
<option>
element underneath that one with the text
2450 Broadway, NY
.
<option>2450 Broadway, NY</option>
7.
Finally, create one more
<option>
element with the text
200 West 44th
Street, NY
.
<option>200 West 44th Street, NY</option>
8.
Save the
bookings.html
file.
Your restaurant field should now look like the following.
<div class=”field”>
<label for=”restaurant”>Restaurant:</label>
<select id=”restaurant” name=”restaurant”>
<option>310 West 38th Street, NY</option>
<option>2450 Broadway, NY</option>
<option>200 West 44th Street, NY</option>
