Most forms are enclosed in a table, but it is not required.
Lets look at a simple form:
1: <FORM ACTION = "/cgi-sys/formmail.pl"
METHOD = "POST">
2: <INPUT TYPE="TEXT" NAME="Email">
Enter Your E-mail Address
3: <INPUT TYPE="SUBMIT" VALUE="SUBMIT">
4: <input type=hidden name="recipient"
value="myemail@myserver.com">
Line 1 is required, but check
documentation from your provider for path statements.
Line 3 creates the "Submit"
button, and is also required.
Line 4 sends the input
to the E-mail address that you put in the Value area.
Line 2 is a standard field, and
can be customized by changing the "NAME"
When using the Text type, you should never have 2 fields NAMEd the same.
Example:
1: <INPUT TYPE="TEXT"
NAME="Email"> Enter Your E-mail Address
2: <INPUT TYPE="TEXT"
NAME="Email"> Enter Another E-mail Address
This example will either generate an error, or one line will replace any value entered into the other. (see the discussion on Radio Buttons below)
If you want a field to have a preset value, you can add VALUE="whatever" .
Example <INPUT TYPE="TEXT" NAME="Subject" Value="Ask the Webmaster">
This will bring up the input
box with the value "Ask the Webmaster" already filled in, but the user
can still back up over this, and type in another subject.
If you want to force a field to have a preset value, you have to hide the field:
Example <INPUT TYPE="HIDDEN" NAME="Subject" Value="Ask the Webmaster">
This will work just as if someone had typed "Ask the Webmaster" into the box, but since the field is hidden, the input box for this field will never appear on the page.
Radio Buttons and Check Boxes
Radio Buttons and Check Boxes work almost the same as text fields.
Radio Buttons:
<INPUT TYPE="RADIO" NAME="Interest" VALUE="Computers"
>Computers<BR>
<INPUT TYPE="RADIO" NAME="Interest" VALUE="Anime"
>Anime<BR>
<INPUT TYPE="RADIO" NAME="Interest" VALUE="TV"
>TV<BR>
|
Computers Anime TV |
Radio Buttons will allow you to select
one option OR another option. Notice that the NAME variable field
are all named the same. This is because this is one option and since
1 variable cannot have 2 values ( A=1 but A cannot equal both 1 and 2)
In this case, the variable "Age" can either hold the
value "Under 13", "Am 13" or "Over 13", but only one.
Check Boxes:
<INPUT TYPE="CHECKBOX" NAME="Interests_1"
VALUE="Computers" >Computers<BR>
<INPUT TYPE="CHECKBOX" NAME="Interests_2"
VALUE="Anime" >Anime<BR>
<INPUT TYPE="CHECKBOX" NAME="Interests_3"
VALUE="TV" >TV<BR>
|
Computers Anime TV |
Notice the similarity between the Radio Buttons and Check Boxes, the difference here is that while a Radio Button can have one value OR another, a check box will accept one value AND another.
It does this by using seperate variables for each field. Notice in the NAME=" " variable field, you have Interests_1, Interests_2 and Interests_3, three differently named variables.
A check box checks to see if it has been checked or not (True or False). If it is (True) then the Value is added to the variable and sent on. If not (false) then the variable is left blank, and not included in the resulting report.
There is a lot more that you can do with Form Mail, and I will update this discussion as I get the time.
If you have been following
along with this tutorial, you have just gotten your first real taste of
basic Programming principals.
(Cool huh?). Think of a variable as an empty drinking
glass. You can put soda, milk, tea or anything you want in the glass
and you can pour part or all of the drink into another glass.
A variable can hold a Character (A B C), Integer (1 2 3) or String (Hi There, 1234)
Heres a little fake progam to show how computer treat variables:
The scenario, a room full of friends.
| "Does anyone want something to drink?" | <INPUT TYPE="RADIO" NAME="Drink" VALUE="Yes"
>Yes<BR>
<INPUT TYPE="RADIO" NAME="Drink" VALUE="No" >No<BR> |
| "Sure!"
"Okay, do you want Soda, Milk or Tea?"
|
If Drink="yes" then
<INPUT TYPE="RADIO" NAME="type" VALUE="Soda" >Soda<BR> <INPUT TYPE="RADIO" NAME="type" VALUE="Milk" >Milk<BR> <INPUT TYPE="RADIO" NAME="type" VALUE="Tea" >Tea<BR> Else (in other words, if Drink = No) end; |
This little program is a mixture
of HTML and Turbo Pascal, and dosent really work, but it shows how
variables work, and variables work the same in any programming or scripting
language.