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." 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:
Search WWH ::

Custom Search