Web
Business / Internet Marketing and Tools
/ Advertising / Ebooks / Success /Web
Site / Opt-In Lists / FAQ's
-----------------------------------------------------------------------------------------------------------------------------------------------------
***
Web Site Design***
HTML
Forms -- Back to the Basics and Beyond
Part Three - Form
Tips & Tricks
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:
<form name="customer">
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
|
