Forms -- Back to the Basics and Beyond  -- 
Part Two -- Advanced forms

By Shelley Lowery

In part one of this series we focused on setting up a basic
form on your website. We discussed the Form Element Attributes
and began the Form Element Properties. In part two of this
series, we will continue with the Form Element Properties and
move on to some more advanced form options.

If you missed part one, you can find it here:
http://www.web-source.net/html_forms1.htm

In part one of this series, we went over Text boxes, Hidden,
Password and the Checkbox Form Element Properties. We will
now continue with the remaining properties.


* RADIO BUTTON

<INPUT type="radio">

Enables the user to select multiple options.

<FORM METHOD=post ACTION="/cgi-bin/example.cgi">
<INPUT type="RADIO" name="selection1"> Selection 1
<INPUT type="RADIO" name="selection2"> Selection 2
<INPUT type="RADIO" name="selection3"> Selection 3
<INPUT type="Submit" value="Submit">
</FORM>

Radio Button Attributes:

TYPE - Radio
CHECKED - Specifies a default selection.
NAME - Name of the variable to be processed by the form
processing script.
VALUE - The value of the selected radio button.


* SUBMIT

<INPUT type="submit">

Enables users to submit the form information to the
form processing script.

<INPUT type="SUBMIT" value="Submit">

Submit Attributes:

TYPE - Submit
NAME - Name of the variable to be processed by the form
processing script.
VALUE - Specifies the text to be displayed on the submit
button.


* IMAGE SUBMIT BUTTON

<INPUT type="image" SRC="url">

Enables users to submit the form information to the form
processing script. Instead of the regular submit button,
an image submit button will be displayed.

<INPUT type="image" name="submit" SRC="image.gif">

Image Submit Attributes:

TYPE - Image
NAME - Name of the variable to be processed by the form
processing script.
SRC - Image URL.


* RESET

<INPUT type="reset">

Enables users to clear a form if necessary.

<INPUT type="RESET" value="Reset">

Reset Submit Attributes:

TYPE - Reset
VALUE - Specifies the text to be displayed on the reset
button.


* SELECT

<select></select>

Surrounds the code for a selection drop down menu.

<FORM METHOD=post ACTION="/cgi-bin/example.cgi">
<SELECT SIZE="5">
<OPTION>option 1
<OPTION>option 2
<OPTION>option 3
</SELECT>
<INPUT type="Submit" value="Submit">
</FORM>

Select Attributes:

NAME - Name of the variable to be processed by the form
processing script.
SIZE - Specifies the number of visible selections.
MULTIPLE - Enables users to select multiple selections.


* OPTION

<option>

Used with the SELECT element to display the
options.

<FORM METHOD=post ACTION="/cgi-bin/example.cgi">
<SELECT>
<OPTION>option 1
<OPTION>option 2
<OPTION>option 3
</SELECT>
<INPUT type="Submit" VALUE="Submit">
</FORM>

Option Attributes:

SELECTED - Specifies a default selection.
VALUE - Specifies the value of the variable in the select
element.


* TEXTAREA

<textarea></textarea>

Specifies an open text area.

<FORM METHOD=post ACTION="/cgi-bin/example.cgi">
Enter Your Comments:<BR>
<TEXTAREA wrap="virtual" name="Comments" rows=3
cols=20 maxlength=100>
</TEXTAREA><BR>
<INPUT type="Submit" VALUE="Submit">
<INPUT type="Reset" VALUE="Clear">
</FORM>

Textarea Attributes:

NAME - Name of the variable to be processed by the form
processing script.
COLS - The number of columns within the text area.
ROWS - The number of rows within the text area.
WRAP - Specifies the text wrap. The default setting is off.
The WRAP can be set to "VIRTUAL" or "PHYSICAL" and will
wrap the text as the user types.

Tip: In order to properly format your form, you may want
to place it within a table.

Here is a basic email form set up within a table:

<FORM action="mailto:you@yourdomain.com">
<TABLE BORDER="0" CELLPADDING="2">
<TR>
<TD><FONT face="Verdana" size=2>Name:</FONT></TD>
<TD><INPUT name="Name" value="" size="10"></TD>
</TR>
<TR>
<TD><FONT face="Verdana" size=2>Email:</FONT></TD>
<TD><INPUT name="Email" value="" size="10"></TD>
</TR>
<TR>
<TD></TD>
<TD><INPUT type="submit" value="Submit"></TD>
</TR>
</TABLE>
</FORM>


* Advanced Forms

If you have a good form processing script, you will have
the option to create highly technical forms with additional
options:

Multi-page Forms

Provides you with the ability to create a form that spans
more than one page. The data you specify will be collected
on the first form page and will be transferred to the second
page. You can have as many pages as you need and the data
will continue to be passed through each page until the final
submission. Placeholders are used within each form page to
collect and pass the data.

Customized Confirmation Page

Enables you to create a customized confirmation page that
may contain your visitor's name and any other information
you've collected. In addition, you can even include the
date, time and your visitor's IP address (Internet Provider).

Printable Confirmation Page

Enables you to provide your customers with a printable
confirmation page for data such as order receipts.

Templates

Provides you with the ability to completely customize the
information your form processes. You can use a template to
specify how your data will be displayed when it is sent to
your email address, and even use a template to set up a
database in a specific format.

Database

Enables you to collect your form's data and stores it
within a database.

The possibilities are endless. Keep in mind, most form
processing scripts will not provide you with these abilities.

The best form I have found is called, Master Form. This form
will enable you to have the results emailed to you or to a
specified address, can write your information to a database
file and even have a personalized thank you page. In addition,
you can even have multi-page forms with no limit on the
number of pages. This script costs $35 and can be found here:
http://www.web-source.net/cgi-bin/web/jump.cgi?ID=762

You can find a free script with similar features here:
http://cgi.tj/scripts/alienform/

In the final part of this series, we will be focusing on some
great tips and tricks you can use to spice up your forms
such as:

Creating a Default Form Option
Customizing Your Input Boxes
Adding Color to Your Input Boxes
Disappearing Form Text
Flashing Cursor in Form on Load
Tabbing Through Forms
Customizing Form Colors

Make sure you don't miss the final lesson in this powerful
series.

Copyright © 2001, all rights reserved

About the Author:

Shelley Lowery is the author of Ebook Starter. A complete
ebook design kit including over fifty predesigned ebook
templates and ebook covers.
http://www.web-source.net/ebookstarter.htm
Shelley invites you to partner with her in her Ebook Starter
affiliate program. Visit: http://www.web-source.net


You have permission to publish this article electronically, in print, in your ebook or on your web site, free of charge, as long as the author bylines are included.

html forms Part One
html forms Part Three