HTML Forms - How to Create a Web Page Form
Part Three
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 continued with the Form Element Properties
and moved on to some more advanced form options.
In part three of this series we will focus on some great tips and
tricks you can use to spice up your forms.
If you missed part one, you can find it here:
http://www.web-source.net/html_forms1.htm
If you missed part two, you can find it here:
http://www.web-source.net/html_forms2.htm
Form
Tips and Tricks
Now that
you have a basic understanding of forms and how you can place them
within your website, we'll now focus on a few "tips & tricks" you can
use to spice up your forms.
Creating
A Default Form Option
The OPTION
tag is used to create options listed in a drop down box of a form. You can
select a default option, by adding the word "selected" within your OPTION
tag.
<SELECT>
<OPTION>option 1
<OPTION SELECTED>option 2
<OPTION>option 3
<OPTION>option 4
<OPTION>option 5
<OPTION>option 6
</SELECT> |
Customizing
Your Input Boxes
You can
specify the size of your INPUT box by changing the SIZE value. In addition,
you can change the amount of text input by changing the MAXLENGTH value.
When specifying the MAXLENGTH value, make sure you provide your visitors
with enough space to type in the necessary information.
| <INPUT
type="text" SIZE="10" MAXLENGTH="40"> |
Adding
Color to Your Input Boxes (IE)
The
INPUT tag is used to create input fields within a web page form. You can
change the font, input text color, input text size and the background color
of your INPUT box by using STYLE tags.
<FORM>
<INPUT type="text" STYLE="color: #FFFFFF; font-family: Verdana; font-weight:
bold; font-size: 12px; background-color: #72A4D2;" size="10"
maxlength="30">
</FORM |
Disappearing
Form Text
You can
display default text within your text input boxes that magically disappears
when you click inside the box. This will enable you to provide your visitors
with an example of text they should place within your text box.
| <INPUT
type="text" name="url" value="http://www.yourdomain.com" size="30"
onfocus=value=''"> |
Change
the "value="http://www.yourdomain.com" text to the default text you would
like to be displayed within your text box.
Flashing
Cursor in Form on Load
You can
set up your forms so that when the page loads your visitor's cursor will
be flashing within your text box.
Place the following code witin your <BODY> tag. This code tells the
browser to place the cursor within the "customer" form in the "email" text
box.
| <body
onLoad="focus();customer.email.focus()"> |
The
"customer" text represents the name of your form. The name attribute should
be added to your form like this:
You can
change the name to whatever you'd like. However, make sure you also change
it within your <BODY> tag as well. They must be the same.
The "email"
text represents the name of your form element. The <input> attribute
should be written like this:
| <input
type="text" name="email"> |
You can
change the "email" name to whatever you'd like. However, make sure you also
change it within your <BODY> tag as well. They must be the
same.
Tabbing
Through Forms
You can
enable your visitors to tab through your form fields simply by adding "tabindex"
to your INPUT tags.
<FORM
METHOD=post ACTION="/cgi-bin/example.cgi">
<INPUT type="text" name="name" size="20" maxlength="30"
tabindex="1">
<INPUT type="text" name="address" size="20" maxlength="30"
tabindex="2">
<INPUT type="text" name="email" size="20" maxlength="30"
tabindex="3">
<INPUT type="text" name="url" size="20" maxlength="30"
tabindex="4">
<INPUT type="Submit" VALUE="Submit">
</FORM> |
The
"tabindex" value determines the order in which you will tab through the text
boxes. If you would like the tab order to skip a certain area, such as check
boxes and radio buttons, simply use a negative value beginning with
"-1" then "-2" and so on. Each negative value will be bypassed when tabbing
through your form.
Customizing
Form Colors
You can
completely customize the look of your forms simply by using STYLE tags.
Each of the following examples will enable you to customize your forms in
specific colors. You can change the colors by changing the hexadecimal color
codes.
<FORM
METHOD=post ACTION="/cgi-bin/example.cgi">
<TEXTAREA wrap="virtual" name="comments" rows=6
cols=20 STYLE="scrollbar-face-color: #317B9C;
scrollbar-track-color: #87B4C9;
scrollbar-arrow-color: #54A1C4;
scrollbar-3dlight-color: #B8D7E6;
scrollbar-shadow-color: #1E6180;
scrollbar-highlight-color: #7CBCDA;
scrollbar-darkshadow-color: #1E6180">This example displays the scrollbars
in an alternative color. You can change these colors to whatever you'd like
simply by
changing the hexadecimal color codes.
</TEXTAREA>
<INPUT type="Submit" VALUE="Submit" STYLE="color:#FFFFFF; background:
#317B9C;
font-weight: bold">
<INPUT type="Reset" VALUE="Reset" STYLE="color:#FFFFFF; background: #317B9C;
font-weight: bold">
</FORM> |
The following
example displays a form with colored scrollbars and text. The text is displayed
in a specific font and the face of the button displays an image background.
This example will require you to include an image. Simply create a small
patterned 2x2 .gif image and upload it to your server. You will need
to replace the (yourimage.gif) text within the "Submit" and "Reset"
background values to the URL of your image.
<FORM
METHOD=post ACTION="/cgi-bin/example.cgi">
<TEXTAREA wrap="virtual" name="comments" rows=6
cols=20 STYLE="scrollbar-face-color: #317B9C;
scrollbar-track-color: #87B4C9;
scrollbar-arrow-color: #54A1C4;
scrollbar-3dlight-color: #B8D7E6;
scrollbar-shadow-color: #1E6180;
scrollbar-highlight-color: #7CBCDA;
scrollbar-darkshadow-color: #1E6180">This example displays the scrollbars
in an alternative color. The text is displayed in a specific font and the
face of the button
displays an image background.
</TEXTAREA>
<INPUT type="Submit" VALUE="Submit" STYLE="color: #FFFFFF; background:
url(yourimage.gif); font-family: Verdana, Helvetica; font-weight:
bold">
<INPUT type="Reset" VALUE="Reset" STYLE="color: #FFFFFF; background:
url(yourimage.gif); font-family: Verdana, Helvetica; font-weight:
bold">
</FORM> |
The following
example displays a form with a colored background, scrollbars and text. The
text is displayed in a specific font and the face of the button displays
an image background. You will need to replace the (yourimage.gif)
text within the "Submit" and "Reset" background values to the URL of your
image.
<FORM
METHOD=post ACTION="/cgi-bin/example.cgi">
<TEXTAREA wrap="virtual" name="comments" rows=6
cols=20 STYLE="background:#EAE8E8;
scrollbar-face-color: #317B9C;
scrollbar-track-color: #87B4C9;
scrollbar-arrow-color: #54A1C4;
scrollbar-3dlight-color: #B8D7E6;
scrollbar-shadow-color: #1E6180;
scrollbar-highlight-color: #7CBCDA;
scrollbar-darkshadow-color: #1E6180">This example displays a form with
a colored background, scrollbars and text. The text is displayed in a specific
font and the face
of the button displays an image background.
</TEXTAREA>
<INPUT type="Submit" VALUE="Submit" STYLE="color: #FFFFFF; background:
url(yourimage.gif); font-family: Verdana, Helvetica; font-weight:
bold">
<INPUT type="Reset" VALUE="Reset" STYLE="color: #FFFFFF; background:
url(yourimage.gif); font-family: Verdana, Helvetica; font-weight:
bold">
</FORM> |
Keep
in mind, if you change the colors of your scrollbars and buttons, make sure
your selected colors match your website's color scheme. In addition, always
make sure your text is clearly visible through your background colors.
Forms provide you with an excellent alternative to snail mail. Your visitor's
information can be instantly processed right over the Internet. This information
might include taking orders, collecting customer information, or even allowing
your visitors to provide you with feedback. The possibilities are
endless.
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 Two
More Articles
|
