Using CSS to style form fields

[cdn2005]

Can I get some help in styling form fields using CSS. I have the following in my code now and it is repeated for each form field. Can I make all that ONFOCUSOUT features and changing field color or field border color as CSS styles so that I can simply apply that class to my fields rather than retyping all those lines for each field.

<TR>
<TD WIDTH="12%">&nbsp;</TD>
<TD>Your Email Address <BR>

<SPAN CLASS="style1">(Required if you chose Email Option
above)</SPAN> <BR>
<INPUT
STYLE="border: 1px solid rgb(0, 102, 102); BACKGROUND-COLOR: #f5f5f5; color: rgb(0, 51, 102); font-size: 13px; width: 260px;font-family: Verdana,Arial,Helvetica,sans-serif"
ONFOCUSOUT="javascript:if(this.value=='')this.value='Your Email Address';return true"
onFocus="javascript:if(this.value=='Your Email Address')this.value='';return true"
VALUE="Your Email Address" NAME="5_MyEmail" TYPE="text" SIZE="40"></TD>
</TR>

[rlemon]

<style>
input {
border: 1px solid rgb(0, 102, 102);
BACKGROUND-COLOR: #f5f5f5;
color: rgb(0, 51, 102);
font-size: 13px;
width: 260px;
font-family: Verdana,Arial,Helvetica,sans-serif
}

input:hover {
border: 1px solid rgb(102, 102, 102);
BACKGROUND-COLOR: #f5f5f5;
color: rgb(0, 51, 102);
font-size: 13px;
width: 260px;
font-family: Verdana,Arial,Helvetica,sans-serif
}
</style>


something like that?

[cdn2005]

Thanks for the reply. More than the border color itself, I think the problem is how to execute javascript ONHOVER or ONMOUSEOUT etc as shown in my script. Essentially when the user clicks inside the field, the preloaded text such as "Enter your name..." disappears and it only reappears if the user moves to another leaving this field empty.

The message obviously changes for each field. So if I can place something in the CSS ONMOUSEOUT style to execute a javascript that would display or remove a string from the field, that would do the trick. I am not if that is even possible!!!

[cdn2005]

Can someone please take a shot at explaining how to execute repetitive javascript statements using a CSS declaration as in my example above.

I have a <form> textbox that displays a default message. When the user clicks inside the box, the message is removed. When the user moves out of the textbox, if the field is empty the same default message is redisplayed, otherwise the information entered by the user is retained. I use the following method currently to do that. But can I have it declared as a CSS so that I don't have to repeat it for each textbox.

<TEXTAREA STYLE="border: 1px solid rgb(0, 102, 102); BACKGROUND-COLOR: #f5f5f5; color: rgb(0, 51, 102); font-size: 13px; width: 260px;font-family: Verdana,Arial,Helvetica,sans-serif"
ONFOCUSOUT="javascript:if(this.value=='')this.value='Enter Names seperated by commas';return true"

onBlur="javascript:if(this.value=='')this.value='Enter Names seperated by commas';return true"

onFocus="javascript:if(this.value=='Enter Names seperated by commas')this.value=''; return true" NAME="5.Children" COLS=40 ROWS=4>Enter Names seperated by commas</TEXTAREA>

[Bill Posters]

On the issue of styling form control:
Here's some worthwhile reading…
http://www.456bereastreet.com/archive/200409/styling_form_controls/
http://www.456bereastreet.com/archive/200410/styling_even_more_form_controls/

I have a <form> textbox that displays a default message. When the user clicks inside the box, the message is removed. When the user moves out of the textbox, if the field is empty the same default message is redisplayed, otherwise the information entered by the user is retained. I use the following method currently to do that. But can I have it declared as a CSS so that I don't have to repeat it for each textbox.

<TEXTAREA STYLE="border: 1px solid rgb(0, 102, 102); BACKGROUND-COLOR: #f5f5f5; color: rgb(0, 51, 102); font-size: 13px; width: 260px;font-family: Verdana,Arial,Helvetica,sans-serif"
ONFOCUSOUT="javascript:if(this.value=='')this.value='Enter Names seperated by commas';return true"

onBlur="javascript:if(this.value=='')this.value='Enter Names seperated by commas';return true"

onFocus="javascript:if(this.value=='Enter Names seperated by commas')this.value=''; return true" NAME="5.Children" COLS=40 ROWS=4>Enter Names seperated by commas</TEXTAREA>
Can't (yet) be done (and probably never will be, as that would be considered a 'behaviourial' rather than a 'presentational' effect.

Javascript >> behaviour
CSS >> presentation

I'm a little rusty with js, but…
You could reduce it all to a function with a couple of variables - and simply call the function (with variables) on the two events - onfocus and onblur.
The function is reusable, though you still have to slip in the variables each time.

e.g.

function formFocus(id,dVal) {
if (document.getElementById(id).value == dVal) {
document.getElementById(id).value = '';
} else {
if (document.getElementById(id).value == '')
document.getElementById(id).value = dVal;
}
}


<input type="text" value="one" id="fe01" onfocus="formFocus(this.id,'one')" onblur="formFocus(this.id,'one')" /><br />
<input type="text" value="two" id="fe02" onfocus="formFocus(this.id,'two')" onblur="formFocus(this.id,'two')" />


(It's almost certainly possible to make the function even more self-contained and reusable (without the need to specify variables for each instance), though I can't think how it's done right now (rusty).
The above example should at least help reduce some of the typing. ;)

[cdn2005]

I kind'a suspected that this may not be possible using CSS. But couldn't get it clear in my head as you put it:

Javascript >> behaviour
CSS >> presentation

But i like the Javascript code that you provided. That is still better than typing all of it anyway. Besides it leaves a good impression about the page designer :)

Thanks.