Form accessibili: come usare le label

Guida all’uso delle label nei form HTML, per un sito più accessibile.

Esistono due metodi HTML per contrassegnare un campo di un form con un’etichetta.

Il primo è usare l’attributo “for” sulla label, con un valore corrispondente all’id dell’elemento associato:

<label for="email">email:</label>
<input type="text" id="email" />

Il secondo è inserire il campo del form all’interno della label:

<label>email: <input type="text" /></label>

Personalmente preferisco il primo metodo, ma il secondo è comunque valido e riconosciuto come corretto.

Continua a leggere Form accessibili: come usare le label »

I form con HTML 5: novità importanti

Una panoramica sulle possibilità di controllo dei form offerte dalla nuova specifica HTML.

Dopo aver affrontato una prima volta l’argomento HTML 5 su questo sito, nelle ultime settimane ho sperimentato diverse soluzioni interessanti di questa nuova specifica.

Il linguaggio è stato semplificato e reso molto più immediato, ma ci sono diversi elementi come i form che hanno subito una rivoluzione. Per capire di cosa sto parlando vi basterà installare l’ultima versione di Opera, che supporta le novità di HTML 5 e vi permetterà di fare alcune prove.

Per far sì che una pagina segua la specifica, è sufficiente usare questa doctype:

<!DOCTIPE html>

Come vedete, è tutto molto più immediato rispetto alle dichiarazioni in uso attualmente.

Utilizzando i form vi renderete conto che le novità sono ancora più interessanti. Sono supportati infatti una serie di attributi e valori per gestire i campi obbligatori, la validazione dei moduli ed i diversi tipi di elementi.

Ad esempio type=”email” su un campo impedisce l’invio del form se il dato inserito non è un formato email valido. La stessa cosa vale per gli indirizzi web con type=”url”. Il tutto è interamente gestito dal browser, senza bisogno di script aggiuntivi.

Usando invece type=”date” su un campo input, al click appare un box per la selezione della data come quello che potete vedere qui sotto. Niente JavaScript e altri elementi nella pagina, basta un attributo.

Selezione della data su un form in HTML5

Per i campi obbligatori invece basta specificare required all’interno dell’elemento richiesto. Così un campo email potrà essere definito:

<input name="email" type="email" required>

Potete vedere alcuni esempi e sperimentare le potenzialità dei form in HTML 5 in questa pagina, ricordando di utilizzare l’ultima versione di Opera. Gli altri browser si comporteranno senza errori, ma vedrete dei semplici campi input. Per quanto riguarda invece la selezione della data, Bruce Lawson ha realizzato un semplice esempio, correlato ad un articolo molto interessante su HTML 5 e WAI-ARIA.

Questa nuova specifica HTML non sarà largamente supportata entro breve, ma è tempo di iniziare a conoscerla. Potrebbe diventare una realtà prima del previsto senza bisogno di attendere molti anni: tra gli obiettivi c’è anche quello della retrocompatibilità, e questo gioca a suo favore.

Nuovo form con Wufoo

WufooHo appena aggiornato il modulo presente nella pagina contatti, grazie ad un generatore di form online che avevo visto da tempo, ma mai sperimentato a fondo: Wufoo. Dopo aver letto l’articolo odierno sul blog di html.it mi sono convinto.

Il servizio è uno splendido esempio di usabilità ad ottimi livelli, con un sistema per la creazione del proprio form che si avvicina alla perfezione. Vengono utilizzati al meglio alcuni dei migliori javascript presenti su internet oltre ad abbondanti dosi di ajax: provate la demo per rendervi conto delle potenzialità di questo strumento!

E’ possibile personalizzare praticamente tutto: i campi presenti, le etichette, inserire suggerimenti per la compilazione ed ovviamente cambiare l’aspetto grafico.

Con l’account gratuito si possono creare fino a 3 moduli ed integrarli nei propri siti nella maniera preferita. L’unico svantaggio rilevante è che se non si desidera scriversi da soli la parte lato server per l’invio, bisogna integrarli tramite un iframe, il che vuol dire evitare la doctype xhtml 1.0 strict. Se infatti controllate la mia pagina contatti, il codice è valido, ma sono dovuto passare temporaneamente alla doctype di tipo transitional.