Nei precedenti articoli di questa guida dedicati completamente ai form, abbiamo appreso, tra l’altro, come utilizzare i placeholder e le validazioni tramite le regular expression. Nel corso di questa terza parte, invece, esploreremo alcuni nuovi tipi di input introdotti dall’HTML5.

Uno dei limiti nello gestire i form con l’HTML, era proprio legato alla vaghezza con cui veniva utilizzato il tag <input>: checkboxes, caselle di testo, pulsanti e tantissimi altri controlli, venivano identificati con lo stesso tag. Con l’avvento dell’HTML5, invece, campi dedicati a email, url, numeri di telefono, colori, permettono ai browser di dare importanti contributi all’utente. Un browser che supporta i nuovi campi input dell’HTML5, potrebbe:

• aiutare la validazione – restituendo un messaggio d’errore più coerente. Ad esempio, Chrome riconosce la presenza del simbolo @ come necessaria ai fini della corretta compilazione di un campo di tipo email.
• autocompletare il campo – attraverso i dati immagazzinati in precedenza nel browser.
• prevenire errori di compilazione – ad esempio, controllando che in un campo numerico non vengano inserite lettere oppure impedendo di scegliere un range di date impossibile.

Anche in questo caso la compatibilità è un fattore importante e, prima di iniziare, è bene considerare il supporto che i più diffusi browser forniscono alle nuove funzionalità. Come sempre, il mio personale consiglio è quello di affidarsi a caniuse.com:

Indirizzi email

Gli indirizzi email vengono indicati dall’attributo type=”email”. Il nostro tag input dedicato alle email diverrà, quindi:

<input id="email" placeholder="esempio@mail.xxx" type="email" required>

In fase di compilazione l’utente, per rispettare i canoni del campo tipizzato, dovrà utilizzare il simbolo @ e il punto. Inoltre, il punto dovrà essere separato da almeno un carattere dopo la @ ed avere almeno due caratteri che lo susseguono.

URL

Gli URL, ovvero gli indirizzi web, vengono indicati dall’attributo type=“url”:

<input id=”indirizzo” type="url">

Il browser non solo si occuperà di controllare la presenza o meno del protocollo (https://, ftp://, https://, mms://, etc.) ma i più moderni visualizzeranno anche una lista di indirizzi facendo appello alla recente cronologia.

Search Box

Con type=”search” si indicano quei campi dediti alla ricerca di contenuti. Utilizzare questo codice:

<input id="ricerca" type="search">

apporta automaticamente dei cambiamenti stilistici al campo, come l’icona X che pulisce il contenuto del campo. Ad esempio, in Chrome, un campo search apparirà così:

Numeri

I numeri possono essere inseriti in un campo definito da type=”number”, che costringerà l’utente ad inserire esclusivamente numeri, a discapito di altri caratteri. Un campo che richiede all’utente di inserire la propria età, potrebbe essere realizzato con questo codice:

<input id="eta" type="number">

Inoltre, specificando gli attributi min e max, possiamo obbligare l’utente a scegliere solo numeri all’interno di un determinato range. Ad esempio, nel nostro caso, vogliamo che il campo età accetti esclusivamente valori compresi tra 18 e 99 anni, quindi utilizzeremo:

<input id="eta" type="number" min="18" max="99">

Se invece, in altre situazioni, dovessimo aver bisogno di aumentare la precisione per includere numeri decimali, ad esempio 3, potremmo farlo utilizzando il tag step in questo modo:

<input id="a" type="number" min="1" max="100" step="0.001">

per ottenere un risultato del genere:

I numeri possono però essere gestiti anche in maniera differente, specialmente quando c’è bisogno di meno precisione. L’attributo type=”range”, in concomitanza agli ormai noti min e max, permette di visualizzare un risultato come questo:

Il relativo codice risulterà:

0<input type="range" min="1" max="10" value="3">10

dove l’attributo value rappresenta il valore di default.

Date

Per indicare le date, esistono diversi tipi d’attributo che cercherò di riassumere in questa tabella:

I browser che supportano questi formati danno all’utente diversi vantaggi: mostrano un calendario dal quale è possibile selezionare direttamente la data ed impediscono la scelta di un formato non corretto o di una data impossibile.

Alcuni type, come date, supportano anche min e max, che permettono di selezionare unicamente date all’interno di un range prestabilito. Ad esempio:

<input type="date" min="2014-04-18" max="2014-04-28">

Produrrà, in Chrome, un risultato come questo:

dove l’utente potrà selezionare una data compresa tra il 18 e il 28 Aprile.

Numeri telefonici

Con l’attributo type=”tel” ci si riferisce ai numeri di telefono. Gli unici browser a trarre effettivamente vantaggio da questa specifica, però, sono quelli dei dispositivi mobili che visualizzano, invece della classica tastiera quella numerica. Il codice risulterà:

<input id="telefono" type="tel">

Colori

I colori possono essere inseriti tramite l’apposito attributo type=”color”. I browser che supportano questo codice:

<input id="colore" type="color">

mostreranno un cosiddetto color picker molto simile a quello utilizzato dalla maggior parte dei programmi di grafica:

Come abbiamo già visto con i numeri, anche in questo caso possiamo settare il valore di default utilizzando l’attributo value ed il numero esadecimale corrispondente al colore desiderato.

 Conclusioni

Ed eccoci giunti alla conclusione di questa terza parte nel mondo dei form. Nella prossima e ultima lezione dedicata a questo tema affronteremo: il tag datalist, le progress bar e sperimenteremo la possibilità di modificare un elemento con contentEditable. Pensi che i miglioramenti introdotti dall’HTML5 nei form, siano sufficienti ed opportuni? Quale altra funzione riterresti a tuo parere fondamentale?

Prima di salutarci, ti ricordo che puoi scaricare il codice completo della lezione usando questo link.

GUIDA HTML5: GLI ARTICOLI
1) Guida HTML5:Introduzione
2) Guida HTML5: la prima pagina
3) Guida HTML5: la struttura
4) Guida HTML5: Immagini e outlines
5) Guida HTML5: nuovi elementi semantici 
6) Guida HTML5: i form – Parte 1 
7) Guida HTML5: i form – Parte 2
8) Guida HTML5: i form – Parte 3
9) Guida HTML5: i form – Parte 4
10) Guida HTML5:i tag audio e video – parte 1
11) Guida HTML5:i tag audio e video – parte 2
12) Guida HTML5: I player video
13) HTML5: Il Canvas – Parte 1
14) Guida HTML5: Il Canvas – Parte 2
15) HTML5: Il Canvas – Parte 3
16) HTML5: Il Canvas – Parte 4
17) HTML5: Web storage
18) Web worker