Web forms are an incredibly useful tool. While your web pages are all about you talking to the people viewing your page, forms are all about the viewer talking to you! Information is gathered in a pre-defined format and emailed straight to your mailbox.
This instruction set
describes the basics of creating a form used to gather information which will be emailed to you. For more detailed information, please visit Matt's Script Archive.
In order to create a web page containing a form, html tags relating to forms must be added to the body of your web page. These tags tell your browser that it is dealing with a form and what kinds of input the form may accept.
Information in forms is gathered as a series of input variables. These inputs define the way the information is gathered and sent. Every form consists of a number of inputs sandwiched between a form start and end tag.
The start and end tags look like this:
<form method="post" action="/cgi-bin/formmail.pl">
Notice that the form's ACTION attribute refers to '/cgi-bin/formmail.pl'. This is the program the web server uses to process the data that is entered into your form.
Input variables are defined using the input tag. A number of different input tags and input tag types are described below. Notice that each description is followed by the HTML tags needed to include in your web page and an example of the result.
Description of Input Tag Types
The Text input type is one of the most commonly used. It generates a single line text box of the size specified where the user may enter any text.
<INPUT TYPE="TEXT" NAME="Variable_Name" VALUE="initial value" SIZE=15>
||Hidden input variables do not display anything to the person viewing the web page. They are used frequently to pass information to the program processing the form. See Special Input Variables below for some examples of Hidden input tags.
<INPUT TYPE="HIDDEN" NAME="Variable_Name" VALUE="Information Content">
||The Selection Box input type creates a drop box of pre-selected items for the person viewing the page to choose from. Any number of options may be pre-programmed into the selection. Notice that the first option listed appears in the box by default.
||The Radio Button is similar to the Selection Box in that it
allows the person viewing the page to select one option from a number of
choices. Once again any number of selections may be programmed.
This Radio Button example asks a viewer to select one favourite colour.
Red:<INPUT TYPE="RADIO" NAME="Favourite_Colour">
Green:<INPUT TYPE="RADIO" NAME="Favourite_Colour">
Blue:<INPUT TYPE="RADIO" NAME="Favourite_Colour">
||A Checkbox presents a yes/no box, where the person viewing the
web page will indicate agreement or disagreement with the choice presented.
Checkboxes may be used to give viewers the opportunity to select any number
of choices from a list.
<INPUT TYPE="CHECKBOX" NAME="Like_Checkboxes">
<INPUT TYPE="CHECKBOX" NAME="Like_Forms">
||The Textarea input type creates a multiline input box allowing
the person viewing the web page to enter a body of text. Text
entered between the two tags appears in the input box.
The size of the input box is defined by the rows and cols
<TEXTAREA NAME="Paragraph_Text" ROWS=2 COLS=20>
Text entered here appears in the text box
||The Submit/Reset Buttons, when pressed, either cause the form
data entered by the web page viewer to be submitted to the program defined
by the form action or cause the data entries to be cleared.
The text entered in the value appears on the button face, if no
value is defined it will default to 'Submit Query' (for the submit button) or
'Reset' (for the reset button).
<INPUT TYPE="SUBMIT" VALUE="Submit">
<INPUT TYPE="RESET" VALUE="Clear">
A number of input variable names have special meaning.
The most commonly used special
variables are explained below. Other variables are defined by you, the
creator of the web form, and can be used to convey any information you require.
Note: predefined refers to variables where the VALUE is defined
in the text of the input tag.
Description of Special Input Variable Names
||The recipient variable is required. Its
value is the email address that the form results will be sent to. Without
it, the form information can not be delivered. The recipient variable
may be either an input that the viewer enters or a predefined, hidden
||The value of this variable is used as the subject for the email which is
sent to the recipient.
||The redirect variable is usually predefined and hidden.
The value is the web address that the web viewer will be sent
to upon completing the form.
||The required variable is usually predefined and hidden.
The value is a comma separated list of variable names which must
be filled out in order for the form to be submitted.
||This is the email address of the web page viewer who submits the form.
used by the program as the reply address when it sends the results
in email. The value of this variable is entered by the viewer of your
||As the name implies this is the proper name of the web page viewer. It is included
in the from header of the email sent by the form.
The following sample form displays the content which created it inside
the boxes. Try it!
|Finally, the 'end form' statement which is hidden from view: