domenica 9 febbraio 2014

Campo numerico 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 tipo di input "number" 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 (vedi immagine)
  • value: il valore predefinito del campo.
Esempio campo numerico con "step"

Ecco un esempio di come si può usare questo tag:

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

Inoltre, come molti altri tag HTML5, anche il tipo di input "number" non è 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.