Posted By

vagrantradio on 02/16/10


Tagged


Versions (?)

COMPACT ACCESSIBLE FORMS: A LIST APART EXAMPLE


 / Published in: JavaScript
 

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

Code from the working example posted by A List Apart with my own addition. Cursor changes to text cursor when hovering over label.

  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>

Report this snippet  

You need to login to post a comment.