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”>
</div>
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”
>
</div>
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”>
</div>
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”>
</div>
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”>
</div>
