Next Page
Previous Page
Anatomy of a Form
Forms are made up of two basic parts. The HTML or (frontend) of the
Form and the Application/Script code (backend) which processes the data
entered into the form. We will cover the HTML part of the form.
Forms consists of the "FORM" tag and Input tags such as "INPUT",
"SELECT" and "TEXTAREA". You can have many forms on one page, but they
cannot be nested.
The Form tag usually includes two Attributes: METHOD and ACTION.
The Method attribute can have a value of: GET or POST
(This determines how the data is sent to the script for processing.)
POST (most common) sends form data as a document
GET sends form data as part of the URL header
for all to see.
The Action attribute points to the actual Script which will process
your Form data.
(This is the URL to the script on your server or
somewhere else.)
The INPUT tag allows you to specify the TYPE of format to use to gather data, such as: Submit, Radio, Text (default), Checkbox etc. It also includes a NAME attribute so that each data area is unique.
Code as follows:
<FORM
METHOD="post" ACTION="http://www.myserver.com/cgi-bin/script"
>
<INPUT TYPE="text" Name="myText">
...
</FORM>
Text Input
Text Input allows you to create text fields for users to enter data
into. Each field should have its own name. You can customize the size
of these fields as well. These are One Line only fields.
You can set a default Text value in your field by using the Value
attribute. This might come in handy for a State code where the normal
value would be "TX". It can be overtyped to change the value.
Lets create a Basic form with only a text field.
Code as follows:
<HTML>
<HEAD>
<TITLE>Tell me your Name</TITLE>
</HEAD>
<BODY>
<H2>Who are you?</H2>
<FORM
METHOD="post" ACTION="http://www.myserver.com/cgi-bin/script"
>
<P>Enter your Name:<INPUT TYPE="text" NAME="theName"
Value="type your name here">
</P>
</FORM>
</BODY>
</HTML>
Example:
Who are you? |
Submit Buttons
The Submit button allows your user to choose when to send the data
they have entered into your form. It's always a good idea to have this
button as it has become expected by most clients. You can have multiple
submit buttons within a Form by using the Name and Value attributes.
Both the Name and Value are sent to the script and you would have
to test for the name/value pairs to see which submit button was pressed.
By using the Value attribute, you can Change the way a button appears
to the client. Instead of SUBMIT, they might see SEND IT if you code
Value="Send It" in your Input tag.
Lets update the Basic form with the one field and a submit button.
Code as follows:
<DIV Align="center">
<H2>Who are you?</H2>
<FORM
METHOD="post" ACTION="http://www.myserver.com/cgi-bin/script"
>
<P>Enter your Name:<INPUT TYPE="text" NAME="theName">
</P>
<P><INPUT TYPE="submit" Value="Send It">
</P>
</DIV>
</FORM>
Example:
Who are you? |
Radio Buttons
The Radio buttons display a list of items, of which only One can
be selected at a time. For Example, Small, Medium or Large would
require just One choice. You could use Radio Buttons to accomplish this
on your Form. Notice that the Name for the Radio buttons remains the
same. This enforces only one choice.
Lets update the Basic form with Radio buttons.
Code as follows:
<DIV Align="center">
<H2>Who are you?</H2>
<FORM
METHOD="post" ACTION="http://www.myserver.com/cgi-bin/script"
>
<P>Enter your Name:<INPUT TYPE="text" NAME="theName">
</P>
</DIV>
<P>Enter your Age Range:<BR>
<OL>
<LI>
<INPUT TYPE="radio" Name="theAge" Value="21-30">21-30
<LI>
<INPUT TYPE="radio" Name="theAge" Value="31-40">31-40
<LI>
<INPUT TYPE="radio" Name="theAge" Value="41-50">41-50
<LI>
<INPUT TYPE="radio" Name="theAge" Value="50+">50+
</OL>
<DIV Align="center">
<P><INPUT TYPE="submit" Value="Send It">
</P>
</DIV>
</FORM>
Example:
Who are you?Enter your Age Range:
|
Checkboxes
The Checkboxes make it possible to choose Multiple items in a list.
Each box can be Checked or Unchecked. The default is Unchecked. When
submitted the name/value pairs are sent for all Checked and show "on" while
Unchecked would show "off". These name/value pairs can then be checked
in your script for this on/off condition. You can also use the
CHECKED attribute to set a default value as on.
Lets update the Basic form with Checkboxes.
Code as follows:
<DIV Align="center">
<H2>Who are you?</H2>
<FORM
METHOD="post" ACTION="http://www.myserver.com/cgi-bin/script"
>
<P>Enter your Name:<INPUT TYPE="text" NAME="theName">
</P>
</DIV>
<P>Enter your Age Range:<BR>
<OL>
<LI>
<INPUT TYPE="radio" Name="theAge" Value="21-30">
<LI>
<INPUT TYPE="radio" Name="theAge" Value="31-40">
<LI>
<INPUT TYPE="radio" Name="theAge" Value="41-50">
<LI>
<INPUT TYPE="radio" Name="theAge" Value="50+">
</OL>
<P>Enter your Favorite Colors:<BR>
<UL>
<LI>
<INPUT TYPE="checkbox" Name="red" Checked>Red
<LI>
<INPUT TYPE="checkbox" Name="blue">Blue
<LI>
<INPUT TYPE="checkbox" Name="yellow">Yellow
</UL>
<DIV Align="center">
<P><INPUT TYPE="submit" Value="Send It">
</P>
</DIV>
</FORM>
Example:
Who are you? | |
| Enter your Name: | |
Enter your Age Range:
|
Enter your Favorite Colors:
|
|
| |
Selections
Selections allow the client to select one or more items from a menu
or scroll list. It is similiar to Radio buttons but display differently.
Selections are coded with the "SELECT" tag and individual options
with the "OPTIONS" tag. It works like Lists with the "UL" and "LI" tags.
The Select tag also contains a Name attribute to hold its value when
the form is submitted.
Lets add a Select Drop down box to our form.
Code as follows:
<P>Select your hair color:
<SELECT NAME="hcolor">
<OPTION>Black
<OPTION>Blonde
<OPTION>Brown
<OPTION>Red
<OPTION>Blue
<OPTION>White
</SELECT"></P>
Example:
Who are you? | |
| Enter your Name: | |
Enter your Age Range:
|
Enter your Favorite Colors:
|
| Select your hair color: | |
|
| |
Text Area
Text Areas are input fields in which many lines of data can be
entered instead of just one. This is used for such things as Email
applications. The Text Area element <TEXTAREA> includes three
attributes: Name, Rows and Cols. These specify the Name of the data
area along with the Height and Width in rows and columns (characters).
To add default text, place it between the open and close "TEXTAREA"
tags.
Lets add a Text Area box to our form.
Code as follows:
We appreciate your comments:
<TEXTAREA NAME="comment" ROWS="5" COLS="30">
Code your comments here</TEXTAREA>
Example:
Who are you? | |
| Enter your Name: | |
Enter your Age Range:
|
Enter your Favorite Colors:
|
|
Select your hair color: |
We appreciate your comments: |
|
| |
Chapter 8 Assignment
Next Page
Previous Page
Goto Top of Page