Toronto Free-Net
  Front  •  Account  •  TFNews  •  Help  •  Contact  
How to use web forms

This web page explains how to use forms in a graphical browser, such as Internet Explorer and Netscape. If you want instructions for a textual browser, such as Lynx, please login to a text session and view this web page from that browser.

A form is a means for you to give feedback to the website — to go beyond simply viewing documents. There are three types of fields that you may encounter in a form:

To move around ("navigate") between the fields of a form, you can use a mouse to click on the form item which you next want to change. Beware: the mouse will also set/unset a checkbox, when you click on it.
Alternatively, you can click on any form item and, thereafter, use the TAB key and SHIFT-TAB keys. The TAB key moves the cursor/focus forward to the next field. SHIFT-TAB (meaning that you must hold down the SHIFT key, then press the TAB key and let go of it, then let go of the SHIFT key) moves backward to the previous field. When you fill-in fields in a form, absolutely nothing happens until you explicitly submit the form (see below).

Further down is an empty form with a few fields on which you can practice. Click on the empty space below this sentence, to enter the form...

 

...then use your TAB key to go to the first field. (Or you can go directly to it by clicking on it with your mouse.)


Text-entry

A text-entry field looks like this:

Type here:

To fill a text-entry field, first move there with your TAB or SHIFT-TAB keys. (You can also click on it with your mouse). Then, type in some text. You can use the BACKSPACE and DELETE keys and the LEFT ARROW and RIGHT ARROW keys of your keyboard, to make corrections as you type.

Next, press the TAB key to indicate that you have finished entering your text into that field. You can practice on the field above (go ahead, it can't hurt).
IMPORTANT: Do not press ENTER (RETURN) when you are done typing into a text field. If you do, the browser will think that you have finished with the whole form and that you are submitting it (see below). Use only TAB or the mouse to move off the field.

Checkbox

A checkbox looks like this:

Check here.

A checkbox has just two settings: checked and not checked. You can switch between these two settings by moving to the checkbox with your TAB and SHIFT-TAB key and then pressing the SPACE bar. (The SPACE bar is the very long key at the bottom of your keyboard. It is the only key that has no character or symbol physically marked on it.)

If you click on the box with your mouse, you will both move there and set/unset the checkbox at the same time. Pressing SPACE (or clicking with the mouse) will add a checkmark to the checkbox. Pressing (or clicking) again, removes the checkmark. Try out the checkbox above.

Button

A button looks like this:

Submit the form:

To press a button, move to it with your TAB or SHIFT-TAB key, and then press the SPACE bar. As a short-cut, you can instead press the ENTER/RETURN key from any field in the form. (or you can just click on it with your mouse).

Submit button

A common example of a button is a 'Submit' button, like the one above. Once you have filled in all the fields in a form, press the form's 'Submit' button to send the contents of the form (everything that you typed or checked in the form) back to the website. The website will process your feedback, and then it will display back to you a new web page, such as an acknowledgement that your submission has been saved.

You can practice on the above 'Submit' button; it will do nothing.
Some website designers label the 'Submit' button with words other than "Submit", to clarify what exactly will happen when you press it. Examples: "Save your changes", "Send the message", and "Add me to this list". They can also use a graphic instead of the simple grey button you see above.

Reset button

Another commonly used button is the 'Reset' button, which is sometimes labelled "Clear Form". It removes all your changes from the form: it unchecks all boxes and empties all text-entry fields (or puts back the default text that was already there before you started). Here is a 'Reset' button:

To start over:


Back Front Contact

Copyright © 2012 Toronto Free-Net Inc.