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. .
<input type="email" name="email" id="email" placeholder="e.g." >
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"
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"
Search WWH ::

Custom Search