The JavaScript Switcharoo

How to Swap Input Content with JavaScript

NOTE: As noted in the comments, there are some usability issues with this script. An updated version is available here.

I hate form labels.

There. I said it.

I'm opposed to the idea of forcing a little snippet of text to line up next to each form element so that we know what's going on with it. It's difficult, it takes up extra space, and it tends to make something like a newsletter input eat up too much screen real estate.

However, it would be rude of me to just assume that everyone knows what the hell I'm asking for when I slap a couple inputs in the top right of a site.

To get around this issue, I wrote a quick JavaScript function to make label-less forms a possibility without losing that easy-to-identify quality that labels provide.

View the Demo

Create the Inputs

Our first step is to create a quick HTML form.

<form action="processpage.php" method="post" id="form_test">

  <input type="text" value="Name" />

  <input type="text" value="Email" />

  <input type="submit" value="Join the Newsletter!" />

</form>

To avoid using labels, I've included a description of the input inside each input. However, in doing so, I've created an inconvenience for the user: they now have to delete the text in the input in order to enter information. This is a definite usability issue, and we need to correct it.

That's where our JavaScript comes in:

function formtext(input,initval) {

  if (input.value == initval) {

    input.value = "";

    input.style.color = "#000";

  }

}

This function requires two parameters: the input we're dealing with (input), and the label surrogate of said input (initval). It then checks to see if the value of the input matches the initial value, and if so, changes the value to blank and sets the color (which was previously a light grey) to black.

This allows us to avoid labels and still provide information about the form we're presenting without creating additional steps for our users to complete.

Worst-Case Scenarios

What if a user selects the field, then clicks away? Should the field remain blank?

We can avoid blank inputs by writing a second function to check for a blank form.

function formout(input,initval) {




  if ( input.value == '' || input.value == initval ) {

    input.style.color = "#AAA";

    input.value = initval;

  }

}

If our input is blank, or if somehow the initial value was entered into the field, we'll set the field to its initial value and change the color back to a light grey, thus avoiding a blank input.

Abstraction, Anyone?

In order to keep our code clean and easy to use, we're going to add an abstraction layer of JavaScript, rather than slapping it inline with our HTML. This is accomplished by placing the two functions above into a file called 'form.js' and inserting the following code along with it:

if( document.forms ) {

  inputs = document.forms[0].getElementsByTagName("input");



  nameInput = inputs[0];

  nameInput.onfocus = function() { formtext(this,"Name"); }

  nameInput.onblur = function() { formout(this,"Name"); }



  emailInput = inputs[1];




  emailInput.onfocus = function() { formtext(this,"Email"); }

  emailInput.onblur = function() { formout(this,"Email"); }

}

This code checks to make sure there is a form, then grabs the first form in your HTML and applies our two functions to the inputs to coincide with events. In this case, we'll run formtext() when a user focuses on our input, and formout() when they click or tab away from the input.

And that's really all there is to it! This is a great way to get away from the clutter of form labels without losing usability, and since we've used an abstraction layer, it will degrade gracefully for users that don't have JavaScript enabled.

View the Demo

Posted Dec 27, 2008 by Jason Lengstorf.
This entry is filed under tutorial, javascript, form, and usability.