I formulari o forms che dir si voglia sono una risorsa indispensabile per richiesta di informazioni, contatto o pareri.

Lo sviluppatore nella realizzazione di un form dovrà porre la propria attenzione a due aspetti, quello della conformità e validazione dei dati, e quello relativo alla facilitazione dell’inserimento di questi.

Avremo quindi la necessità di controllare che nel campo “sito internet” sia stato messo un dato corrispondente ad un indirizzo internet oppure che nel campo “età” vi sia effettivamente un numero, magari senza decimali e dal valore inferiore a 100.

L’inserimento di una data potrà invece essere aiutato con un calendario a comparsa attivato dal focus stesso del campo, o l’inserimento di un colore sarà più agevole potendo effettuare la scelta da una tavolozza anziché pretendere un improbabile valore esadecimale.

Fin qui ci si è aiutati e ci si aiuta con l’utilizzo di codice javascript, esistono script dei più svariati realizzati proprio per venire incontro alle esigenze degli utenti ma soprattutto degli sviluppatori.

Ovviamente i controlli di formalità e congruità, oltre che per mezzo di javascript lato client, dovrebbero sempre avere un ulteriore controllo lato server.

HTML5 viene ulteriormente incontro agli sviluppatori introducendo delle tipologie distinte di “input type”, dal numerico, all’indirizzo email, passando appunto per date e colori.

Come sempre il recepimento di queste direttive da parte degli sviluppatori di browsers non è del tutto omogeneo ma si inizia finalmente ad avere un discreto supporto, eccettuato per la solita pecora nera rappresentata da IE che anche nella versione 9 delude nel supporto HTML5.

L’utilizzo di questi nuovi attributi ha poi risvolti interessanti quando la fruizione della pagina avviene da dispositivo mobile, quali iPhone, iPad o smartphone e tablet Android.

Questi dispositivi dotati di tastiera virtuale riescono a modificare la configurazione della tastiera a secondo del campo di inserimento specificato e richiesto.

Un campo età per esempio che ammette solo un valore numerico farà aprire al dispositivo mobile una tastiera virtuale solo numerica, così per l’inserimento degli url ecc.

Ma vediamo nel dettaglio questi nuovi attributi.

Campo di tipo email:

E-mail: <input type="email" name="user_email" />

Come detto sopra in questo caso Safari su iPhone riconoscerà i tipo e proporrà la tastiera comprensiva del simbolo @ e del tasto .com.

Campo di tipo URL:

Sito Internet: <input type="url" name="user_url" />

Campo di tipo numerico:

Punti: <input type="number" name="points" min="1" max="10" />

Questo campo ha la possibilità di impostare gli attributi, min, max, step ed il classico value. Gli attributi min e max avranno conterranno appunto i valori minimo e massimo ammessi, value indica il valore proposto di default, mentre step indica la successione che dovrà avere l’incremento o decremento del valore del campo (per mezzo di frecce +/-) ed al tempo stesso l’intervallo di valori ammessi.

Campo di tipo range (intervallo numerico):

<input type="range" name="points" min="1" max="10" />

Questo tipo di dato ha anch’esso gli stessi parametri del campo di tipo numerico, (min, max, step e value), si differenzia da questo per la rappresentazione visiva.
Il campo di tipo range verrà rappresentato come una barra di selezione scorrevole (slider bar).

Campo di tipo selettore di data (date picker):

Data: <input type="date" name="user_date" />
Mese: <input type="month" name="user_month" />

Il selettore di data è interessante come importante. Opera apre un calendario per la selezione della data, come si suole fare con l’aiuto di javascript. Chrome ad esempio non mostra il calendario ma mostra delle frecce per scorrere in avanti ed indietro i valori, che propone sono attesi nel formato YYYY-MM-DD.

Di questa classe di tipo dati distinguiamo i seguenti:

date - Seleziona la data, mese e anno
month - Seleziona il mese e l'anno
week - Seleziona la settimana e l'anno
time - Seleziona il tempo in ore e minuti
datetime - Seleziona il tempo, data, mese e anno (in formato UTC)
datetime-local - Seleziona tempo, data, mese e anno (nell'orario locale)

Campo di tipo colore:

Colore: <input type="color" name="user_color" />

Anche qui il comportamento dei browser è diverso. Chrome ad esempio lascia il semplice input text e fa un controllo affinché il dato inserito risulti essere un valore esadecimale, Opera apre una vera e propria tavolozza per la scelta e selezione del colore, davvero ben fatta.

Campo di tipo ricerca:

Cerca: <input type="search" name="user_search" />

Questo elemento non ha funzioni di controllo sulla formalità, ci sono browser che visualizzano questo campo con un text input differente da quello standard, ad esempio potrebbe avere gli angoli arrotondati o una lente di sfondo, proprio come nei form di ricerca ”caserecci”.

Come illustrato questi nuovi campi e funzionalità sono decisamente interessanti, eviterebbero il dover scrivere ogni volta procedure di controllo e permettono un’interazione migliore con l’utente.

Prima del loro utilizzo esclusivo ci vorrà del tempo affinché avvenga una progressiva migrazione verso nuovi browser che ne garantiscono l’adozione.

Giusto per non lasciarci sorprese Internet Explorer è quello con un supporto peggiore di HTML5 ed in questo caso completamente assente.

Ci tocca sperare nella nuova ed imminente versione 10 alla quale Microsoft sembra essersi dedicata con profusione d’impegno scardinando quella che era la propria consuetudine, ovvero aggiornare le release del proprio browser contestualmente all’aggiornamento del proprio sistema operativo.

Con la versione 10 si spezza questa cadenza decisamente inadeguata, nel tentativo di poter rincorrere e raggiungere i competitori, che ad ogni rilascio ed uscita si trovano ad avere un divario sempre maggiore con il navigare Microsoft.

Assieme ai nuovi tipi di campo sono stati introdotti in HTML5 nuovi attributi anch’essi importanti per lo sviluppo di buone forms che sicuramente avremo modo di vedere più avanti.