<<
BACK
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 2002.
About the Author:
Shelley Lowery is the author
of the highly acclaimed ebook series, Web Design Mastery -- an in-depth
guide to professional web design that is rapidly becoming known as
the "Bible" for professional web design. http://www.webdesignmastery.com