»

EnglishFrenchVietnamese

Print - Accessible Compact Forms - JavaScriptBank.com

Full version: jsB@nk » Form » Textarea » Accessible Compact Forms
URL: https://www.javascriptbank.com/accessible-compact-forms.html

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

Full version: jsB@nk » Form » Textarea » Accessible Compact Forms
URL: https://www.javascriptbank.com/accessible-compact-forms.html

<style type="text/css">/*     This script downloaded from www.JavaScriptBank.com     Come to view and download over 2000+ free javascript at www.JavaScriptBank.com*/.jsbank_sample_cont {margin: 20px; padding: 20px;}.jsbank_sample_tit {font-weight: bold; margin-bottom: 10px; padding: 5px; width: auto; background-color: #c0c0c0; border: 5px solid #a0a0a0; color: black; text-align: center;}/*Created by: Mike Brittain Web Site: http://www.mikebrittain.com/*/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;}</style>

<script language="javascript">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/addLoadEventfunction 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);});</script>

<form name="login" action="#" method="post" style="text-align: center; width: 50%;">  <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>