HTML and CSS Reference
In-Depth Information
You can download the code used in this topic from the book's website at
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.
<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 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 class="field">
<label for="email">Email*:</label>
<input type="email" name="email" id="email"
placeholder="e.g." required
tabindex="3" >
<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>
Search WWH ::

Custom Search