Home Login Registration Authors Contact Us About Us Subscribe
Want to receive new articles via e-mail? Click here!
: Home  :: Web Design  :: Design Tuturial
Forms - Part III - Tips & Tricks
by Webdevinfo - Webmaster
Views: 692
Votes: none
Rating: 0.00
Synopsis:
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.
Rate this article  Print this article  Email this article  View this article in PDF  Discuss this article
Page:  1 | 2 |  Next >  Last
The Article

Form Tips and Tricks

If you missed part one, you can find it here:
http://www.webdevinfo.com/articles.php?articleId=21

If you missed part two, you can find it here:
http://www.webdevinfo.com/articles.php?articleId=22

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.

Page:  1 | 2 |  Next >  Last
Rate this article  Print this article  Email this article  View this article in PDF  Discuss this article
Similar/related articles:
Advanced Search
Site Search:


FirstWebHosting
Top Ten Hosts as picked by our editors - with reviews and interviews.
The Host Planet
Web hosting reviews and ratings. Learn how to spot a great host.
Hosts2002
The first and greatest hosting directory with the consumer in mind.
Hostcue.com
Hosting directory for the masses with special offers Check us out!
WebDevForums
Web developers or all levels discuss the details of design and ecommerce.
Needscripts.com
Free scripts and applications for web developers.