Mgmt 298d: E-Commerce
Web Forms Tutorial

How to Use the Forms Tutorial

This form is located at: http://internal.anderson.ucla.edu/staff/sylvia.merino/forms.htm

Learn the basic HTML tags from one of the suggested web tutorial sites. You must know the difference between a "Header" section and a "Body" section!
Make sure that Netscape Composer is setup to use Notepad or Wordpad as the HTML Source Editor.
Alternatively, you can try using Netscape Composer's tool for inserting tags:

Look at the last item in this tutorial, the Form Layout, and view the source code for the form.
Read how each of the form elements (text, radio buttons, etc.) was designed
Design your own form by changing some of the code given here
Read the explanation of CGI when the concept comes up in class
When you thoroughly understand how these tags work, you can design your own from scratch!

Forms Tutorial

Form Tag
Input Tags: Text; Radio buttons; Check boxes; Hidden; Password; Image; Reset; Submit
Textarea Tags
Option and Select Tags: Menus; Scrolling Lists
Form Handling: CGI and Mailto Forms: Mailto Forms; Email sample #1; Email sample #2
Form Layout

Form Tag

Like most HTML tags, the FORM tag is a "container" tag, i.e. the form has a beginning and ending tag to "contain" the form.

Basically, you use the FORM tag in this way:

The form goes into the <BODY> section of the web page, not the <HEADER> section.
The form begins with <FORM>
The form ends with </FORM>. Note: There must be an end tag, otherwise the form doesn't work.

Here are rules for what goes inbetween those tags:

The FORM tag cannot be "nested" inside of another FORM tag (do not try to put another form within the tags for the first form)
You can have more than one form on a page but be careful not to overlap the end of one form with the beginning of the next form
Inbetween the beginning and ending FORM tags you will place all the tags necessary for the form elements (text boxes, check boxes, etc.)
Within the FORM, you can use other HTML tags, such as headings, lists, character formatting, etc.

Here are suggestions for best use of forms:

Make sure each entry field (variable) is given a different name
Consider separating the form from the rest of the web page by using horizontal rules
Provide a link back to your site's main home page from the form page
Use a fixed font via the <PRE> tags or use a table to give an even, clean layout to your form (see example form below)

The beginning <FORM> tag actually is a little more complicated. It also has to specify:

the METHOD used to handle the form
the ACTION to take in handling that form

We'll talk more about this under "Forms Handling".

Input Tags

There are different types of form elements. Several of them belong in a group called "Input types."

Attributes allowed for input type form elements:

ALIGN, only used with TYPE=IMAGE
CHECKED, indicates a check box or radio button is selected
MAXLENGTH, maximum characters allowed in a text field
NAME, similar to declaring a "variable" name for a field; the name to be used when transferring the form's contents
SIZE, size or precise number of characters to allocate to the field or lines to display in a list
SRC, a URL or URN only used with TYPE=IMAGE
TYPE, set = to one of the following: TEXT, RADIO, CHECKBOX, HIDDEN, PASSWORD, IMAGE, RESET, SUBMIT
VALUE, the initial value given to the "name" or variable

Usage: as shown below for the different types.

TEXT

Text input tags allow the reader to enter text on a single input line. When you don't include TYPE= in your input tag, HTML will assume it is the TEXT type.

Attributes allowed for Text tags:

TYPE and NAME are required; TYPE indicates what is to be entered into the field (text), NAME provides the variable name when passing the info on to a server
SIZE is measured in number of characters; default is display 20; users can continue typing into the field past 20, scrolling horizontally
MAXLENGTH limits the number of characters the user can type into the field

Usage:

RADIO BUTTONS

Radio buttons indicate a list of items, of which only one can be chosen.

Rules for Radio buttons:

TYPE is "RADIO"
The NAME attribute creates buttons that belong to a set, and only one choice is allowed per set
The VALUE attribute should be distinct from the other choices in the set
Radio buttons can be used with list tags
Radio buttons can be nested
To preselect a button, add the word "CHECKED" before the close angle brackets
Submitted to server: a single name/value pair per set of buttons (just the user selected option)

Usage:

CHECK BOXES

Check boxes allow the user to choose from several items in a list; multiple selections are allowed.

