HTML and CSS Reference
In-Depth Information
the label, the browser focuses or checks the linked <input> element. This is especially useful for checkbox and
radio inputs because these form controls are small targets for a user to click on.
Here is an extract of the form from your Bookings page. Notice how you already assigned a <label> to each
<input> element:
<form action="bookings.php" method="POST">
<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">
</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">
</div>
<div class="field">
<label for="email" >Email*:</label>
<input type="email" name="email" id="email"
placeholder="e.g. joe@example.com" required>
</div>
</fieldset>
...
</form>
View the Bookings page in your web browser and try clicking on one of the text labels. You should see that the input
field gains focus.
The tabindex Attribute
Users can navigate your web forms by using the Tab key to move between form fields. This feature is popular with
power users, but it is also very useful for users with disabilities.
The order in which these form fields are focused is determined by the order of the HTML elements in the code. The
default order is usually fine; but there may be times when you need to change this tab order without rearranging the
elements in your code. You can do this using the tabindex attribute.
The tabindex attribute for each element should contain a number that represents that particular element's position
in the tab order, starting at 1 for the first element.
To illustrate this, you are going to add the tabindex attribute to the form fields in your bookings form.
Search WWH ::




Custom Search