HTML and CSS Reference
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:
<input id=”street” />
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