Prefilled text fields with default values + empty on click

Add Help Information

Sure, fields labeled "First Name" and "Last Name" don't need much of an introduction, but less obvious and more obscure fields might. Also, it wouldn't hurt to provide some direction in situations where formatting is an issue. For example, for a date field you might prompt the user with the desired date format:

<INPUT ...
onFocus="window.status='Enter date in MM/DD/YY format'"
onBlur="window.status=''">

The onFocus and onBlur attributes in your <INPUT> tag will display and remove, respectively, your helpful hints in the browser's status bar.

Another and probably more visible method of providing field-level help information is to "pre-fill" the value of the INPUT or TEXTAREA element:

<INPUT ... value="- Help info goes here -"
onClick="document.forms[0].first_name.value='';">
SITEPOINT BOOKS
"The CSS Anthology: 101 Essential Tips, Tricks & Hacks"
Photo of Rachel Andrew
by Rachel Andrew
"Cascading Style Sheets sound intimidating. In reality, however, CSS is one of the most convenient tools available to Web developers."
101 essential CSS-based solutions for Web design problems.
Download button Download the free sample now!

When the visitor clicks into the INPUT box, your default value disappears and the visitor is ready to type.

Source: http://www.sitepoint.com/article/steps-useable-forms
Originally Posted by Skylinux @ 2006-07-23 10:27:48

No Comments yet .....