Form e moduli di registrazione e login con CSS usabili e accessibili. Come realizzarli (Parte II)

Pagina 2 di 2

AGGIUGERE UN CONTROLLO DI RIUSABILITA'

Naturalmente se viene selezionata una textbox, larelativa label deve scomparire, e dovrà farlo in mododefinitivo se nel campo di testo verrà inseritoqualcosa.

Per nascondere le label dobbiamo fare affidamento alJavaScript, e perchiò dobbiamo apportare una piccolamodifica al sopra riportato codice della classe"overlabel": le labels devono rimanere visibili seil JavaScript non è attivato. Ecco il codice che ciserve:

label.overlabel {
    color:#999;
  }
  label.overlabel-apply {
    position:absolute;
    top:3px;
    left:5px;
    z-index:1;
    color:#999;
  }

 

Dobbiamo però far sì che le labels risultinocomunque accessibili tramite click e per far ciò nondovremo settare l'attributo display a "none" ,ma piuttosto andarvi a scrivere un falso capoverso, per farsparire il testo.

Ecco come fare:

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;
}
// Change the applied class to hover the label
// over the form field.
labels[i].className = 'overlabel-apply';
// 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;
    }
  }
}
window.onload = function () {
  setTimeout(initOverLabels, 50);
};

 

Questo script  riguarderà tutte le labelsdella pagina che faranno riferimento alla classe"overlabel" e la nuova classe"overlab-apply" le comprende invece tutte. Inoltreper controllare i capoverso delle textbox sono stati usatigli eventi onfocus ed onblur.

Tale script funziona indipendentemente dai nomi e dalle idsassociate a ciascuna textbox, mentre riguarda tutte lelabels che appartengono alla classe "overlab".Quest' ultima è utile perchè, inqualità di classe, può essere attribuita adiversi blocchi di oggetti presenti nella pagina, facilitandola stesura del codice e la sua lettura.

Prestando attenzione al codice si noterà che èstato utilizzato l'evento onload, al quale è statoassociato un breve timeout; il motivo di quest' aggiuntaapparentemente superflua è il poter dare lapossibilità ai browser di salvare le credenziali diaccesso inserite nel caso l'utente dia il proprio"OK" all' esplicita richiesta fattagli dalbrowser. Allo stesso modo permette di inserirle qualoral'utente abbia già in archivio dei datirelativi a quella form di registrazione.

Da notare infine come nella parte finale del codice dellafunzione initOverLabels siastato  inserito del codice relativo ad unbrowser specifico. Stiamo parlando dell' evento onclick;generalmente infatti al click su una label il cursore sisposta direttamente sul relativo campo di testo, cosa cheperò non accade usando Safari, dove il click su unatextarea inibisce il campo di testo relativo. L'eventoonclick serve appunto per spostare, in caso di click, ilfocus dalla label alla textbox associata.

 

Articoli correlati sui CSS:

 

 

 

 

 



Ti potrebbe interessare anche

commenta la notizia