HTML and CSS Reference
In-Depth Information
The code for this exercise can be found in folder 2.
Follow these steps to add each of the input fields to your form:
1. Open your bookings.html file in your favorite text editor.
2. Create a new <div> element within the <form> element and set its class to field . This class will be
used purely for styling purposes. (You will need to create a new <div> element like this one for each
<input> element that you add.)
<div class=”field”></div>
3. Within this first <div> element, create a new <input> element with the type text .
<div class=”field”>
<input type=”text”>
4. Set both the name and id attributes of this input to name . The reason for setting both attributes is because
it is possible for multiple elements to have the same name value. This occurs when dealing with groups of
inputs such as radio buttons. The id value, however, should always be unique. This means if you wanted to
target this individual <input> element with CSS or JavaScript, you would need to use the ID.
<div class=”field>
<input type=”text” name=”name” id=”name” >
5. Create a <label> element and assign it to this <input> element using the for attribute.
<div class=”field”>
<label for=”name”>Name:</label>
<input type=”text” name=”name” id=”name”>
6. Below this <div> element create a new <div> (again with the class field ) with an <input> element
that has the type text and the name and ID phone . Then create a label for this input.
<div class=”field”>
<label for=”phone”>Phone:</label>
<input type=”text” name=”phone” id=”phone”>
7. Now create a new <div> element with an <input> element that has the type text and the name and ID
email . Create a label for this input.
<div class=”field”>
<label for=”email”>Email:</label>
<input type=”text” name=”email” id=”email”>
Search WWH ::

Custom Search