Format form input fields

formatting form input fields with javascript

[Tourex]

I have a form that applies a descriptive legend to blank form fields and changes them to blank when the user starts to make an entry in the field.

Is there any way that I can format (or preferably apply a CSS class) to this legend? My aim is for the form to show the legend in uncompleted fields in light grey, with entered fields showing in standard black.

The code I am using is:

<input type="text" name="FirstName" onfocus="if (this.value=='first name') this.value = ''" onblur="if (this.value=='') this.value = 'first name'" value="first name" />

Is this possible and, if so, how? Thanks in anticipation of any help.

[daveVk]

<input type="text" name="FirstName" onfocus="if (this.value=='first name') this.value = '';this.className='noPrompt';" onblur="if (this.value=='') this.value = 'first name';this.className='prompt';" value="first name" class="prompt"/>

[Tourex]

Thanks daveVk - works a treat!

[Fotiman]

Not quite. That will change the class back to prompt regardless of whether the value was '' or not. Easily fixed by adding the missing {}. :)

Try this instead:
<input type="text" name="FirstName" onfocus="if (this.value=='first name') {this.value = '';this.className='noPrompt'};" onblur="if (this.value=='') {this.value = 'first name';this.className='prompt';}" value="first name" class="prompt"/>