Tips For Entering Data On Web Forms Using your Keyboard

Web forms allow you to enter data on a web page, and that data is used by web based software to do a function that you need done. If you clicked on a link to get here, you were probably looking at a web "FORM" that will start a background process that will make use of the data you enter.

Forms allow you to enter data in "input fields". There are many types of input fields but the ones of most interest are "text" fields (where text may be a character, letter, or number), "checkbox" fields, "radio button" fields, and "pull down list" fields. Each is described below. If you want to use a form to easily enter data you should learn the following information.

While you can fill in forms using your mouse along with your keyboard, using your keyboard instead of your mouse to navigate around web forms cuts down on the time you spend filling in web forms. We will be talking in terms of the 4 field types mentioned above and 7 keyboard keys. All of the information presented below works on all browsers (Internet Explorer; Firefox, Chrome, Safari, etc.) and operating systems (Windows, OSX, etc.).

The keys are the "Tab" key and its alter ego the Shift+Tab key, the Up arrow key and the Left arrow key which do the same thing, the Down arrow key and Right arrow key which do the same thing, the Space Bar key, and the Enter key.

We also need to introduce a concept called "focus". The field that has the focus is the field that your keyboard action will impact, i.e. enter data into, check the box, etc. There are lots of fields on your screen, including ones which are part of your web page display software that aren't part of the actual form you're completing. To move between fields on a form or page you press the Tab key to move to the next one. If you want to move back you hold the Shift Key and press the Tab key (Shift+Tab). Try this on the form fields displayed below:


Text Input Field 1     Text Input Field 2    Text Input Field 3
Checkbox 1    Checkbox 2    Checkbox 3
Radio-Option A    Radio-Option B    Radio-Option C

Pull Down List (states)

Most web pages do not tell your browser what field to focus on when they display the page in your browser. This page tells the browser to focus on Text Input Field 2 when the page is first opened. You should see a blinking text cursor of "|" in that field. If the starting field is not specified on a page, you will see various fields in your browser highlighted before the cursor is located on a form field. Slowly depress the Tab key repeatedly and notice what your web browser does. Text fields will display a "|" in the box, Checkboxes will have the "box" boxed, Radio buttons will have their options circles boxed, and Pull Downs will have their option field boxed. If you slowly depress Tab or Shift+Tab repeatedly you will see the focus change fields, including those on the browser which are not part of the actual form page.

About Text Fields: When you focus by tabbing on a text field and it is empty, whatever you type goes into the field. However, if it already has data in it, it will be highlighted. Typing into a highlighted field will delete its contents and replace it with what you're typing. If you want to keep the original value, tab to the next field. If you want to change or add to the value, left click on the place where you want to make the change and enter the new data.

More about Text Fields: Text fields have two attributes, size and maximum length. Size is the number of characters displayed on the form, while maximum length is the most characters you can enter into that field. If you try to enter more characters than allowed by the maximum length, the display (even when scrolled) will only show you the characters up to the number specified by the maximum length and will not allow you to enter more data. All three Text fields above have a size of 5 but only the first two have a maximum length of 5. If you enter data into Text field 3 it will begin to scroll. Beware of forms where there is no maximum length, since data entered beyond the displayed size may be ignored by the background process. Because you generally have no way of knowing if there is a maximum background process length, be wary of fields that do not limit input size.

About Checkboxes: Checkboxes are independent of one another. When you Tab to a checkbox it will be "boxed". If you press the space bar, it will check or uncheck the Checkbox. It is that simple; try it. You do not have to position your cursor over the box and left click. Checkboxes that are checked have a check in them (Can you believe it!).

About Radio Buttons: Radio buttons are a group of options for the same thing and only one can be selected from that group. The one selected has a dot in the middle of the button. Clicking on another option moves the dot. If you Tab to a radio button group and no button has a dot, you will go to the first one. If a dot is present you will go to the one with a dot. When you are focused on a specific radio button pressing the space bar will select that option if no dot is present and a dot will appear. Once focused on a radio button group, using the arrow keys will move you between radio buttons of the same group. Each time you press a Down arrow or a Right arrow key, the focus and the dot (selection) will move to the next button and will wrap around to the first group button when you are on the last button. The Up arrow or Left arrow go the opposite way.

About Pull Down Lists: Left clicking on a pull down list will display the list. However this means taking your hands off the keyboard. Here are some standard techniques to use once you are focused on the Pull Down List. The Down arrow or Right arrow will scroll you down the list and the Up or Left arrow will scroll you up the list. In addition, if the focus is on the list field, typing the first character of a your choice will take you to the first choice which begins with that character. If a choice with that first character does not exist, nothing happens. If there are multiple choices beginning with the desired first character, repeatedly pressing that key will scroll you through those choices. For instance, the state pull down list above contain the choices: NC,NE,NH,NJ,NV,NY. When focused, pressing "N" will show "NC", pressing again will show "NE" and so on. When you get to "NY" and press "N" it will wrap you around to "NC". Once positioned, the scroll keys work. Try entering "N" in the Pull Down List field above and see how this works.

A warning about the Enter key. Do not press the Enter key until you are done filling out the form. Depending on how the page is constructed, depressing the Enter key may submit the form even if you are not ready to do so. Instead, wait until you are done and use the button provided to submit the data on the form.

If you understand the types of input fields and the use of the keys mentioned above, entering data in online forms will be much easier and far quicker.


Some more helpful tips. If you highlight data by clicking on a text position, holding down your left mouse button and dragging your mouse, you can "copy" the highlighted data by pressing and holding the "Ctrl" key ("Command" or Command key icon key on a Mac) and then pressing the "c" key (Ctrl/Command+c). Data copied this way may be pasted into a text field by clicking on the desired position and using the combination Ctrl+v (or Command+v on a Mac). If you highlight text and then do Ctrl/Command+v all the highlighted text is replaced by the copied text.

If you mistakenly copied the wrong text over existing text, you can return to the original text by pressing Ctrl/Command+z, which undoes your last change.


Any comments may be addressed to Dan Bartell at danb@usps.org