Forms -- Back to the Basics and Beyond -- Part Three -- Form Tips & Tricks
|
|
|
| 1.3/5.0 (3 votes total) |
|
|
|
Shelley Lowery December 22, 2004
|
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. |