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-
ment.
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”>
<fieldset>
<legend>Contact Details</legend>
<div class=”field”>
<label for=”name”>Name:</label>
<input type=”text” name=”name” id=”name”>
</div>
<div class=”field”>
<label for=”phone”>Phone:</label>
<input type=”text” name=”phone” id=”phone”>
</div>
<div class=”field”>
<label for=”email”>Email:</label>
<input type=”text” name=”email” id=”email”>
</div>
</fieldset>
<fieldset>
<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>
</select>
</div>
<div class=”field”>
<label for=”bookingTime”>Booking Time:</label>
