|
|
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.
What Can HTML Forms Do For You?
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 acclaimed beginner web design series, Web Design Mastery -- an in-depth guide to professional web design that is rapidly becoming known as the "Bible" for professional web design.
Beginner Web Design Class Website Design Inspiration Best Web Design Companies Ecommerce Web Design HTML Symbols Small Business Web Design Internet Web Design | About Us | Contact | Privacy Policy | Resources | FAQ | Site Map | Disclaimer | © Copyright WebMasterCourse.com - All Rights Reserved. - How to create web site HTML forms |
|
