javasCript fAqs

SpecialFx

You won't believe all of the things you can do to enhance your forms using Cascading Style Sheets. The only problem is these particular enhancements will only work with certain versions of Internet Explorer, Netscape and Opera browsers. Below I will show you how to change the fonts, font size, font color, background color, underline text, strike-through text, bold text etc. in almost all parts of your forms. This tutorial is to get you started. I won't be showing you how to do everything since that would take the rest of our lives and a lot more than one page.

Most people will tell you that you can only change the background color of forms by changing your system's colors on your desktop. They are just plain wrong! All you have to do is to learn a little about Cascading Style Sheets. Don't worry, it's a breeze.

Oh yes, one more thing. The ";" semi-colons in the source code below absolutely must be there or the style sheet elements will not display. They are used as element terminators.

Below is a form input field. The size of this field depends on the font-family, font-size, bold text and the "size=?". I have changed the background color to black, the text color to gold, added helvetica font face, made the text bold and italic, changed the font size to 14 point and underlined the text. Opera, Internet Explorer 4.0 or newer and Netscape 6.0 or newer will allow you to view all these things and more. Netscape 4.x and 5.x allow you to see all these things except the background color and the text color. One thing to remember is that when you make text bold like this "font-weight:bold;" Netscape can't view it that way. To get around this use one of these numbers "100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900" and it will work fine.

Type a few words in the text input window below to see what I mean.

Can you see the 3D border around the text input above. I just hate those and there is an easy way to make them disappear. You simply add a border of your own and theirs can't be seen anymore. A lot of pro sites do this to spruce up their pages. If I had colored the border the same color as the page background color it would disappear altogether. Below is the same example with the border added;

Below is a form button. The size of this button depends on the word(s) that are displayed on the button, font-family and font-size. I have changed the background color to black, the text color to gold, added helvetica font face, made the text bold and italic, changed the font size to 14 point and underlined the text. Opera, Internet Explorer 4.0 or newer and Netscape 6.0 or newer will allow you to view all these things and more. Netscape 4.x and 5.x allow you to see all these things except the background color and the text color. One thing to remember is that when you make text bold like this "font-weight:bold;" Netscape can't view it that way. To get around this use these numbers "100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900" and it will work fine.

Can you see the 3D effect of the button above. I just hate those and there is an easy way to make them flatten out. You simply add a border of your own and theirs can't be seen anymore. A lot of pro sites do this to spruce up their pages. If I had colored the border the same color as the page background color it would disappear altogether. Below is the same example with the border added;

Below is a form textarea box. The size of this box depends on the font-family, font-size, bolded text and the "ROWS=?" and "COLS=?". I have changed the background color to black, the text color to gold, added helvetica font face, made the text bold and italic, changed the font size to 14 point and underlined the text. Opera, Internet Explorer 4.0 or newer and Netscape 6.0 or newer will allow you to view all these things and more. Netscape 4.x and 5.x do not allow you to view this in the textarea. One thing to remember is that when you make text bold like this "font-weight:bold;" Netscape can't view it that way. To get around this use these numbers "100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900" and it will work fine.

The words you type in to this textarea box don't have to be underlined, I just added that effect so you would know that it could be done if you wanted to.

Here is the same thing again using the "Windings" font. You will most likely never use a fantasy font in a form like this. But, now you know it can be done.

Can you see the 3D border around the textarea above. I just hate those and there is an easy way to make them disappear. You simply add a border of your own and theirs can't be seen anymore. A lot of pro sites do this to spruce up their pages. If I had colored the border the same color as the page background color it would disappear altogether. Below is the same example with the border added;

Below is a form popup list and you simply won't believe what you can do with them. You can change the font face, background color, text color, italicize the text, underline it, strike through it, and a lot of other stuff. Althoungh you can't add a background image or color the scrollbar. Maybe in later versions of Internet Explorer or Opera browsers. Netscape 4.6 can't do anything to these except use them. Probably later versions though like versions 6 or 7 maybe. I wouldn't be caught dead with Netscape on my hard drive so I haven't tried them. I'm only going to show you a few examples because it would take more space than I have and longer than I have left to live to show them all.

All you can do to the option tag below is to change the background and text colors. However, you can do anything you want to the select tag that you want except add a background image or change the scrollbar color.

<form>
<select>
<option style="background:black; color:gold;">Option #1</option>
<option style="background:gold; color:black;">Option #2</option>
<option style="background:blue; color:lime;">Option #3</option>
<option style="background:lime; color:black;">Option #4</option>
<option style="background:white; color:black;">Option #5</option>
<option style="background:red; color:yellow;">Option #6</option>
</select>
</form>

Here is another way to add background and foreground colors to your popup lists. This is good if you plan on changing the colors at a later date and don't want to change each individual option one at a time. The red colored text below is what makes this happen. All ";" semi-colons below absolutely must be there or this example won't function properly. They are being used as element terminators.

<html>
<head>
<title>Title Of Page Goes Here!</title>
<style type="text/css">

</style>
</head>
<body>

<option class="oc1">Option #1</option>
<option class="oc2">Option #2</option>
<option class="oc2">Option #3</option>
<option class="oc2">Option #4</option>
<option class="oc1">Option #5</option>

</body>
</html>

Above you see "class="oc"". OC in this case means "option colors". This is simply a label and I could have used anything I wanted. But, I chose this because it was descriptive of what I was attempting. You can use whatever makes you happy. However, you must use something or it simply won't function properly.

