Accessible Compact Forms

Mike Brittain Dec 22, 2006

General

Tight on space? Use this script to create a compact form that is accessible and works even when JavaScript and CSS are turned off.

Notes

Created by: Mike Brittain
Web Site: http://www.mikebrittain.com/
Posted: December 22, 2006

A full explanation of the script can be found here.

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: accessibleForms.js

function initOverLabels () {
  if (!document.getElementById) return;      

  var labels, id, field;

  // Set focus and blur handlers to hide and show 
  // LABELs with 'overlabel' class names.
  labels = document.getElementsByTagName('label');
  for (var i = 0; i < labels.length; i++) {

    if (labels[i].className == 'overlabel') {

      // Skip labels that do not have a named association
      // with another field.
      id = labels[i].htmlFor || labels[i].getAttribute ('for');
      if (!id || !(field = document.getElementById(id))) {
        continue;
      } 

      // Hide any fields having an initial value.
      if (field.value !== '') {
        hideLabel(field.getAttribute('id'), true);
      }

      // Set handlers to show and hide labels.
      field.onfocus = function () {
        hideLabel(this.getAttribute('id'), true);
      };
      field.onblur = function () {
        if (this.value === '') {
          hideLabel(this.getAttribute('id'), false);
        }
      };

      // Handle clicks to LABEL elements (for Safari).
      labels[i].onclick = function () {
        var id, field;
        id = this.getAttribute('for');
        if (id && (field = document.getElementById(id))) {
          field.focus();
        }
      };

    }
  }
};

function hideLabel (field_id, hide) {
  var field_for;
  var labels = document.getElementsByTagName('label');
  for (var i = 0; i < labels.length; i++) {
    field_for = labels[i].htmlFor || labels[i]. getAttribute('for');
    if (field_for == field_id) {
      labels[i].style.textIndent = (hide) ? '-1000px' : '0px';
      return true;
    }
  }
}

// Created by: Simon Willison
// http://simon.incutio.com/archive/2004/05/26/addLoadEvent
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent(function() {
  setTimeout(initOverLabels, 50);
});

CSS

Paste this code into your external CSS file or in the <style> section within the HEAD section of your HTML document.

FORM#login {
  position: relative;
}

DIV#username, DIV#password {
  position: relative;
  float: left;
  margin-right: 3px;
}

INPUT#username-field, INPUT#password-field {
  width: 10em;
}

LABEL.overlabel {
  position: absolute;
  top: 3px;
  left: 5px;
  z-index: 1;
  color: #999;
}

Head

Paste this code into the HEAD section of your HTML document.


<script type="text/javascript" src="accessibleForms.js"></script>

Body

Paste this code into the BODY section of your HTML document


<form name="login" action="#" method="post">
  <div id="username">     
    <label for="username-field" class="overlabel"> Username</label>
    <input id="username-field" type="text" name="username" title="Username" value="" tabindex="1">
  </div>
  <div id="password">
    <label for="password-field" class="overlabel"> Password</label>
    <input id="password-field" type="password" name="password" title="Password" value="" tabindex="2">
  </div>
  <div id="submit">
    <input type="submit" name="submit" value="Login" tabindex="3">
  </div>
</form>

Leave a Response

(6 comments)

Due to the limitations of these comments, you will need to submit your question to the [a href="http://www.webdeveloper.com/forum/forumdisplay.php?f=3"]JavaScript Forum[/a] for further help.

Lee Dec 4, 2007

How can I put a customer rating type thing on this?

simon Nov 27, 2007

Hi! This is simply superb! This will also help a lot of folks who are fighting their life to creat multipage forms with the likes of PHP etc.! Amazing!![br /][br /]What is the browser compatibility of this? I saw it working stupendously in IE 6...is it cool with opera, firefox and netscape as well?

Bob Jun 10, 2007

I believe it has a title if you hover over it.[p]Very nice code!

M.P. Apr 21, 2007

Nice thinking;[br /]just to add up to this idea; would be great to add a layer popup message when the field is focus()ed so you allways have a label of what type of data is required

Jorge Papadopolo Jan 4, 2007

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details