HOME    articles    tutorials    tool directory    about

Free Email
META Tag Generator



Forms Part III: Form Tips & Tricks
continued

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.

About the Author:

Shelley Lowery is the author of the highly acclaimed ebook series, Web Design Mastery -- An eight volume (500+ pages) in-depth guide to professional web design. Web Design Mastery is being hailed as the "Bible" for professional web design. www.webdesignmastery.com

previous page


HOME    articles    tutorials    tool directory    about

(c) copyright 2000-2010 Anventure.  All Rights Reserved.
privacy policy