HTML Tutorial - Hotkeys

In this HTML tutorial you will learn to improve the usability of your forms using hotkeys, or accesskeys as they are called in HTML. In a lot of windows applications you can press alt+key to skip directly to a different field - you can do the same in HTML, by using the accesskey attribute.

How it works

It is customary to underline the character that is the hotkey (so the user knows what to press) and perhaps mention at the top of the form that it uses hotkeys (especially if it is a long form). Here is an example:

<form action=’someaction’ method=’get’>
<u>U</u>sername: <input type=’text’ accesskey=’u'>
<br> <br>
<u>P</u>assword:
<input type=’password’ accesskey=’p'>
</form>

which generates this:

Now if you copy and paste that code into your web page, you will notice that if you hold alt then click ‘u’ the focus will be on the username field, whereas if you hold alt and press ‘p’ the focus is on the password field - this works in all the latest versions of the latest browsers (IE, Mozilla, Opera) and because it is SO simple to use, it is almost criminal not to!

Side note: standards

The tag I used there - <u> is used to underline text, according to the w3c this tag is depreciated - the alternative is to use style sheets, and the text-decoration: underline; rule, as shown below:

<span style=’text-decoration: underline;’>U</span>sername: <input type=’text’ accesskey=’u'>

Conclusion

Your web forms are even more usable! Used in conjunction with fieldsets your forms should be looking (and behaving) a lot better!