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.