HTML and CSS Reference
In-Depth Information
Navigating Forms with Access Keys
You activate control elements like input boxes either by clicking them with your mouse
button or by tabbing from one control element to another. As your forms get longer,
you might want to give users the ability to jump to a particular input box. This can be
done with an access key. An
access key
is a single key on the keyboard that you type
in conjunction with the Alt key commonly used for Windows users, or the control key
for Mac users, to jump to a spot in the Web page. You create an access key by adding
the
accesskey
attribute to an element. For example, to create an access key for the
custName
input box, you would enter the following code:
<input name=”custName” id=”custName” accesskey=”l” />
If a user types Alt+l (or control+l for Mac users), the cursor automatically moves to
the
custName
input box. Note that you must use letters that are not reserved by your
browser. For example, Alt+f is used by many browsers including Internet Explorer to
access the File menu and thus should not be used for an access key.
Access keys also can be used with hypertext links and are particularly helpful to users
with impaired motor skills who find it difficult to use a mouse.
Adding Field Labels
In the last set of steps, you entered descriptive text alongside the input boxes to indicate
the purpose of each input box to users. However, nothing in the HTML code explicitly
associates that text with the input box. To associate text with a control element, you
enclose the descriptive text within a
label
element as follows
<label for=”
id
”>
label text
</label>
where
id
is the value of the
id
attribute of the control element associated with the label,
and
label text
is the text of the label. For example, the following code associates the
label text
Street address
with the
street
control element:
<label for=”street”>Street address</label>
<input id=”street” />
One effect of associating a label with a control element is that clicking the label auto-
matically moves the cursor into the control element.
Using the
for
attribute explicitly associates the label with the relevant control ele-
ment. You also can make this association implicitly by nesting the control element within
the label as in the following code:
<label>
Street address
<input id=”street” />
</label>
Notice that you do not need to include a
for
attribute when you nest the control ele-
ment within the label element.
Which approach you take depends on how you want to lay out a form's contents.
When you use the
for
attribute, you can place the label text anywhere within the Web
page and it still will be associated with the control element. However, by nesting the
control element within the label, you can treat both the control element and its label as
a single object, which can make form layout easier because you can move both the label
text and the control element as a single unit around the page. Depending on the layout
of your Web form, you might use both approaches.
You can “turn off” a control
element, preventing the
user from entering data,
by adding the attribute
disabled=”disabled”
to
the element.
