Forms
-- Back to the Basics and Beyond -- Part One -- Basic Forms
Tutorial
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:you@yourdomain.com">
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 Attributes
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
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
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
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
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.
Copyright © Shelley Lowery
More Articles
|
