So, maybe you’ve seen this one too many times:

<input type="text" id="username" name="username" value="Enter username"
       onfocus="if (this.value == 'Enter username') this.value = '';"
       onblur="if (this.value == '') this.value = 'Enter username';" />

A lot of code duplication there.

What if you could do it with labels and without writing a single line of Javascript? Like this:

<label for="username" class="default-value">Enter username</label>
<input type="text" id="username" name="username">

I wanted to do a default value replacement that was easy and intuitive to use and at the same time being semantically correct. As an example, a non-semantic way could be to add a “default-value” attribute to the input.

I would also like it to show the default values as labels if the browser has either CSS or Javascript disabled.

As shown above, we can do this by adding a label for each input, giving the labels a class called “default-value”. The concept is then to use Prototype to iterate through the labels and use their values as default for the associated inputs.

When the input is in “default mode” it should have a class called “default” so we can use this to gray out the text like this:

.default {
	color: #999;
}

We go through each label like this:

$$("label.default-value").each(function(label) {
  // code goes here
});

For each label we set up some variables:

/* Change this to your default class name */
var defaultClass = "default";

/* Get the default value */
var defaultValue = label.innerHTML;

/* Get the associated input */
var input = $(label.htmlFor);

/* Get the form */
var form = input.form;

/* Store information about the input being a password so we can use this later */
var isPassword = (input.type && input.type == "password");

Then add a focus observer:

/* When input gets focus, set value to "" if value is default value */
input.observe("focus", function(event) {
	if (input.value == defaultValue) {
		input.value = "";
		input.removeClassName(defaultClass);
		if (isPassword) input.type = "password";
	}
});

A blur observer:

/* When input loses focus, set value to default value if value = "" */
input.observe("blur", function(event) {
	if (input.value == "") {
		input.value = defaultValue;
		input.addClassName(defaultClass);
		if (isPassword) input.type = "text";
	}
});

Observe when the form is submitted:

/* Set default values to "" when form is submitted */
if (form) {
	form.observe("submit", function(event) {
		if (input.value == defaultValue) {
			input.value = "";
		}
	});
}

Set the default values:

/* Set default value when page loads */
if (input.value == "" || input.value == defaultValue) {
	input.value = defaultValue;
	input.addClassName(defaultClass);
	if (isPassword) input.type = "text";
}

And finally hide the label:

/* Hide the label using javascript so css-but-no-javascript browsers will see the label */
label.hide();

That’s it.

Now you can set up your form like this:

<script src="prototype.js" type="text/javascript"></script>
<script src="default-values.js" type="text/javascript"></script>
...
<style type="text/css">
	.default {
		color: #999;
	}
</style>
...
<form>
	<label for="username" class="default-value">Enter username</label>
	<input type="text" id="username" name="username">
</form>

… and have your values replaced automatigally

Demo: See a demo
Download: default-values.js, prototype.js

Follow me on Twitter