HOME    articles    tutorials    tool directory    about

Free Email
META Tag Generator



Forms Part III: Form Tips & Tricks

HTML Forms: Learn how to spiff up your forms with these techniques.

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.cheapwebtricks.com/tutorial/forms_tutorial_part1.shtml

If you missed part two, you can find it here: http://www.cheapwebtricks.com/tutorial/forms_tutorial_part2.shtml

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

<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 tag as well. They must be the same.

next page


HOME    articles    tutorials    tool directory    about

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