HTML and CSS Reference
In-Depth Information
You can download the code used in this topic from the book's website at
http://wiley.com/go/treehouse/
html5foundations
.
The code for this exercise can be found in the download code for Chapter 9, folder 1.
Here are the steps to follow:
1.
Open the
bookings.html
file in your text editor.
2.
Add
tabindex
attributes to each of the form fields as I have done in the following code extract. Notice
that the
tabindex
values do not follow a sequential order.
<form action="bookings.php" method="POST">
<p class="validation-tip">
* indicates a required field.
</p>
<fieldset>
<legend>Contact Details</legend>
<div class="field">
<label for="name">Name*:</label>
<input type="text" name="name" id="name"
placeholder="e.g. Joe Balochio" autofocus required
maxlength="65"
tabindex="1"
>
</div>
<div class="field">
<label for="phone">Phone*:</label>
<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"
tabindex="2"
>
</div>
<div class="field">
<label for="email">Email*:</label>
<input type="email" name="email" id="email"
placeholder="e.g. joe@example.com" required
tabindex="3"
>
</div>
</fieldset>
<fieldset>
<legend>Booking Information</legend>
<div class="field">
<label for="restaurant">Restaurant*:</label>
<select name="restaurant" id="restaurant" required
tabindex="8"
>
<option>310 West 38th Street, NY</option>
<option>2450 Broadway, NY</option>
<option>200 West 44th Street, NY</option>
</select>
