Business English: Basic Form Elements

Teaching about Basic Form Elements

Introduction

FORMS are used to gain information from the reader of a web page. They are often used in questionnaires, order forms, data entry (like on CTS's page for students), and as a means of getting feedback from the reader. Forms are called interactive because they allow your reader to share information with you or request information by clicking on radio or checkboxes, filling in text boxes, or selecting items from pop-up menus. You can use web forms to help you sell products, get feedback or do research.

Forms are based on the idea of a database. There are three types of fields you can use on your form: INPUT, SELECT, and TEXTAREA. Most fields have a name attribute. When you receive the information from the form by e-mail, this is the heading category so you should make it distinctive just like when you are designing a field in a database, rather than a field in an entry form. Other strange things happen if you do not change the name attribute for each field.

In order to run an interactive form you need a tag that includes the cgi script information to run the form. Below is an example of such a tag:

<FORM METHOD = POST ACTION="http://hoohoo.ncsa.uiuc.edu/cgi-bin/post-query"></FORM>
You will not see this information on the web page because it is just instructions to the computer.

Another tag containing a cgi script is the one we will be using in this assignment. It looks like this: 

<FORM METHOD = POST ACTION="http://www.cwu.edu/cgi-bin/mailto.cgi?freemanr@cwu.edu&BenJerry's Questionnaire"></FORM>

The http address is where the cgi script is found that runs this action. The mailto section tells the server to mail the answers to the email address freemanr@cwu.edu and the BenJerry's Questionniare is the subject line of the email message freemanr will receive.

Other basic parts of the interactive form are:

INPUT TAGS

Input type tag can contain either checkbox, radio, text, submit, reset, and password . Submit causes the form information to be sent to the server with the cgi script and then on to the email address. Reset will cause you to erase all the information on the form so you can start again (clear the form).

CHECKBOX:
Example:<INPUT TYPE="checkbox" NAME="color" VALUE="red">
RADIO:
Example:<INPUT TYPE="radio" NAME="color" VALUE="red">
TEXT:
Example: <INPUT TYPE="text" NAME="name" VALUE="Randi">
PASSWORD:
Example: <INPUT TYPE="password" NAME="password" VALUE="password">
SUBMIT:
Example:<INPUT TYPE="submit" VALUE=" Submit Form ">
RESET:
<INPUT TYPE="reset" VALUE="Erase the form ">

SELECT TAGS

This makes a pop-up box when you hold the mouse on it.

Example: 

<SELECT NAME="COLOR">

<OPTION>Red

<OPTION SELECTED>Blue

<OPTION>Yellow

</SELECT>
Inside the SELECT tags only plain text and one or more OPTION tags are allowed. The SELECTED attribute tag specifies a pre-selected option, and the NAME attribute is required.

TEXT AREA TAGS

Example:

<TEXTAREA NAME="MESSAGE" ROWS=4 COLS=40>
Message Text
</TEXTAREA>

There are a number of different attributes that are used in form tags. We talked about the name attribute earlier. There is also a value attribute. The value attribute is important because this information shows the person's specific answer to a question when using a checkbox or radio button. For example, if you are asking the respondent about their age like below you will receive an answer in your e-mail which looks like Age: 19-25

<INPUT TYPE="checkbox" NAME="AGE" VALUE="Under18">
Under 18
<INPUT TYPE="checkbox" NAME="AGE" VALUE="19-25">
19-25
<INPUT TYPE="checkbox" NAME="AGE" VALUE="26-35">
26-35
<INPUT TYPE="checkbox" NAME="AGE" VALUE="36-45">
36-45
<INPUT TYPE="checkbox" NAME="AGE" VALUE="Over 45">
Over 45

The value attribute is also important because when you are using the submit and reset buttons, the value shows up on the web page and it also allows the default values to be reset after someone submits the form data.

You can set size and the maxlength of a field. Another special attribute is called checked which sets the default values of radio buttons or checkbox. To learn more about these other attributes, let's look at Jane Chinn's demonstration page.


Common Problems:

  1. Remember, if you want to create a box for the person to write in (even if it is only one number or word), you must use the input type "text" not input type "checkbox".

  2. When you use the type "radio" you must give different name attributes to each button if you want the reader to be able to select more than one button. Interestingly with "checkbox" you can have the same name for each entry, and the person can choose as many as they want.

  3. If you don't write words to go along with your html code, you will not see any words on the web page!



Main Page|| Teaching how to make forms || Sample email message to the community|| Sample student report

http://www.cwu.edu/~freemanr/elements.html
Please send questions/comments to Randi Freeman/ freemanr@cwu.edu
Last updated: 6 March 1999