HTML Forms

This page includes standard HTML forms along with descriptions (in italics) of keyboard interaction.

Besides just tabbing through the fields, it is recommended you populate the text fields and try some of the other keyboard interaction described. It is also a good idea to open this page in multiple browsers so you can observe how the browser (the user agent) modifies the presentation of the focus rectangle and the cursor positioning.

Basic Form Fields

TAB between different form fields.
For uneditable controls, you will see a dotted line around the object with focus. This is called the focus rectagle. Other controls use highlighting or a blinking cursor to indicate focus. You should check that any item that receives focus uses the standard to indicate its state

Checkboxes

Make selections for checkboxes and radio buttons with the SPACEBAR.
For checkboxes, you can also deselect with the SPACEBAR.

For testing purposes, two checkoxes are offered without a fieldset, then 2 more with a fieldset.



Vehicles I own:

Radio buttons

For radio buttons, if nothing is chosen by default, in some browsers you can tab between each of the radio buttons. However, once a radio button is chosen (with the SPACEBAR), a user tabs into the radio button set and then moves between the options with UP/DOWN or LEFT/RIGHT ARROW. For some browsers, such as IE, this is the behaviour even if no selection has been made.



If I had to choose, I'd say I am:



Text Box

For unpopulated text boxes (AKA edit fields), focus is shown by a blinking cursor. If an edit field contains text, when you tab to it, the text will be highlighted automatically. You can use HOME and END to position to the start or end of the line. You can also use common selection commands, such as CTRL+SHIFT+LEFT ARROW to select the prior word.



Personal information


List Box

Listboxes (sometimes called 'combo boxes') have their values changed with UP/DOWN ARROW. You can open a listbox with ALT+DOWN ARROW, and then move between the highlighted options. With the listbox open, pressing ENTER will select the item and close the listbox, or press TAB to accomplish the same thing and move to the next field.

There are single item listboxes...

And multiple select boxes, which by default seem to expose more than one item in some browsers. One normally selects multiple values holding down either the CTRL key (for non-contiguous items) or the SHIFT (for continguous). Selection is done with the SPACEBAR..

Text area

For text areas, the cursor focus falls at the beginning (or end, depending on the browser) of any existing text instead of selecting the text, as with an edit field. In addition to the commands available in an edit field, you can use CTRL+HOME/END to move to the top and bottom of the text area. Pressing TAB should move focus to the next control, not cause an indent in the text area.


The focus rectangle also appears around a link text when you tab to it.
A demo link you don't need to activate.

Submit button

Buttons are activated with the SPACEBAR. If a default button is assigned on the page, pressing ENTER will activate it as well.