Forms with Style

If you read scrollbars and forms you will know that newer browsers allow you to customise your scrollbars and forms. This article expands on the form customisation.

With javascript and stylesheets it is possible to change style values such as font color and background color. What you will learn is how to apply style to a form element - change the background color and font when form element has focus (ie it has been clicked on) - return the element to its original state when it loses focus(ie you have clicked on something else)

One of the advantages of doing this is that the field you are filling in is highlighted and stands out from the rest of the fields which is useful in long forms.

What we have to do now is write the javascript functions which will change the styles. As this will only work on newer browsers we will do a simple browser detect to exclude older browsers.


<script language="JavaScript" type="text/javascript">

<!--

dom = (document.getElementById) ? 1 : 0; 

function activatefield(what){

if (dom){

what.style.backgroundColor='red';

what.style.color='yellow';} 

}

function deactivatefield(what){

if (dom){

what.style.backgroundColor='';

what.style.color='';}

}

// --> 

</script>

For every form element you want to highlight place the following line in the < form element > tag :

eg.


<input type="text" onfocus="activatefield(this);" 
onblur="deactivatefield(this)">

Here is the form we used in scrollbars and forms complete with field highlighting (click on each field to view the effect).

Textarea :	This is a scrollbar and form style guide. This is a scrollbar and form style guide. This is a scrollbar and form style guide. This is a scrollbar and form style guide. This is a scrollbar and form style guide. This is a scrollbar and form style guide. This is a scrollbar and form style guide. This is a scrollbar and form style guide. This is a scrollbar and form style guide. This is a scrollbar and form style guide. This is a scrollbar and form style guide. This is a scrollbar and form style guide. This is a scrollbar and form style guide. This is a scrollbar and form style guide. This is a scrollbar and form style guide. This is a scrollbar and form style guide. This is a scrollbar and form style guide. This is a scrollbar and form style guide. This is a scrollbar and form style guide. This is a scrollbar and form style guide. This is a scrollbar and form style guide. This is a scrollbar and form style guide. This is a scrollbar and form style guide. This is a scrollbar and form style guide.
Select :
Text :
Submit :
Reset :

The form has a class applied callled form which looks like this


.form {

scrollbar-arrow-color:#ffffff;

scrollbar-base-color:#003399;

scrollbar-track-color:yellow;

background-color:#0099ff;font:normal 10pt verdana;color:white;

}

Info :

Tested and working on IE6 - IE5.5 - NS6 - Mozilla
Tested (producing no errors) NS4.05 - NS4.5 - IE 4 - Opera 6
Not yet tested on Mac.

[back to top of page]

[

] [

]

Search
	[ Web] [ WebDevTips]