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.
Gli 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!