Tom Mollerus' Weblog

It's not too difficult to put default values in your form's text fields, style them a little differently so that it's obvious they're just examples that should be overwritten, and make then disappear when the user clicks on the field to write their own text. You can even use the fields' labels as the default text field values, which saves space and can be semantically elegant.

But what if you want labels for your form-- say, if it's technical in nature (like my LDAP server example above) and needs some extra context, or so that people know what the fields are supposed to be even after they've entered their own values? Then you can't just grab the labels and put them into the fields. You want to 1) supply example values, 2) style them appropriately, 3) make them disappear when the user wants to type their own value, and 4) style what the user types in with a normal style.

Here's a script using the jQuery library that you can use to supply this form with the behaviors we just listed:

<style type="text/css">
.example { color: #666666; }
<style>

<form>
<label for="LDAPS_URI">The public IP address or DNS for your LDAP server:</label>
<input type="text" name="LDAPS_URI" id="LDAPS_URI" value="" />

<label for="LDAPS_ADDN">AD Account DN</label>
<input type="text" name="LDAPS_ADDN" id="LDAPS_ADDN" value="" />
</form>

<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script>
function fieldExample(fieldID, example) {
	var field = document.getElementById(fieldID);
	var exampleClass = 'example';

	// If the field is empty or has the example value in it
	if(field.value == "" || field.value == example) {
		// Style the field with our example class
		$(field).addClass(exampleClass);
		// Set the field's value to the example text
		field.value = example;
	}

	// When the field receives focus
	$(field).focus( function() {
			// Remove the example class
			$(this).removeClass(exampleClass);
			// If the field contains the example text, remove it
			if($(this).val() == example) $(this).val('');
		}
	);

	// When the field is no longer has the focus
	$(field).blur( function() {
			// If the field is empty
			if($(this).val() == '') {
				// Add the example text back in with the example class
				$(this).addClass(exampleClass);
				$(this).val(example);
			} else {
				// Else if the field is not empty, make sure it doesn't have the example class
				$(this).removeClass(exampleClass);
			}
		}
	);
	
	// When the field's form is submitted
	$(field).parents('form:first').submit( function() {
			// Loop through each of the form elements
			for(input = 0; input < this.elements.length; input++) {
				// If the element is of type input and has the example class
				if($(this.elements[input]).hasClass(exampleClass))
					// It must have example text, so clear the field before it's submitted
					$(this.elements[input]).val('');
			}
		}
	);
}
</script>

To populate the fields with examples, just call the fieldExample function after the form:

<script>
// Identifty each of the fields and example values you want
fieldExample('LDAPS_URI', 'ldap.mycompany.com, or 200.200.200.200');
fieldExample('LDAPS_ADDN', 'CN=user, OU=marketing, DN=mycompany, DN=com');
</script>

All of which would add up to behavior like this: