HOME articles tutorials tool directory about

Forms Part II: Advanced Forms
continued

by Shelley Lowery

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

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://willmaster.com/master/proscripts.shtml

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.

About the Author:

Shelley Lowery is the author of the highly acclaimed ebook series, Web Design Mastery -- An eight volume (500+ pages) in-depth guide to professional web design. Web Design Mastery is being hailed as the "Bible" for professional web design. www.webdesignmastery.com