Forms -- Back to the Basics and Beyond -- Part One -- Basic Forms Tutorial
|
|
|
| 3.3/5.0 (6 votes total) |
|
|
|
Shelley Lowery December 22, 2004
|
If you've been on
the Internet for a while, you've probably filled out a number of online forms.
Forms are used to obtain information from your visitors right through your
website. Your visitors can input their information into your form, click on a
"submit" button and their information will be directed to a location you
specify.
If you're running a
business on the Internet, using a form to process your customer's orders is
an absolute must. I'm amazed at the number of websites that are still processing
their customer's orders via snail mail. If you're not automating your ordering
process, you're losing a significant amount of business every day.
Most Internet users
won't take the time to print out an order form, place it in an envelope and send
you their order -- their time is valuable. You must make the ordering process as
simple as possible. This includes setting up a form on your website to process
their orders electronically.
Forms are used for
all of the following:
- Order forms -
Email subscriptions - Contest registrations - Databases -
Autoresponders - User identifications and passwords - Feedback
This series will
take you step by step through the entire process of setting up a form on your
website including:
* Basic Form
Tutorial * Advanced Forms * Form Tips and Tricks
Basic Form
Tutorial
Your first step in
creating a form will be to get a good form script. This script will reside on
your server within your CGI-bin and will be used to process your form's
information. You can find some great scripts here: http://cgi.resourceindex.com/Programs_and_Scripts/Perl/
To insert a form on
your web page, we will begin with <FORM> and end with </FORM>.
All of the FORM elements will be placed between the FORM tags.
In order for a form
to function, it first needs to know how to send the information to the server.
There are two methods, GET and POST.
* METHOD="GET" -
This method will append all of the information from a form on to the end of
the URL being requested.
* METHOD="POST" -
This method will transmit all of the information from a form immediately
after the requested URL. This is the preferred method.
In addition to a
form needing to know how to send the information, it also needs to know
where to send the information to be processed. The ACTION attribute will
contain the URL to the form processing script or it may contain an email
address.
Example
Form:
<FORM
METHOD=post ACTION="/cgi-bin/example.cgi"> <INPUT type="text"
size="10"> <type="Submit"
VALUE="Submit"> </FORM>
Example Email
Form:
<FORM
ACTION="mailto:[email protected]"> Name: <INPUT name="Name" value=""
size="10"> Email: <INPUT name="Email" value=""
size="10"> <INPUT type="submit"
value="Submit"> </FORM>
The email form will
simply process the information that is placed within your form and send it to
your email address. A CGI script is not required.
Notice when the
ACTION attribute references an email address, you don't have to include the
METHOD attribute.
Form Element
Attributes:
Method - Determines
which http method will be used to send the form's information to the web
server. Action - The URL of the form processing script that resides on the
server. This script will process the form's information. Enctype -
Determines the method used to encode the form's information. This attribute
may be left blank (default) unless you're using a file upload field. Target
- Specifies the target frame or window for the response page.
Form Element
Properties:
- Text boxes -
Hidden - Password - Checkbox - Radio button - Submit - Image
submit - Reset
These properties
are specified by using the TYPE attribute within the form's INPUT
element.
* INPUT
<INPUT
TYPE="?">
The INPUT element
has the following properties that may be used:
TYPE - Type of
input field NAME - Variable name sent to the form processing script.
VALUE - Information associated with the variable name to be sent to the form
processing script. MAXLENGTH - Maximum number of characters that may be
placed within an input area. SIZE - The size of the input text area.
CHECKED - Default button or box selection.
* TEXT
BOXES
<INPUT
TYPE="text">
Enables users to
input text such as an email address.
<FORM
METHOD=post ACTION="/cgi-bin/example.cgi"> <INPUT type="TEXT" size="10"
maxlength="30"> <INPUT type="Submit"
VALUE="Submit"> </FORM>
Text Box
Attributes
TYPE - Text
SIZE - The size of the text box specified in characters. NAME - Name of
the variable to be processed by the form processing script. VALUE - Will
display a default value within the text box. MAXLENGTH - Maximum number of
characters that may be placed within the text box.
*
HIDDEN
<INPUT
TYPE="hidden">
Used to send
information to the form processing script that you don't want your visitors
to see. Nothing will show through the browser.
<INPUT
type="hidden" name="redirect"
value="http://www.yourdomain.com/">
Hidden
Attributes
TYPE - Hidden
NAME - Name of the variable to be processed by the form processing
script. VALUE - The value of the hidden name expected by the form
processing script.
*
PASSWORD
<INPUT
TYPE="password">
Used to enable
users to enter a password. When a password is typed in, asterisks will
appear instead of text.
<FORM
METHOD=post ACTION="/cgi-bin/example.cgi"> <INPUT type="password"
size="10" maxlength="30"> <INPUT type="Submit"
VALUE="Submit"> </FORM>
Password
Attributes
TYPE - Password
NAME - Name of the variable to be processed by the form processing
script. VALUE - Usually blank. SIZE - The size of the text box specified
in characters. MAXLENGTH - Maximum number of characters that may be placed
within the text box.
*
CHECKBOX
<INPUT
TYPE="checkbox">
Enables the user to
select multiple options.
<FORM
METHOD=post ACTION="/cgi-bin/example.cgi"> <INPUT type="CHECKBOX"
name="selection1"> Selection 1 <INPUT type="CHECKBOX"
name="selection2"> Selection 2 <INPUT type="CHECKBOX"
name="selection3"> Selection 3 <INPUT type="Submit"
value="Submit"> </FORM>
Check Box
Attributes
TYPE - Checkbox
CHECKED - Specifies a default selection. NAME - Name of the variable to
be processed by the form processing script. VALUE - The value of the selected
check box.
In the next part of
this series, we will finish the form element properties and move on to some
more advanced form options. Make sure you don't miss this powerful
series. |