Web Design  »  Articoli  »  Usabilità 

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."

Altri articoli

Altre guide

Altre newsletter