La gestione dei campi numerici in HTML5

Nuovi tipologie di “input” in HTML5

Tra le novità del linguaggio HTML5, quello che ormai è diventato lo standard de facto per i moderni siti web (anche se non è ancora ufficialmente stabile) troviamo la possibilità di specificare la tipologia di dati che possono essere immessi nei controlli input.

In particolare i nuovi tipi di input HTML5 sono:

• colore (color)
• data (date)
• data e ora (datetime)
• data e ora locali (datetime-local)
• indirizzo email (email)
• mese (month)
• numero (number)
• intervallo (range)
• ricerca (search)
• numero di telefono (tel)
• orario (time)
• indirizzo web (url)
• settimana (week)

Il campo di inserimento numerico

Il tipo di input “number” è molto utile perché permette di definire dei parametri per i numeri che possono essere inseriti:

• max: ovvero il valore massimo che il campo può accettare;
• min: il valore minimo inseribile;
• step: nel caso il browser supporti questa opzione, come ad esempio Google Chrome, viene mostrata una UI speciale con due pulsanti: uno per incrementare ed uno per diminuire il valore con il “passo” (step) specificato;
• value: il valore predefinito del campo.

Esempio di campo numerico con valore di default uguale a 5, step di una unità e range compreso tra 0 e 10:

<input type="number" min="0" max="10" value="5" step="1">

Il risultato è il seguente:

.

Compatibilità nei vari browser

Va purtroppo segnalato che, come molti altri tag HTML5, anche il tipo di input “number” non è ancora compatibile con tutti i browser.

Ad esempio il supporto sarà gestito da Firefox solo dalla versione 28, mentre su Internet Explorer 10 è supportato solo parzialmente.

Quando si usa questo campo è necessario effettuare un po’ di test con diversi browser e piattaforme per verificarne il funzionamento a causa del supporto un po’ scarso. Ad esempio si potrebbero rilevare anomalie nell’inserimento di numeri con decimali.

Il vantaggio di questi nuovi attributi nel mondo mobile

Infine segnalo che il campo numerico, come anche il campo per il numero di telefono, viene inoltre sfruttato dagli smartphone per mostrare la tastiera numerica dedicata al posto della tastiera con le lettere in modo da rendere migliore l’esperienza d’uso del sito.