WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Do you need to have a label on a form field when it has a default value?

for

From: Jared Smith
Date: Sep 17, 2010 3:00PM

On Fri, Sep 17, 2010 at 2:26 PM, Jukka K. Korpela wrote:

>> In the event that the place-holder text is to be used, then it must
>> disappear when focus is achieved in that form control element that is
>> not device dependant.
>
> I wonder how that would be accomplished. If you clear (reset to empty
> string) a field when focused on, then you will also destroy actual user
> input when the user enters some data, proceeds to another field, and then
> returns to a previous field for whatever reason.

It can be managed via scripting, though it is often done quite poorly.

1. Write the default value on page load using JavaScript. Do not
initiate a default value using the input's value attribute otherwise
you'll end up with the issues identified in this thread if the user
has JavaScript disabled.
2. When focus is set to the input, remove the default text (set it's
value to "") so long as it has not been modified. If the user has
entered anything into the field or if the browser, add-on, etc. has
entered any content, never clear or modify it.

I think it's also useful to redisplay the default text if the user
leaves the input (onblur) and the field is empty (the user has not
entered anything). It's also a good idea to have a validation
mechanism that ensures that the default text is not assumed to be
user-entered (for example, you can be pretty assured that the user's
name is not "Enter your name").

You can see an example of this in action at http://wave.webaim.org/
You'll also note that we change the styling of the input text slightly
to better differentiate default text from user-entered text.

Jared Smith
WebAIM