HTML5 ha introdotto una serie di nuovi tipi di input, uno dei quali è il tipo “number” che, appunto, è un campo di modulo che accetta input numerici. Che cosa succede in Google Chrome con il seguente codice HTML, quando cerchiamo di entrare in un (a virgola mobile) decimale numero e inviare il modulo?

<input type="number" />

Su Firefox ad esempio non succede. Si tratta quindi di un bug? No, il campo di modulo si comporta come definito dal W3C.

I nuovi campi input di tipo “number” possono avere gli ulteriori attributi “min” e “step”, limitando l’intervallo dei valori consentiti.
L’attributo “min” è abbastanza ovvio: è il valore minimo che può essere inserito.
L’attributo “step” è meno intuitivo: esso è il passo e controlla l’incremento/ decremento quando si clicca sui tastini su / giù del campo di input.
Tuttavia, l’attributo step determina anche che i valori sono validi, quindi ad esempio con un step=’1′ sarà possibile inserire valori 1, 2, 3 ecc e con step=2 significa che è possibile immettere 2, 4, 6, ecc, ma inserendo numeri tipo 3 o 5 verrà segnalato un errore di convalida, poiche sono valori non previsti dal passo.
È inoltre possibile utilizzare un valore decimale: ad esempio, un passo di 0.3 permetterà valori come 0.3, 0.6, 0.9, ecc, ma non 1 o 2.
Ma se è vostra intenzione far accettare tutti i numeri che siano interi o decimali, vi basterà inizializzare l’attributo step=’any’:

<input type="number" step="any"/>

In questo modo risolverete anche il messaggio d’errore mostrato sopra!

Lascia un Commento