Rules for check boxes:

TYPE is "CHECKBOX"
The NAME attribute creates boxes that belong to a set OR can be distinct info for each choice
The VALUE attribute isn't really necessary here (only the name/value for the SELECTED items gets passed), but you may benefit by making it distinct; if you didn't assign a VALUE = " " the default is that the selected choice is marked with a value of "on"
Check boxes can be used with list tags
Check boxes can be nested
To preselect a box, add the word "CHECKED" before the close angle brackets
Submitted to server: only the name/value pair for each selected box. Unselected boxes are ignored.

Usage:

{see email sample #1 for the emailed results from this coding}

or, don't use VALUE, but make the NAME distinct:

{see email sample #2 for the emailed results from this coding}

HIDDEN

A hidden field does not appear to the user, it is "hidden" from their view. It is generally used when a complex interactive form needs to pass variable information on from one form on to another form before passing to the CGI script.

Usage:

PASSWORD

Password text fields echo what the user types with asterisks or bullets. This allows them to feel secure typing in their password, even in a public setting. Note: this is not an actual security measure, i.e. it does not encrypt the password before sending it on to the server!

Attributes allowed for Password tags:

SIZE is measured in number of characters; default is display 20; users can continue typing into the field past 20, scrolling horizontally
MAXLENGTH limits the number of characters the user can type into the field

Usage:

IMAGE

The Image input type allows the user to submit a form by clicking on an image.

Rules for Image buttons:

Use absolute or relative URLs to indicate the image location
You may use the usual image alignment commands

Usage:

RESET

If users make mistakes in filling out your form, they may want to completely "reset" or clear the form and start over.

Rules for the Reset button:

The Reset button resets the fieds to their initial values (whatever was originally checked, etc.)
By default, the button is labeled "Reset"
Adding the "value" attribute allows you to choose the text to show on the button

Usage:

SUBMIT

After your users have entered information into the form, they will want to submit the information.

Rules for the Submit button:

The Submit button takes on the action specified by the ACTION attribute of the FORM tag
If the total form consists only of a single text field, pressing the <enter> key will submit the form, but having a Submit button is preferred
By default, the button is labeled "Submit"
Adding the "value" attribute allows you to choose the text to show on the button

Usage:

Textarea Tags

With the "Textarea" tag the user will be able to type into a multi-line text field (an "area" rather than a single input line)

Attributes allowed for Textarea tags:

NAME, the variable name to be given to the field
ROWS, the visible height of the displayed textarea
COLS, the visible width of the displayed textarea
Text entered between the <TEXTAREA> and </TEXTAREA> tags will be included visibly inside the box
The user can continue to type past the edges of the box
WRAP, allows the text to wrap in the box. There are 3 possibilities: OFF, VIRTUAL, PHYSICAL

Usage:

<TEXTAREA NAME="COMMENTS" ROWS=20 COLS=6 WRAP="PHYSICAL">
A paragraph of default text material can be entered here.
</TEXTAREA>

Option and Select Tags

MENUS

The Select tags begin and end the list. With the "Option" tag the user will choose from only one option within a "select" list.

Attributes allowed for Option tags:

NAME, the variable name to be given to the list
SELECTED, indicates this option is initially selected when the user sees the list
VALUE, when present, indicates the value to be returned when this option is chosen; otherwise it defaults to the contents of the option element

Usage:

<SELECT NAME="Fav">
<OPTION> Vanilla
<OPTION>Chocolate
<OPTION SELECTED>Strawberry
</SELECT>

SCROLLING LISTS

Similar to menus, but the user will make a selection or multiple selections from a finite set of options.

Attributes allowed for Select tags:

NAME, the variable name to be given to the list
MULTIPLE, allows users to make multiple selections
SIZE, can be used to set how many choices will be visible in the window
VALUE, when present, indicates the value to be returned when this option is chosen; otherwise it defaults to the contents of the option element

Usage:

<SELECT NAME="Flavors" MULTIPLE SIZE=2>
<OPTION> Vanilla
<OPTION SELECTED>Chocolate
<OPTION>Strawberry
</SELECT>

Form Handling: CGI and Mailto Forms

It's relatively easy to type HTML markup tags into a web page and create the form interface. Next comes the hard part. The information that a user will enter into your form must be delivered somewhere. For a truly interactive user-experience, the information should be delivered to a server and handled by a particular script on the server that knows about the particular information coming from your web form. Actually, it gets a little more involved:

The server must be configured to receive the information from the form and know that it must pass it on to a program or script in the prescribed manner

A program or script must be written that is prepared to handle (interpret) the information coming from a particular form and process it properly
Form-related events may involve checking against a database, therefore even further processing is needed to couple database info to intended script responses

On Unix servers, the language used to create scripts is called Perl and the scripts are called CGI scripts. Teaching you how to program in Perl and create CGI scripts goes beyond what we have time for in this workshop. We can, however, also have the information delivered to an email box. This takes no CGI script, although the data that lands in your email box may need some explanation.

MAILTO FORMS

As we said earlier in this tutorial, the beginning <FORM> tag has two attributes:

the METHOD used to handle the form, for CGI this would be either POST or GET, for mailto forms it would be POST
the ACTION to take in handling that form, for CGI this would be the URL of the CGI script, for mailto forms it would be the email address

Usage:

<FORM METHOD="POST" ACTION="MAILTO:firstname.lastname@anderson.ucla.edu">
all your form programming goes inbetween the opening and closing form tags
</FORM>

Email received:

Data that a user submits via an email form will appear to be one long string. If you look carefully, it contains all the name/value pairs for each of the form elements you created. Each name/value pair is separated from the next by the ampersand "&" character. Additionally, some special characters get encoded.

For example, the form below submits the following type of info to my email box (all as one line, but I've broken it here):

Email Sample #1

FIRSTNAME=Michael&LASTNAME=Merino&
CLASS=class-mba&
BROWSER=Netscape+3.0&BROWSER=Internet+Explorer+3.0&BROWSER=Netscape+4.0&
FORM-URL-ID=the-url&
NICKNAME=moose&
COMMENTS=Comments+go+here&
Fav=Chocolate%A0&
Flavors=Vanilla%A0&Flavors=Chocolate%A0&
x=33&y=17

Email Sample #2

FIRSTNAME=Mike&LASTNAME=Merino&
CLASS=class-emba&
Netscape+4.0=on&Internet+Explorer+4.0=on&
FORM-URL-ID=the-url&
NICKNAME=chubchub&
COMMENTS=Comments+are+here.&
Fav=Vanilla%A0&
Flavors=Vanilla%A0&Flavors=Strawberry%A0

There are some shareware and commercial software packages available that "parse" these types of email so that you can keep customer records in a spreadsheet or database. You would need to investigate what packages are available and would work with your particular email server and email client.

Form Layout

Note that there are two ways to give a pleasing layout to your form:

Use the <PRE> tags so that the font uses FIXED rather than variable widths and you can control the exact spacing of characters
Use a table to place your form elements exactly where you want them (I used this method below, with column 1 set to a width of 100 pixels)

Example form using all of the form elements discussed above:

Send comments to:

Sylvia Merino

Anderson Computing & Information Services

FIRST NAME:
LAST NAME:
YOUR CLASS:	emba femba mba
BROWSER(S) YOU USE:	Netscape 3.0 Internet Explorer 3.0 Netscape 4.0 Internet Explorer 4.0 Other
(hidden field)
SECRET NICKNAME:
SUBMIT COMMENTS:	A paragraph of default text material can be entered here.
SINGLE FAVORITE:
FAVORITE(S):
IMAGE SUBMIT BUTTON:
REGULAR SUBMIT:
REGULAR RESET:

Mgmt 298d: E-Commerce Web Forms Tutorial

How to Use the Forms Tutorial

Forms Tutorial

Table of Contents

Form Tag

Input Tags

TEXT

RADIO BUTTONS

CHECK BOXES

HIDDEN

PASSWORD

IMAGE

RESET

SUBMIT

Textarea Tags

Option and Select Tags

MENUS

SCROLLING LISTS

Form Handling: CGI and Mailto Forms

MAILTO FORMS

Form Layout

Mgmt 298d: E-Commerce
Web Forms Tutorial