HTML and CSS Reference
In-Depth Information
The code for this exercise can be found in the download code for Chapter 6, folder 1.
1.
Open the
bookings.html
file in your text editor of choice.
2.
Add an
autofocus
attribute to the name input. This will tell the browser that this input element should be
automatically focused when the page loads. This is a Boolean attribute so you do not need to set a value.
<input type="text" name="name" id="name"
autofocus
>
3.
Now add a
placeholder
attribute to this same
<input>
element and set its value to
e.g. Joe Ba-
lochio
. This placeholder text will provide a hint to the user, telling them what they should type into the
input field.
<input type="text" name="name" id="name"
placeholder="e.g Joe
Balochio"
autofocus>
4.
Set the type of the phone
<input>
element to be
tel
and add a
placeholder
attribute to this element
with the value
000-000-0000
.
<input type="tel" name="phone" id="phone" placeholder="e.g. 000-
000-0000"
>
5.
Change the type of the email
<input>
element to be
email
and add a
placeholder
element with the
following value:
e.g. joe@example.com
.
<input
type="email"
name="email" id="email"
placeholder="e.g.
joe@example.com"
>
6.
For the Booking Time
<input>
element, change the input type to
datetime-local
. This will prompt
browsers that support this input type to display a date/time picker to help the user fill out this form field.
<input
type="datetime-local"
name="bookingTime"
id="bookingTime">
7.
Also add a
placeholder
attribute to the Booking Time field that has the value
e.g. 2012-09-06
12:14
. This placeholder text will only be displayed if the browser does not support the
datetime-loc-
al
input type and will help the user to provide a date/time combo in the right format. This is not ideal, but it
is better than having no hint at all.
<input type="datetime-local" name="bookingTime"
id="bookingTime"placeholder="e.g.
2012-09-06 12:14
">
8.
Change the type of the Number of Guests
<input>
element to be
number
and set a default value of
2
us-
ing the
value
attribute.
<input type="number" name="guests" id="guests"
value="2"
>
9.
Finally, add a
placeholder
attribute to the
<textarea>
element
and set its value to
Type your
message...
.
<textarea id="message" name="message" cols="50" rows="10"
