SHARE

Setting a Label and Access Key

Written By

Jan 4, 2005

This tutorial was originally written when HTML 4.0 was in its infancy. HTML 4.01 is today’s standard specification for HTML and this tutorial has been updated to reflect the features of HTML 4.01. Editorial comments are shown contained in square braces — [ ]

Use these to jump around or read it all…

[Accesskey, Label and Forms] [What if the Letter’s Taken?] [Accesskey, Label and the Checkbox]
[Accesskey and Links]

First things first: Yonder we go again with a command that only certain browsers understand. Sorry, but it’s becoming a way of Internet life. You have to be running MSIE4.0 or better to get this effect. However, there is a way you can use JavaScript so that only MSIE browsers will display the code. I have a tutorial on it here. Of course you could also not worry about it too much. Browsers that don’t understand the commands will simply ignore them.

[All modern browsers in common use fully support HTML 4.01. Consequently, you can safely use these commands and expect them to be interpreted correctly. Of course, there may be an obscure, or less than commonly used browser that may have a problem with them, but the standard has been around for a while now, and you can’t really spend all your time trying to cater to those who don;t use modern browsers, can you?!!]

Okay, you’re going to like this one. Can you see up at the top of the browser window, on the left, you see File? See the little underline on the letter “F”? Do you know what that means? If not, don’t feel bad. I didn’t for the longest time until my mouse stopped working. A guy at a help desk actually explained it to me. That underline means that if you hold down the ALT key and hit “F”, that File menu will drop down. No kidding – try it.

The ALT key stands for “Alternative”. Holding that key sets an alternative function for whatever key is pressed. No, the CTRL key does not do the same thing. Control (CTRL) sets a separate function for the browser to perform. In fact, if you hold CTRL and press “F”, you’ll get the browser’s Find function. Cool. One key, three things.

To use this effect on your Web pages, you need to use at least one tag, ACCESSKEY, sometimes two, ACCESSKEY and LABEL. I’ll start by showing you the two together. It’ll be easier to get smaller rather than build later.

Accesskey, Label and Forms
What if the Letter’s Taken?
LABEL and the Checkbox
Accesskey and Links
That’s That

Accesskey, Label and Forms

OK, take a look at the following three text boxes and TEXTAREA box. Notice how they each have a word in front and one of the word’s letters is underlined. Super. Without clicking on any of the boxes, hold down the ALT key (it has to be the alt key) and push one the underlined letters.

That was cool, huh? If you didn’t see it, look for the cursor to appear in the text box. You may also want to try typing something in the box, clicking off of the box and then using the ALT key to return. The cursor will appear at the end of the text. Very clever.

So what did it? Why, this did it now that you’ve asked:

<FORM>

</FORM>

As you might notice, it’s the same coding four times with just a few changes. Let’s take a look at just the first little block of code.

It starts by setting a LABEL for the text box:

LABELdenotes the start of the label, obviously.
FOR= sets the name what is to be labeled. I named this first text box Namebox. I could have named it superglue if I wanted, but I’m trying to keep things straight in my own head.
ACCESSKEY=set the key that will reacts with the ALT key to bring focus to the text box.
<U>N</U>ame: is basic HTML text that creates: Name.
/LABEL wraps it up.

OK, now we’re set with the label. Let’s apply it to a text box:

The format should look very familiar to you by now. The only new attribute is that ID= deal. Notice it has the same name as the FOR=in the LABEL tag. That’s what links these two together.

That’s it. Now when the user clicks on ALT and “N”, he or she will jump their cursor to that text box denoted by “N”. Cool trick. And as you can see, it works with TEXTAREA boxes just as well.

What if the Letter’s Taken?

What’s that? The letter’s already taken? Evil Microsoft has dared to set up one of their menus using the same letter you want? How dare they!

It’s already happened. See how I have “E” set up to jump you to the Email text box? Notice at the top of your browser that “E” also should open the Edit menu. But it doesn’t. Your use of the Accesskey wins in the battle of the commands.

I guess that’s good in some ways, bad in others. I would suggest that unless it’s really required. Try to use letters that don’t pull down major menus. It’s just a suggestion.

LABEL and the Checkbox

This is fairly cool as well. You can use the LABEL command to get the checkboxes to check themselves. Try this. Click on the text, not the box.

There you go. Very smooth. The code is exactly the same as above, except you do not use an Accesskey and this is a checkbox. Come to think of it. It’s not just the same. It’s just close. (Sorry, I went into my Monty Python voice there). Here’s the code:

<FORM>

<LABEL FOR=”sendme”>Check to receive mailing</LABEL>
<INPUT TYPE=”CHECKBOX” ID=”sendme” VALUE=”Send_me_stuff”>

</FORM>

Nothing to it. Now, the official word is that this will also work with radio buttons, and the send and reset buttons themselves. Well, that’s what the brochure says. I have found that yes, the tags to bring focus to the elements, but they do not trigger their function.

Here’s a radio button. I made it by simply changing the TYPE to radio. I also gave it new FOR= and ID= labels so that it wouldn’t interfere with the checkbox. Give it a shot. Click away.

See what I mean? Stick with what works. Radio buttons don’t play well with others.

Accesskey and Links

Just as LABEL with work without ACCESSKEY, ditto the other way around. When used inside of a hypertext link, the ACCESSKEY allows you to set that link to trigger through an ALT – somethinghot key. Here’s an example:

Press Alt-A for the example page.

Wow! A variety of uses! None that spring directly to mind, but still a variety of uses.

Here’s the code that did the trick:

<A HREF=”page.html” ACCESSKEY=”A”>
Press Alt-A for the example page.</A>

It’s a basic hypertext link that has the ACCESSKEY=”–” attribute stuck in there for good measure. Simple and efficient.

That’s That

There are still those DOS command loving people out there. I’m one of them. I started playing with computers when DOS was still a required thing to know. It has never left me. I still do a great amount of text manipulation though DOS command and prompts. Offering this on your pages will make people like me happy.

Unless, you mess up one of the menus along the top. Then you’ll make me mad.

Enjoy!

[Accesskey, Label and Forms] [What if the Letter’s Taken?] [Accesskey, Label and the Checkbox]
[Accesskey and Links]