How Not To Design a Web Form
Today I'm working on a new version of an existing form, where the original developer had added "hints" in to TextArea elements on the form.
<textarea name="details" onfocus="this.value='';"> Please put something about yourself in here </textarea>
Anybody spot the obvious and massive usability issue with this approach?
Here's an example of one in use:
What if you start writing in it, then move to the next textarea and then come back to this one to make a change. Yep - you lose everything you previously entered. DOH!
Not to mention that you need to validate the field not just for whether it's empty but also for whether it contains just the hint - suggesting the user didn't enter anything at all, even though there's text in there.
I'll be taking the hints out of the fields, but, if I were keeping them, there's a simple way to correct this bug:
<textarea name="details" onfocus="this.value=((this.value==this.defaultValue)?'':this.value)"> Please put something about yourself in here </textarea>
An example of fixed version in use:
Problem solved.
Skip to the 
You can subscribe to an individual
WebKit browsers (Apple Safari, Google Chrome, iPhone/iOS, RIM OS6 Mobile Browser, etc.) and Firefox 3.7+ support the Placeholder Element Attribute which does the same thing sans JavaScript.
<input type="text" name="email" title="Enter your email address here" placeholder="Enter your email address here" />
Browsers that don't support the Placeholder Element attribute will simply ignore it.
A simple case of "Progressive Enhancement" ;-)
Reply
I have wanted something like the placeholder element for years!
Too bad I have to use IE and can't use it. :(
Reply
Or you could use the HTML5 placeholder property like
<input type="email" name="address" placeholder="john@example.net">
Reply
Other than the usability bug, one should not put javascript logic in the direct markup. Instead, the onchange event of the textarea should be binded in a *seperate* js file. HTML for semantic markup, CSS for styling, JS for logic and behavior. Don't mix them.
Reply
Sorry, I meant the onfocus event, not onchange.
Reply
If you're using jQuery (and if not, why not?) then check out the Watermark plugin:
http://code.google.com/p/jquery-watermark/
This small plug-in allows you to program hints using JavaScript, e.g.:
$('#inputId').watermark('Required information');
It works on all browsers too.
Reply