Sample text as form labels

Posted on February 7, 2009

Many of the sites I work on are designed with forms that look like this:

HTML:

<form action="#">
  <p>
    <input type="text" value="First Name" name="fn">
    <input type="text" value="Last Name" name="ln">
  </p>
  <button type="submit">Join</button>
</form>

Usually I’ll add label elements and hide them off screen with CSS. That means the label’s content is repeated twice for each element, though — once in the label and once in the element itself. I figured there must be a better was to do it.

We’ll start with the same form, with labels but not with the default values:

HTML:

<form action="#">
  <p class="field_container">
    <label for="fn">First Name</label>
    <input type="text" id="fn" name="fn">
  </p>
  <p class="field_container">
    <label for="ln">Last Name</label>
    <input type="text" id="ln" name="ln">
  </p>
  <button type="submit">Join</button>
</form>

The trick now is to use CSS to position the form fields on top of the labels, and then to make the fields transparent so the labels show through. Here’s the same form with the new CSS:

The CSS:

.field_container {position: relative; height: 1.5em; width: 10em; margin: 10px; float: left;}
label,
input {position: absolute; top: 0; left: 0; height: 100%; width: 100%;}
label {color: #999; line-height: 1.5; padding-left: 5px;}
input {background-color: transparent;}

That looks great, except that if you start typing in one of the fields the label stays visible and you can’t read anything. One solution is to add a :focus rule to the CSS for the form fields that makes them opaque, resulting in something like this:

That works, except that

  1. when the focus leaves the input element, it becomes transparent again and the label shows through, and
  2. :focus doesn’t work in Internet Explorer version 7 or older.

To make the background permanently opaque, we need to scrap the :focus rule and use Javascript instead:

var inputs = document.getElementsByTagName('input');

for (var i=0; i<inputs.length; i++) {
  inputs[i].onfocus = function(){
    this.className = 'opaque';
  };
}

I added a CSS rule that makes the background of fields with the class “opaque” . . . well . . . opaque. Here is the resulting form:

Finally, to account for users who have CSS turned on but Javascript disabled, we should use Javascript to do the label positioning when the page loads. We can do that by adding a class to the CSS rules, and then adding that class to the form with Javascript.

The final CSS:

form .field_container {margin: 10px; float: left;}
form.nice_labels .field_container {position: relative; height: 1.5em; width: 10em;}
form.nice_labels label,
form.nice_labels input {position: absolute; top: 0; left: 0; height: 100%; width: 100%;}
form.nice_labels label {color: #999; line-height: 1.5; padding-left: 5px;}
form input {width: 10em;}
form.nice_labels input {background-color: transparent;}
form.nice_labels input.opaque {background-color: #FFF;}

The final Javascript:

window.onload = function(){
  var forms = document.getElementsByTagName("form");

  for (var i=0; i<forms.length; i++){
    forms[i].className = "nice_labels";
  }

  var inputs = document.getElementsByTagName('input');

  for (var i=0; i<inputs.length; i++) {
    inputs[i].onfocus = function(){
      this.className = 'opaque';
    };
  }
};

And the final form:

Comments

There are no comments yet.

Submit a comment