The JavaScript Source: Forms : Accessible Compact Forms

Internet.commerce

Internet.com

IT
Developer
Internet News
Small Business
Personal Technology
International

Search internet.com
Advertise
Corporate Info
Newsletters
Tech Jobs
E-mail Offers

Great Sites

DocJavaScript.com
dhtml.com
The Freebie Directory
TheFreeSite.com

Browse Doc JS's Tips!

Promotions

Free Announcements

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>

User Comments

Add a comment, suggestion, or correction

Comments feed

Do you write JavaScripts?
If you do, why not submit them to us?
We'll give you credit and a link back to your Web site.

Navigation Menu

Internet.commerce

Internet.com

Developer Channel

Great Sites

Promotions

General

Notes

Source Code

External file

CSS

Head

Body

User Comments

5. From: simon
Help
11/27/2007 16:07:28

6. From: Lee (Admin)
12/04/2007 11:03:42

4. From: Bob
This is fantastic
06/11/2007 01:58:07

3. From: M.P.
04/21/2007 16:04:34

2. From: Jorge Papadopolo
01/04/2007 10:17:16

1. From: josh
12/22/2006 11:05:54

Whitepapers and eBooks

Webcasts

Downloads and eKits

Tutorials and Demos

Navigation Menu

Internet.commerce

Internet.com

Developer Channel

Great Sites

Promotions

General

Notes

Source Code

External file

CSS

Head

Body

User Comments

5. From: simonHelp11/27/2007 16:07:28

6. From: Lee (Admin)12/04/2007 11:03:42

4. From: BobThis is fantastic06/11/2007 01:58:07

3. From: M.P.04/21/2007 16:04:34

2. From: Jorge Papadopolo01/04/2007 10:17:16

1. From: josh12/22/2006 11:05:54

Whitepapers and eBooks

Webcasts

Downloads and eKits

Tutorials and Demos

5. From: simon
Help
11/27/2007 16:07:28

6. From: Lee (Admin)
12/04/2007 11:03:42

4. From: Bob
This is fantastic
06/11/2007 01:58:07

3. From: M.P.
04/21/2007 16:04:34

2. From: Jorge Papadopolo
01/04/2007 10:17:16

1. From: josh
12/22/2006 11:05:54