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:
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
More Articles
|
