HTML and CSS Reference
In-Depth Information
<div class="field">
<label for="bookingTime">Booking Time*:</label>
<input type="datetime-local" name="bookingTime"
id="bookingTime" tabindex="7"
placeholder="e.g. 2012-09-06 12:14" required>
<div class="field">
<label for="guests">Number of Guests*:</label>
<input type="number" name="guests" id="guests" value="2"
required min="1" max="12" tabindex="6" >
<div class="field">
<label for="marketing">Please tick this box if you
would like to receive special offers from Joe's
Pizza Co.</label>
<input type="checkbox" name="marketing" id="marketing"
value="1" tabindex="5" >
<div class="field">
<label for="message">Special Requests:</label>
<textarea name="message" id="message" cols="50" rows="10"
placeholder="Type your message..."
maxlength="250" tabindex="4" ></textarea>
<div class="field">
<button type="submit" tabindex="9" >Request Booking</button>
3. Save the bookings.html file.
4. Open the bookings.html file in your web browser and use the Tab key to cycle through the form fields.
You should encounter the following order: Name, Phone, Email, Message, Marketing, Guests, Booking
Time, Restaurant, and Submit.
5. Now go back to your text editor and update the tabindex attributes so that the values are in a sequential
order from 1 to 9.
6. Save the bookings.html file.
Check out this video on Treehouse for a quick recap on making your web forms accessible: ht-
tp:// .
Making Tables Accessible
Search WWH ::

Custom Search