DKS.CompactAccessibleForms: Pour des formes accessibles et compactes avec Mootools

var DKS = {};
DKS.CompactAccessibleForms = new Class({
  options: {
    targetLabelClassName: "compactTarget",
    visibleLabelClassName: "compactVisible",
    hiddenLabelClassName: "compactHidden",
    updateInputClass: false,        
    visibleInputClassName: null,
    hiddenInputClassName: null
  },
  initialize: function(els, options){
    this.setOptions(options);
    // Setting defaults for input visible/hidden CSS class names
    this.options.visibleInputClassName = this.options.visibleInputClassName || this.options.visibleLabelClassName;
    this.options.hiddenInputClassName =  this.options.hiddenInputClassName || this.options.hiddenLabelClassName;
    if ($type(els) == 'array') { 
      els.each(function(el){ this.attachEvents(el); }.bind(this));                        
    } else if ($type($(els)) == 'element') {                        
      this.attachEvents($(els));
    } else { return; };
  },//end initialize
  attachEvents: function(container){
    // Set focus and blur handlers to hide and show LABELs with options.targetClassName class names
    var labels = container.getElements('label.' + this.options.targetLabelClassName);
    labels.each(function(el){                                                                 
      // Skip labels that do not have a named association with another field.
      if (input = $(el.getProperty('for'))) {                                
        // Setting initialized class names
        el.switchClass(this.options.targetLabelClassName, this.options.hiddenLabelClassName);
        window.addEvent('domready', this.setInitializeElementsClass.pass([el, input], this));
        // Set handlers to show and hide labels.
        input.addEvents({
          focus: function(event){this.onFocusChanged(event, el);}.bind(this),
          blur: function(event){this.onFocusChanged(event, el);}.bind(this)
        });
        // Handle clicks to LABEL elements (for Safari).
        el.addEvent('click', function(){this.focus;}.bind(input));
      };
    }.bind(this));
  },//end attachEvents
  setInitializeElementsClass: function(label, input){
    // Adding class to input (optional, but both needs to be defined...)
    if (this.options.updateInputClass) {                                        
      input.addClass((input.value == '') ? this.options.visibleInputClassName: this.options.hiddenInputClassName);
    };
    // Switch hidden class to init class (visible/hidden) depending on the initial value
    label.switchClass(this.options.hiddenLabelClassName, (input.value == '') ? this.options.visibleLabelClassName: this.options.hiddenLabelClassName);                        
  },//end setInitializeElementsClass
  onFocusChanged: function(event, label){
    var event = new Event(event);
    this.toggleVisibility((event.type == 'focus' || event.target.value != ''), label, event.target);
  },//end onFocusChanged
  toggleVisibility: function(hide, label, input) {
    // Updating label class
    this.switchElementClass(label, hide, this.options.visibleLabelClassName, this.options.hiddenLabelClassName);
    // Updating input class
    if (this.options.updateInputClass) {
      this.switchElementClass(input, hide, this.options.visibleInputClassName, this.options.hiddenInputClassName);
    };
  },//end toggleVisibility
  switchElementClass: function(el, hide, visibleClassName, hiddenClassname){
    var addClassName = hide ? hiddenClassname: visibleClassName;
    var remClassName = hide ? visibleClassName: hiddenClassname;
    el.switchClass(remClassName, addClassName);
  }//end toggleClass
});
DKS.CompactAccessibleForms.implement(new Options);
Element.extend({
  switchClass: function(targetClassName, switchWithClassName){
    if(this.hasClass(targetClassName)) {this.removeClass(targetClassName);};
    if(!this.hasClass(switchWithClassName)) {this.addClass(switchWithClassName);};
  }
});

<form action="index.html" id="compactform">          
  <fieldset>
    <legend>Example 1: Login</legend>      
    <ol>
      <li><label class="compactTarget" for="username">Username</label> <input name="username" type="text" id="username" /></li>
      <li><label class="compactTarget" for="password">Password</label> <input name="password" type="password" id="password" /></li>
      <li><input type="button" value="Login" /></li>
    </ol>      
  </fieldset>    
</form>
<script type="text/javascript">
  new DKS.CompactAccessibleForms('compactform');                
</script>