Let's say that you want all of your options to have the same background and text colors. Below is an example that will show you an easier way to accomplish this.

<html>
<head>
<title>Title Of Page Goes Here!</title>
<style type="text/css">

</style>
</head>
<body>

<option>Option #1</option>
<option>Option #2</option>
<option>Option #3</option>
<option>Option #4</option>
<option>Option #5</option>

</body>
</html>

Here is the same thing again but the changes were made to the select tag not the option tag.

<form>
<select style="background:black; color:white; font-family:arial,verdana; font-size:10pt; font-weight:900; font-style:italic; text-decoration:underline;">
<option>Option #1</option>
<option>Option #2</option>
<option>Option #3</option>
<option>Option #4</option>
<option>Option #5</option>
<option>Option #6</option>
</select>
</form>

Now comes the tricky part. Radio buttons and checkboxes have no background of their own and you cannot change their background color in a conventional way. However, I accidentally discovered, that when you are using Netscape (any version) or Internet Explorer 5.0 or newer, certain colors used in the BODY tag's BGCOLOR="?" attribute will bleed through these holes. This is the only hope you have of doing this. Simply add a background image in the BODY tag and use a BGCOLOR="?" to show through the holes. Sounds easy huh?. Dead wrong! There are 16.7 million colors and most of these won't work.

Below is another dropdown menu. Nomally when you click on one it stays open until you click on an option. This one will close immediately after opening because I added onclick="javascript:self.focus()" to the <select> tag. It will drive your visitors insane trying to keep it open. :)

<form>
<select style="background:black; color:white; font-family:arial,verdana; font-size:10pt; font-weight:900; font-style:italic; text-decoration:underline;" onclick="javascript:self.focus()">
<option>Option #1</option>
<option>Option #2</option>
<option>Option #3</option>
<option>Option #4</option>
<option>Option #5</option>
<option>Option #6</option>
</select>
</form>

THIS IS WAY COOL!

I bet you never thought you would see the day that you could change the font face and color and the background color of a form from within your pages. Guess what? Now I am going to show you how you can also add a background image (animated images can be used as well) and change the scrollbar color (Opera and Internet Explorer Only) of the <textarea> tag. Let me see you top that one! Netscape 4.x and 5.x users don't even think about using background images let alone background colors or text colors. Netscape 6.x users can but the images won't be animated. Always something to foul up your day huh?

The following examples only work with Internet Explorer 5.0 or newer, Opera or Netscape 6.x. Netscape 4.6 (and maybe other versions) definitely has a problem when you add a background image to the examples below. It simply makes a mess out of any textarea tag that includes an image.

You can add a background image to the <input> and <textarea> tags but not the <select> or <option> tags. This means you may add them to the forms text windows and buttons only. Other browsers will simply ignore the added source code and move on to the next line. You cannot add a background image to an <INPUT> tag if you are using it as a radio button or checkbox. Below you will see "background-attachent:fixed;". This tells the image to stand still so the text can scroll over it. Cool huh?

Below is a textarea box you can type in. That is if you aren't using Netscape 4.6. This version of Netscape refuses to show the background image and eliminates the entire textarea box to get out of it. Stubborn sucker huh? :) Maybe it's time to upgrade to Opera or Internet Explorer? Your choice!

TIP: When you add a background image to a form <textarea> tag Netscape 4.7 won't display the image or the textarea. Therefore, it would be a good idea not to add this if you want Netscape 4.7 users to view your pages. If you do decide to use it anyway it would be a good idea not use it to display vital information.

After looking at the source code above I bet you are thinking that Cascading Style Sheets adds a lot of source code to your pages and makes them take longer to download? Well, not if you write your code right it doesn't. There a many times I have cut the size of my pages by 50% by using style sheets. Let's say you have 100 table cells on one page and each one contains a font tag. That's a lot of font tags. By setting the font for all <td> at once you can eliminate all those font tags. Below is an example of this.

MORE COOL TRICKS

Below is an example of how to add a short message to your forms. The only problem with it is that it must be deleted by the user before they can enter their own text. The part that does this is value="Enter Email".

<form><input type="text" name="member" size="10" maxlength="100" value="Enter Email"></form>

The problem with having a message appear in the text box is that you must highlight the message and delete it before you can type anything else in there.

There is an easy way around this problem which involves using a little javascript. Don't worry this is really easy. Onfocus and onblur is what does the trick. Simply click on the words below to see them disappear. Then click outside the text box and watch them reappear.

<form><input type="text" name="member" size="10" maxlength="100" onfocus="if (value == 'Enter Email') {value =''}" onblur="if (value == '') {value = 'Enter Email'}" value="Enter Email"></form>

Have you ever went to a search engine and saw the cursor was already blinking in the text box without you having to click on it? That's because the webmaster added a script to give the form focus. Examine the source code below and you'll see how easy it is to add focus to a form. A good example of this is the login form at Yahoo! Geocities main page.

Names like "the_form" and "u_input" are just labels. You can use any name here that you choose. However, it's best to use something that reflects what you are doing to make it easier to understand when you look at your code a year or two later. You must make certain the names in the script are exactly the same as the form and remember they are case sensitive. The name "the_form" in the script can't be like this "THE_FORM" in the form and vise versa or it will not work correctly.

<<< Back

Home Page This Page Was Last Updated: