HTML and CSS Reference
In-Depth Information
The code for this exercise can be found in folder 6.
Follow these steps to create your two <fieldset> elements.
1. Open your bookings.html file.
2. Create a new <fieldset> element at the top of your form, just below the start tag for the <form> ele-
3. Within this <fieldset> , create a <legend> element with the text Contact Details .
4. Now move the name, phone, and e-mail inputs into this <fieldset> element, directly below the <le-
gend> element.
5. Below this <fieldset> , create another <fieldset> element.
6. Create a new <legend> in this <fieldset> with the text Booking Information .
7. Move the restaurant, booking time, guests, marketing, and message form fields into this <fieldset> ele-
ment, leaving the button outside of it.
8. Save the bookings.html file.
You should now have two groups of form fields, as shown in the following code.
<form action=”bookings.php” method=”POST”>
<legend>Contact Details</legend>
<div class=”field”>
<label for=”name”>Name:</label>
<input type=”text” name=”name” id=”name”>
<div class=”field”>
<label for=”phone”>Phone:</label>
<input type=”text” name=”phone” id=”phone”>
<div class=”field”>
<label for=”email”>Email:</label>
<input type=”text” name=”email” id=”email”>
<legend>Booking Information</legend>
<div class=”field”>
<label for=”restaurant”>Restaurant:</label>
<select name=”restaurant” id=”restaurant”>
<option>310 West 38th Street, NY</option>
<option>2450 Broadway, NY</option>
<option>200 West 44th Street, NY</option>
<div class=”field”>
<label for=”bookingTime”>Booking Time:</label>
Search WWH ::

Custom Search