Forms ~ High Light Active Input in your forms ~ Tested in IE6.0, Netscape8.1, Opera9.0, Firefox1.5.0.4 and AOL Explorer1.2

H ighlight text inputs in your forms. Make it easy for your visitors to see where they are. This only works with <textarea> </textarea> defined input, not email, name etc.

We have tested the code in IE6.0, Firefox1.5.0.4, Opera9.0, Netscape8.1 and AOL Explorer1.2. This script worked well in all platforms with no variations observed.

For your Information: Before we begin, we feel obligated to advise you that the above form is for all intensive purposes a "Stand Alone" script. In other words, it really does not do much of anything other than what you see. In order to make it function as designed, you need to incorporate it into a valid working form. If you do not have a good Solid Knowledge of HTML coding, javascripts, forms and reconfigurations, please "Do Not Attempt" this until you are Proficient in the aforementioned areas.

D epending on your knowledge of HTML and javascripts, this is an easy five (5) part copy and paste code that goes in both the <HEAD> (2 parts) and <BODY> (2 parts) sections of your document. It also makes use of an external .js script you need to save and upload into your directory then add a snipplet of code into the <HEAD> section to call the external.js file.

Step One Is to add a section of code into the defined CSS (<HEAD>) section of your document. If you do not have a defined CSS section in your document this is not a problem. You just need to finish that part of the code by adding an opening and closing style tag to the code itself or all you will see on the page is some unorganized coding that does not belong on the page and wonder why. See below on where and howto.

Place CSS Section Of Code Here

</style>

CSS Code Without Opening & Closing Tags
Below is what you would see at the top of your page!

fieldset { width: 350px; } .textInput,textarea { width: 200px; font-family: arial; background-color: #FFFFFF; border: 1px solid #000; } .inputHighlighted { width: 200px; background-color: #FFCE31; color: #000; border: 1px solid #000; }

Reconfigurations To CSS Section

These reconfigurations control the size of the textarea form box and the color that appears before and after you select the input box.

This controls how wide (long) in pixels the border around the entire effect is.

This section controls how wide (long) the form box(s) are, the font face and what color the input box is prior to selecting it. Default (FFFFFF) is the code for white. It also makes use of 3 digit HEX codes that can be replaced with 6 digit codes if you prefer. 000 is the 3 digit Hex for black. The 1px is the width of the border around the input box itself. The "solid #000;" is the border color before the box is selected

This section controls how wide (long) the text area is after being selected and what color the input box is after selecting it. Default (FFCE31) is the code for a shade or orange. It also makes use of 3 digit HEX codes that can be replaced with 6 digit codes if you prefer. 000 is the 3 digit Hex for black. The 1px is the width of the border around the input box itself. The "solid #000;" is the border color after the box is selected.

Note Of Importance: If you are not sure of howto make the external .js file and make use of it within your document, grab the below link and it is fully explained.
[ .js File Howto ]

For your Information: If you are not comfortable or prefer not to use the external.js file, you can use the traditional cut/copy and paste instead of the external .js file. If you need a little refresher on what is required to achieve this, grab the below link and it is fully explained.
[ Traditional Cut/Copy and Paste ]

Step Two Depending on which of the above methods you have selected (external.js file or Traditional Copy/Cut & Paste), you will add either the snipplet of code into the <HEAD> section or the completed section of code that you added the opening and closing script tags.

Snipplet Of Code
<script type="text/javascript" src="highlight-active-input.js">
</script> Traditional Copy/Cut and Paste
<SCRIPT LANGUAGE="JavaScript">

<HEAD> Section of code goes here

// End -->
</script>

External .js file

Traditional Copy/Cut & Paste Code with opening & closing tags that you had to add into the <HEAD> section of code that was originally earmarked to be an external .js file.

Step Three Once you have completed the above step of either the external.js file or the Traditional Copy/Cut & Paste, now you need to add the next section of code into the <BODY> section of a valid working form.

I f you would like to see an example of this effect using the "Traditional Cut/Copy & Paste" method, grab the below link and you are there. Examine our "Source" code (on the page you will be opening) to see how we had to reconfigure it to make it work. We have it very well documented for your convenience.
[ Traditional Cut/Copy & Paste Method ]

Step Four Is to add another section of code into the <BODY> section of the document. This section goes just before the closing </BODY> tag.

On the site you will get the code, there is an error in coding you need to rectify before you paste the snipplet of code into the </HEAD> section to call the highlight-active-input.js file. See below on where and howto:

Incorrect Coding

Correct Coding

For your Information: All we did in the above incorrect code to rectify the error was to remove one of the two .js text.

W e hope our tutorial was easy to follow and we covered everything in detail. If you would like to add this effect into your pages, grab the respective below link and you are there. If you have any problems with this or anything else, feel free to consult our [ FAQ ] and if you can't find the answer there, [ contact us ].
[ Get Code Here ] [ Rate This Page ]

Name:
E-mail:
Comments: