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

Pagina 1 di 2

Le caratteristiche e le funzionalità di una form sonomolteplici, molte delle quali divengono sempre piùcomplesse via via che ne vengono diminuite ledimensioni. Con le form piccole bisogna dunque prestareattenzione a conferir loro un gradevole aspetto graficoe nello stesso tempo però a non renderle difficili dautilizzare. Vedremo come realizzare un form di registrazionecon i CSS.

Un piacevole effetto grafico associabile ad una formcontenente campi di testo è il far apparire nelletextbox il proprio nome, così da guidare l'utenteal completamento dei campi. Dar vita ad una form con questecaratteristiche, di primo impatto, può sembrare unacosa banalissima: basta inserire nell' attributo"Value" delle textbox il proprio nome ed usare unpo' di JavaScript per evitare che gli utenti inviino comedati quelli contenenti i nomi delle textbox...ma non ècosì semplice; i campi password infatti vengonostrutturati i modo tale da evitare che ciò cheè digitato al loro interno possa essere letto dapossibili occhi curiosi, e per far ciò tutte lelettere scritte vengono sostituite da asterischi (opallini). Quest' accorgimento di sicurezza fa sìche anche ciò che viene digitato nell'attributo"Value" si tramuti in asterischi, facendocosì crollare il semplice metodo sopra accennato.

In questo articolo dunque andremo a vedere come dar vita aduna form con la suddetta caratteristica e che risultifacilmente utilizzabile e che sia ben compatto.

INIZIAMO CON ACCORGIMENTI DI ACCESSIBILITA

 Per fornire all' utente forms semplici dacomprendere e da usare è convenzione associare aciascun campo di testo una label che lo identifichi. Nelnostro caso, quello che  ci vorrebbe sarebbe una labelall'interno della textbox. Ebbene, usando i fogli distile tutto questo è fattibile e per farlo serve ilcodice sotto riportato.

<form name="login" action="#" method="post">
  <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>

 

Come si può notare ogni elemento label e inputè posto all' interno di un blocco div, cosìda conferire alla form un look più ordinato.

A ogni label è stata associata la classe di nome"overlabel" e ci servirermo di del codiceJavaScript per identificare tutti gli elementi nella form chefanno uso della suddetta classe, così da poterviassociare i diversi controlli che andremo ad approfondire.L'usare classi invece degli ids ci aiuta a gestirepiù elementi senza aver bisogno di tener conto degli specifici ids degli elementidella form.

E' stato inoltre associato ad ogni elemento della form diregistrazione un titolo, inserito nel campo title, per imaniaci della perfezione.

Di seguito è riportato il codice dello stylenecessario per nascondere ciascuna label.

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;
}

 

Come potete notare non c'è nulla di sorprendentein questo codice; viene infatti definito per ognilabel l'attributo position come absolute, il che laporta fuori dalla form, dove non èpiù visibile. Finchè i divs sono settatisulla sinistra, i campi di testo si trovano uno affiancoall' altro, senza ulteriori spazi tra loro. Naturalmentel'esempio va ritoccato nel momento in cui si usi unparticolare font o particoari oggetti nella form diregistrazione, in quanto in questi casi sarebbe necessariorivedere le posizioni delle label. Nel codice sono statiinoltre incluse le grandezze personalizzabili -del genereems- così da permettere agli utenti di ridimensionarea proprio piacimento le caselle di testo.

Continua>>>

 



Ti potrebbe interessare anche

commenta la notizia