HTML and CSS Reference
In-Depth Information
The code for this exercise can be found in the download files for Chapter 7, folder 1.
Here are the steps to add validations to your form fields.
1.
Open the
bookings.html
file.
2.
Locate the name
<input>
element and add a
required
attribute. Add a
maxlength
attribute and set
its value to
65
.
<input type="text" name="name" id="name" placeholder="e.g. Joe
Balochio" autofocus required maxlength="65">
3.
Locate the phone
<input>
element and add a
required
attribute. Also add a
pattern
attribute with
the following value:
[0-9]{3}[-][0-9]{3}[-][0-9]{4}
(this will be explained in detail later). As
you are using pattern validation here you should also provide a tip to users telling them how to format their
data. You do this using the
title
attribute.
<input type="tel" name="phone" id="phone" placeholder="e.g. 000-000-0000"
pattern="[0-9]{3}[-][0-9]{3}[-][0-9]{4}" required
title="Please provide your phone number in the following
format: 000-000-0000">
4.
Locate the email
<input>
element and add a
required
attribute. The browser will take care of checking
that the e-mail address is valid because you have used the input type
email
.
<input type="email" name="email" id="email" placeholder="e.g.
joe@example.com"
required
>
5.
Locate the restaurant
<select>
element and add a
required
attribute.
<select name="restaurant" id="restaurant"
required
>
6.
Locate the booking time
<input>
element and add a
required
attribute.
<input type="datetime-local" name="bookingTime"
id="bookingTime" placeholder="e.g. 2012-09-06 12:14"
required
>
7.
Locate the guests
<input>
element and add the
required
attribute. Add a
max
attribute to this element
and set its value to
12
. Add a
min
attribute and set the value to
1
.
<input type="number" name="guests" id="guests" value="2"
required
min="1" max="12">
8.
Locate the message
<textarea>
element. Add a
maxlength
attribute to this element and set its value to
250
.
<textarea id="message" name="message" cols="50" rows="10"
placeholder="Type your message..."
maxlength="250"
>
9.
Now add an asterisk next to the text label for each of the form fields that is required, following this example:
