Label Within The Form Field Handling

Today I'll show you how to implement something that appears easy at first glance but can be a bit tricky. It is the "label within the form field" functionality seen in forms that must take up very little space on a web page.

For example, instead of a "Your email address:" label to the left of the form field where the email address should be typed, the form field itself contains the label.

When the form field is clicked or tabbed into, the words in the form field disappear and the user can proceed to type the required information.

The tricky part is to make the JavaScript behave in a manner the user expects.

The straight-forward method of clearing the form field whenever it's clicked or tabbed into works okay most of the time. But if the user mis-types and then clicks back into the field to correct the error, the entire entry is cleared out again. That's unexpected, and not very professional.

The JavaScript must clear out the form field when it's clicked on or tabbed into only when the form field contains exactly what it contained when the web page was first loaded, and not if the form field was changed in any way.

If the user experiences an error and has to click back to the form, the label text should not overwrite information already in the form field. That, too, would be unexpected and unprofessional.

This is the way to do it, first the form and then the JavaScript:

<form 
   name="MyForm" 
   method="POST" 
   action="/cgi-bin/script.cgi">
<input 
   type="text" 
   name="email" 
   onfocus="ClearIfAppropriate();">
<input 
   type="submit">
</form>

<script type="text/javascript" language="JavaScript"><!--
var LabelText = "Type your email here";

if(document.MyForm.Email.value.length == 0) {
	document.MyForm.Email.value = LabelText;
	}

function ClearIfAppropriate() {
if(document.MyForm.Email.value == LabelText) {
	document.MyForm.Email.value = "";
	}
}
//--></script>

The text the JavaScript will insert into the form field can be changed. See the second line of the JavaScript, the line beginning with "var LabelText ="

The "MyForm" between the dots must be changed at every occurrence in the JavaScript if the name you give your form is something other than "MyForm".

Similarly, the "Email" between the dots must be changed at every occurrence in the JavaScript if the name you give the form field is something other than "Email".

Putting the JavaScript below the form ensures the browser has seen the form before the JavaScript tries to insert the label text into the form field.

Before the JavaScript inserts the text, it checks to verify the field is empty. This is in case the user experiences an error message and has to click back to the form. If the form already contains information, the JavaScript does not overwrite it.

When the user clicks the form field or tabs into it, the JavaScript checks to see whether or not it should be cleared.

Because the label text is specified within the JavaScript itself, it knows what to look for when comparing what's in the form field now with what it contained when the page first loaded. Only if the two are identical will the form field be cleared when the user clicks or tabs into it.

Now you know how to implement "label within the form field" functionality that works like user's expect it to.

Will Bontrager