Forms -- Back to the Basics and Beyond -- Part Two -- Advanced forms
|
|
|
| 2.0/5.0 (3 votes total) |
|
|
|
Shelley Lowery December 22, 2004
|
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:[email protected]"> <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. |