Questa è la traduzione dell'articolo 10 Tips To A Better Form di Chris Campbell, pubblicato originariamente su Particletree. La traduzione viene qui presentata con il consenso dell'editore e dell'autore.
Nell’universo conosciuto, i form sono l’entità più noiosa e sono pure gli ingredienti principali della dieta di ogni programmatore web. Che ci piacciano o meno, i form all’interno di un sito sono cruciali e spesso la loro struttura determina se un visitatore vorrà inserire dei dati o se invece abbandonerà il sito. Senza ulteriori giri di parole, ecco dieci "dritte" per trasformare la vostra pasta scondita in un bel piatto di manicaretti da leccarsi i baffi.
Il codice
Gli esempi di codice riportati qui di seguito non funzioneranno "così come sono". Essi dipendono da una libreria esterna, prototype.js con addEvent incluso. Inoltre, le funzioni qui di seguito devono essere collegate ad eventi, come ad esempio onclick o onmouseover.
1. Ricordate il vostro markup
Notiamo come molta gente dimentichi di adoperare gli strumenti che sono già messi a loro disposizione. E così, qui di seguito vengono messi in evidenza alcuni elementi di HTML che sono particolarmente adatti per i form, giusto per rinfrescare le vecchie nozioni del web.
Label
Una label viene utilizzata per associare informazioni a un controllo. Se si attiva una label, il suo controllo associato otterrà lo stato attivo (focus). Ciò è importante perché quando un utente clicca sul nome di una label si attiva il campo associato.
<label for="email">Email: </label>
<input type="text" id="email">oppure
<label>Email: <input type="text" id="email"></label>Fieldset
Dalla specifica del W3C: "L'elemento FIELDSET consente agli autori di raggruppare tematicamente le label e i relativi controlli. Il raggruppamento dei controlli fa sì che gli utenti comprendano la loro funzione e che al tenpo stesso venga facilitata la navigazione con tabulazione per i programmi utente visuali e la navigazione vocale per i programmi con sintesi vocale. L'uso corretto di tale elemento fa sì che i documenti siano più accessibili."
Legend
Dalla specifica del W3C: "L'elemento LEGEND permette agli autori di assegnare una didascalia a un FIELDSET. Legend migliora l'accessibilità quando il FIELDSET viene reso in maniera non visibile".
Tabindex
Dalla specifica del W3C: "Questo attributo specifica la posizione dell'elemento corrente nell’ordine di tabulazione per il documento attuale. Tale valore deve essere un numero compreso tra 0 e 32767. Gli zeri iniziali saranno ignorati dagli user agent. Quando l’utente utilizza la tastiera, l’ordine di tabulazione stabilisce la posizione con la quale gli elementi ricevono l’attivazione (focus). L’ordine di tabulazione può includere una serie di elementi all’interno di altri elementi".
Accesskey
Dalla specifica del W3C: "Questo attributo assegna un accesskey (tasto d’accesso) ad un elemento. Un accesskey (tasto d’accesso) è un singolo carattere che deriva dal set di caratteri del documento. Nota: quando si specifica un accesskey (tasto d’accesso), gli autori dovrebbero valutare qual è il metodo input (immissione) utilizzato dal probabile lettore."
Password
Inserendo type="password" nel vostro campo input i caratteri inseriti saranno trasformati in una serie di asterischi.
Dalla specifica del W3C: "Gli application designer devono tener presente che tale meccanismo offre solo una blanda protezione di sicurezza. Sebbene alla vista di osservatori casuali la password venga mascherata dagli user agent, essa viene trasmessa al server a chiare lettere, ma può essere letta da chiunque abbia un accesso alla rete a basso livello."
2. CSS
Non è una novità, ma i CSS possono trasformare un form in qualcosa di veramente gradevole. Non c’è bisogno di scoprire l’acqua calda, ma solo di perfezionare il codice del proprio form con i CSS e un po’ con Javascript leggendo le seguenti risorse:
Style Those Buttons - The Man In Blue ci mostra come creare dei simpatici pulsanti.
Niceforms – Niceforms con l’uso di qualche azione in CSS, fa sì che un orrendo form si trasformi in qualcosa di molto più piacevole.
Hide Optional Fields – In questo esempio, per rendere un form più bello e più usabile, vengono impiegati un po' di CSS e Javascript.
CSS Forms - Jeff Howdens ci mostra come creare un form ben strutturato senza l’impiego di tabelle.
3. AutoTab
L’utente, quando si sposta in un form, si serve in genere del tasto tab al fine di avanzare al campo successivo. Questa funzione di AutoTab che presentiamo, dopo che è stata raggiunta la lunghezza massima consentita, imposta automaticamente lo stato attivo (focus) al campo successivo . Ciò consente all’utente di non dover più usare manualmente il tasto tab per muoversi tra i campi che hanno una lunghezza massima impostata. Tale funzione è particolarmente utile per inserire dati come numeri di previdenza sociale o numeri telefonici che in ogni campo contengono un limite massimo di caratteri. Ad esempio, dopo che un utente digita il prefisso di un numero telefonico, il form automaticamente si sposta alla casella successiva dando la possibilità all’utente di continuare ad inserire il proprio numero telefonico senza interruzione.
Per impostare l’autotab su un elemento input, dovete soltanto inserire tre cose nel vostro markup: tabindex, className di autoTab e maxlength:
<input type="text" name="areacode" class="autoTab" tabindex="1" maxlength="3" />
Al caricamento di una pagina, verranno associati degli eventi nei campi input per l'autotabbing. Se un campo ha una maxlength e questo massimo viene raggiunto il focus (stato attivo) viene automaticamente impostato al controllo successivo con il valore più elevato di tabindex. Ecco uno sguardo rapido alla nostra funzione, autoTab():
function autoTab(e) {
if(this.value.length == this.getAttribute("maxlength") &&
e.KeyCode != 8 && e.keyCode != 16 && e.keyCode != 9) {
new Field.activate(findNextElement(this.getAttribute("tabindex")));
}
}
function findNextElement(index) {
elements = new Form.getElements('shippingInfo');
for(i = 0; i < elements.length; i++) {
element = elements[i];
if(parseInt(element.getAttribute("tabindex")) == (parseInt(index) + 1)) {
return element;
}
}
return elements[0];
}Due cose importanti:
- Si potrebbe anche usare
input.form[(getIndex(input)+1)].focus(), ma ciò causerebbe un errore anomalo in Javascript quando si adopera Firefox. Un esempio può essere visualizzato su The Javascript Source. - Quando un utente preme i tasti shift-tab, l’elemento precedente dovrebbe essere ancora su focus (stato attivo) e l’autotab dovrebbe automaticamente disabilitarsi.
4. Informazione sui campi
È sempre buona norma dare indicazioni riguardanti i requisiti e le restrizioni di un campo. Come fa a sapere un utente che una password deve avere 3 lettere maiuscole, che in un punto della password va inserito un punto esclamativo e che la stessa deve essere lunga tra 6 e 17 caratteri ? Ispirati dai form utilizzati su Tangent, abbiamo fornito alcuni ulteriori suggerimenti.
- Immettete tutte le informazioni correlate in una label associata al campo. Poi inserite un
className, un accesskey e un titolo descrittivo, in modo che tutte le informazioni siano in un unico posto. Così sarà più facile da organizzare, e quando Javascript dovrà estrapolare le informazione esso renderà anche il lavoro più semplice. - Per mostrare le informazioni all’utente, preferiamo utilizzare onfocus invece di onmouseover. Sebbene ognuno abbia le proprie preferenze, è sempre piacevole sapere che le informazioni corrette saranno visualizzate sul campo con focus (stato attivo) piuttosto che tramite il mouse.
- È più facile assegnare alle label un id simile al campo a cui fanno riferimento. Ad esempio, se un campo è nominato fname, la label è nominata lfname. In tal modo Javascript potrà estrarre le informazioni più facilmente. Sotto vi è un esempio di come si può accedere al titolo iniziale delle label:
p = document.createElement("p"); p.innerHTML = $("l" + this.id).title; span.appendChild(p);Fine della prima parte.
5. Visualizzare gli errori
Quando un utente commette un errore, è vostro compito mostrargli gli errori in maniera rapida ed efficiente. Ecco alcune idee su come mostrare in maniera chiara gli errori dei vostri form:
- All’utente non dovete mostrare un errore alla volta. Se non ha compilato 3 campi obbligatori, dovete mostragli i tre errori che ha commesso, in questa maniera potrà correggerli insieme.
- All’ utente fornite in anticipo più informazioni possibili. Ad esempio, potreste contrassegnare un campo come richiesto, o precisare la lunghezza minima di una password.
- Dovete sapere che avete tre opzioni di convalida a vostra disposizione: 1) Tramite Javascript potete dare un feedback di risposta immediato. L’utente beneficia di un feedback rapido, ma dovrete duplicare le funzioni della vostra convalida sul client e sul server. 2) Potete affidarvi alla Degradable Ajax Validation che elimina il codice duplicato, ma aumenta i tempi di caricamento del server. 3) Potete validare solo all’invio del form ma ciò vi lascia senza codice duplicato, senza caricamento aggiuntivo al server, e sfortunatamente, senza feedback istantaneo.
- Quando dovete mostrare i messaggi di errore rendeteli visivamente accattivanti. Con un pizzico di creatività segnateli in grassetto, evidenziateli. È anche meglio associarli con dei colori che catturino l’occhio dell’utente: rosso per gli errori, giallo per gli avvisi, verde per le azioni andate a buon fine. Ovviamente potete modificarli a vostro piacimento, ma se evidenziate un messaggio d'errore in rosa potreste creare una certa confusione.
6. Postbacks
Non c’è nulla di peggio che compilare un form, imbattersi in un errore e dover digitare nuovamente tutte le informazioni. Al fine di preservare i propri utenti da inutili frustrazioni, dobbiamo accertarci che tutti i dati vengano conservati. Cioè, se vi è un errore, i campi dovrebbero comparire nuovamente compilati. Se abbiamo un form con più passi, andando con la navigazione avanti e indietro il form dovrebbe mantenersi riempito. Un metodo comune è quello di impostare l’azione di un form al suo URL corrente. In questo modo è possibile leggere nel form il valore e compilare i campi immediatamente in caso di errore. Ad esempio, basta impostare il valore al post:
<input type="text" name="fname" value="<?=$_POST["fname"] ?>" />E il campo verrà riempito. Nel caso in cui non vi fosse alcun errore, si verrà indirizzati alla pagina di completamento del form.
7. onFocus
Indicazioni visive, come cambiamento del colore del bordo del campo, contribuiscono a mostrare all'utente quale campo ha lo stato attivo (focus). I CSS forniscono una soluzione semplice per aggiungere i bordi con il selettore border, ma questa caratteristica attualmente non è supportata nelle vecchie versioni di IE e non funziona con gli elementi select. Usando un po’ di Javascript e aggiungendo uno span ad ogni elemento del form, la nostra soluzione crea bordi e sfondi personalizzati.
Il concetto è che inglobando il nostro elemento form all'interno di uno span, possiamo produrre un effetto unico. Non preoccupatevi, non dovete inserire lo span nel codice manualmente — questa funzione in Javascript non intrusivo verrà aggiunta in maniera dinamica e rimossa automaticamente. Il bello è che per creare un effetto che funzioni su text, textarea ed elementi select, lo span può avere immagini di sfondo, bordi e qualsiasi altra combinazione dei due. Ecco un esempio:
<span class="focus">
<input type="text" id="fname" name="fname" />
</span>
function showFocus() {
this.parentNode.className = "focusHover";
function hideFocus() {
this.parentNode.className = "focus";
}Il motivo per cui è necessario uno stato per lo span quando il campo non ha il focus è per prevenire lo spostamento della pagina. Per esempio, se il nostro span ha 3 pixel di padding all'attivazione dell'evento onfocus, abbiamo bisogno di 3 pixel di padding trasparente quando non c'è il focus, in modo tale da non vedere gli elementi del form "saltellare" quando vengono "navigati" dall’utente.
8. Label click
Quando una label viene attivata, sia attraverso onclick sia attraverso accessKeys, l’elemento associato specificato tramite l’attributo for avrà anch’esso il focus.
Dalla specifica del W3C: "Quando un elemento LABEL riceve il focus, trasmette lo stato attivo al controllo a cui è associato."
Purtroppo, questo non è garantito in tutti i browser. Per rimediare alla situazione, il trucco sarà una semplice funzione di Javascript:
function initLabels() {
labels = document.getElementsByTagName("label");
for(i = 0; i < labels.length; i++) {
addEvent(labels[i], "click", labelFocus);
}
}
function labelFocus() {
new Field.focus(this.getAttribute('for'));
}9. Doppio invio
Nooo! Il nostro utente ha inviato il form due volte, probabilmente perché il sito non ha risposto abbastanza velocemente. I dati non solo saranno processati due volte, ma l’ultimo invio potrebbe causare degli errori che confonderebbero l’utente ancora di più. In questa situazione bisogna tenere a mente tre cose:
- Se JavaScript è abilitato, usatelo per inviare il form. Dopo il primo invio, disabilitate il pulsante.
- Se Javascript non è abilitato, fornite agli utenti un chiaro messaggio dove si chieda loro di non inviare più di una volta dati.
- Fate in modo che sul server i dati duplicati non vengano processati. Tenete traccia dei pagamenti, degli account, evidenziateli e contrassegnateli ad azione avvenuta. In questo modo il secondo ciclo di elaborazione verrà ignorato.
10. Conclusioni
E terminiamo mettendo in evidenza degli ottimi link. Potreste non averne bisogno, ma in particolari situazioni saranno dei veri e propri salvavita.
Mini Calendar – Quando c’è un campo data, è sempre meglio fornire un calendario popup. Questo calendario non si aprirà in una nuova finestra, e sarà cliccabile. Per iniziare, Dynarch ha la migliore soluzione.
Combo boxes – L’elemento mancante nell’HTML, formato per metà da una lista di selezione (a discesa) e per l’altra metà da una casella di testo, è noto come combo box. Questo metodo permette all'utente di digitare la propria opzione qualora non dovesse riuscire a trovare quello che sta cercando nel menu a discesa. Date un’occhiata a Upgrade Your Select Element to a Combo Box per vedere come si arriva ad una soluzione.
Visual Maps – Proprio come il calendario popup, anche le mappe popup possono essere efficienti. Date un’occhiata ad Orbitz, e cliccate sopra il codice aeroporto. Si avrà una lista di testo di tutti gli aeroporti. Essa potrebbe essere una pagina dinamica popup con una mappa cliccabile, e in questo modo quando si clicca su un punto della mappa il campo testo si popola.
Traduzione a cura di Cinzia Pasqualino.
