Advanced Search

COMPACT ACCESSIBLE FORMS: A LIST APART EXAMPLE

/ Published in: JavaScript
Save to your folder(s)
Code from the working example posted by A List Apart with my own addition. Cursor changes to text cursor when hovering over label.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2. 	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3.  
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  5. <head>
  6. <title>Keeping Compact Forms Accessible: Example #3: Completed form with script and CSS.</title>
  7.  
  8. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  9.  
  10. <style type="text/css" media="all">
  11. body {
  12. 	font-size: 1em;
  13. 	font-family: arial,helvetica,sans-serif;
  14. }
  15.  
  16. h1 {
  17. 	font-size:1.3em;
  18. }
  19.  
  20. form#login {
  21. 	padding:6px;
  22. 	position:relative;
  23. 	border:1px solid grey;
  24. }
  25.  
  26. div#username,
  27. div#password {
  28. 	position:relative;
  29. 	float:left;
  30. 	margin-right:3px;
  31. }
  32.  
  33. input#username-field,
  34. input#password-field {
  35. 	width:10em;
  36. }
  37.  
  38. label.overlabel {
  39. 	color:#999;
  40. }
  41. label.overlabel-apply {
  42. 	position:absolute;
  43. 	top:3px;
  44. 	left:5px;
  45. 	z-index:1;
  46. 	color:#999;
  47.         cursor:text;
  48.  
  49. }
  50. </style>
  51.  
  52. <script type="text/javascript">
  53.  
  54. function initOverLabels () {
  55.   if (!document.getElementById) return;  	
  56.  
  57.   var labels, id, field;
  58.  
  59.   // Set focus and blur handlers to hide and show 
  60.   // LABELs with 'overlabel' class names.
  61.   labels = document.getElementsByTagName('label');
  62.   for (var i = 0; i < labels.length; i++) {
  63.  
  64.     if (labels[i].className == 'overlabel') {
  65.  
  66.       // Skip labels that do not have a named association
  67.       // with another field.
  68.       id = labels[i].htmlFor || labels[i].getAttribute('for');
  69.       if (!id || !(field = document.getElementById(id))) {
  70.         continue;
  71.       }
  72.  
  73.       // Change the applied class to hover the label 
  74.       // over the form field.
  75.       labels[i].className = 'overlabel-apply';
  76.  
  77.       // Hide any fields having an initial value.
  78.       if (field.value !== '') {
  79.         hideLabel(field.getAttribute('id'), true);
  80.       }
  81.  
  82.       // Set handlers to show and hide labels.
  83.       field.onfocus = function () {
  84.         hideLabel(this.getAttribute('id'), true);
  85.       };
  86.       field.onblur = function () {
  87.         if (this.value === '') {
  88.           hideLabel(this.getAttribute('id'), false);
  89.         }
  90.       };
  91.  
  92.       // Handle clicks to LABEL elements (for Safari).
  93.       labels[i].onclick = function () {
  94.         var id, field;
  95.         id = this.getAttribute('for');
  96.         if (id && (field = document.getElementById(id))) {
  97.           field.focus();
  98.         }
  99.       };
  100.  
  101.     }
  102.   }
  103. };
  104.  
  105. function hideLabel (field_id, hide) {
  106.   var field_for;
  107.   var labels = document.getElementsByTagName('label');
  108.   for (var i = 0; i < labels.length; i++) {
  109.     field_for = labels[i].htmlFor || labels[i].getAttribute('for');
  110.     if (field_for == field_id) {
  111.       labels[i].style.textIndent = (hide) ? '-1000px' : '0px';
  112.       return true;
  113.     }
  114.   }
  115. }
  116.  
  117. window.onload = function () {
  118.   setTimeout(initOverLabels, 50);
  119. };
  120.  
  121. </script>
  122.  
  123. </head>
  124. <body>
  125.  
  126. <h1>Keeping Compact Forms Accessible: Example #3: Completed form with script and CSS.</h1>
  127.  
  128.  <form id="login" action="#" method="post">
  129.  
  130.   <div id="username">
  131.    <label for="username-field" class="overlabel">Username</label>
  132.    <input id="username-field" type="text" name="username" title="Username" value="" tabindex="1" />
  133.   </div>
  134.  
  135.   <div id="password">
  136.    <label for="password-field" class="overlabel">Password</label>
  137.    <input id="password-field" type="password" name="password" title="Password" value="" tabindex="2" />
  138.   </div>
  139.  
  140.   <div id="submit">
  141.     <input type="submit" name="submit" value="Login" tabindex="3" />
  142.   </div>
  143.  
  144.  </form>
  145.  
  146. </body>
  147. </html>

URL: http://www.alistapart.com/articles/makingcompactformsmoreaccessible

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.