Return to the Home page
        Techniques           
*  Text link
*  Image link
*  Link to a file
*  Navigate pages
*  Navigate a form
*  New window

Navigate a form


A form on a web page asks you to type in information or make choices. Forms are used for things like tests, surveys, shopping orders, and collecting information for technical support. The form below shows the kinds of input controls you might see.


Text box


Text area


List

You can select only one:

First radio button

Second radio button


You can select any or all:

First check box

Second check box



Button

Tips for Navigating Forms: Navigating through a form can be frustrating if you don't understand how it works. You might even think your machine is screwed up!

There are two different ways of moving around a form. People have definite personal preferences about which way they like best.

  1. Mouse - easiest to understand. Move the mouse pointer to the input spot and click. Clicking on a radio button or check box selects it. In a text box or text area the cursor appears and you are ready to type. The disadvantage is having to move from keyboard to mouse and back a lot.
     
    Icon: WarningWarning: Cursor
    Some forms show a cursor in a text box even when the focus is somewhere else! Watch to see where your typing is going.
     
  2. TAB key - the favorite of those who like the keyboard best. Each time you press the TAB key the focus moves to a different form element. Once you go through all the parts the focus moves through the links on the page. This has the advantage of keeping your hands on the keyboard all the time.

WarningWarning: Focus in first input when page loads
Often when a page opens that contains a form, the first input on the form has the focus as soon as the page loads. This means that any keystrokes will apply to that box. That is handy since the viewer won't have to mouse or tab into the box. But the arrow keys, Page Up, and Page Down will not move you around on the page while the focus is within a text box or text area. Those keys move you around inside the typing area until you TAB to another type of input.

Tips about TAB and navigation keys in a form:

  • TAB will move the focus to a different input or link on the page. The ENTER key will not, on a standard HTML form.

  • The dotted outline around the input control that has the focus may not show well on small input controls like radio buttons and check boxes

  • In a Text area box, the ENTER key will give a line break, just like in a word processor. But the TAB key will move you out to the next input or link instead of indenting your typing. You can use spaces to create an indention if you really, really need one.

  • In a set of check boxes, the TAB key will take you to each in turn.

  • In a set of radio buttons, TAB will move you away from the set of radio buttons, which the form treats as a single control. Use TAB to get to the first radio button and then the arrow keys take you to each radio button in turn.

  • Select the current radio button or check box by pressing the SPACEBAR.

  • In a drop list (pull-down list), the down and up arrows will move the focus through the list. To see more of the list at once, hold down the ALT key while pressing the down arrow. Release the ALT key and use the up and down arrows to navigate in the list. (Works in IE and Firefox but not in Chrome).

  • A button on the form is pressed when it has the focus and you press the SPACEBAR or the ENTER key.

Ü Scroll back up to the form above. Use both the mouse and keys  to do the following tasks, until you are comfortable with all the types of input controls:

  • Move from part to part through the form.
  • Select and enter text.
  • Make choices with radio buttons and check boxes. Remember that only one radio button at a time can be selected within a group but any number of check boxes can be selected.
  • Use the button to reset the form.

Back Back        Return to Contents    Return to Contents       Next  Next


©1999-2016 Jan Smith