HTML Forms - How to Create a Web Page Form Part Two
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
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
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
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
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
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://www.web-source.net/cgi-bin/web/jump.cgi?ID=762
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 © Shelley Lowery
About the Author:
Shelley Lowery is the author of the acclaimed web design course, Web Design
Mastery.
http://www.webdesignmastery.com
And, Ebook Starter - Give Your Ebooks the look and feel of a REAL book.
http://www.ebookstarter.com
Visit Web-Source.net to sign up for a complimentary subscription to Etips
and receive a copy of the acclaimed ebook, "Killer Internet Marketing
Strategies."
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
More Articles
|
