HTML input type=number: min, max, step, validazione | We.Inc
Prova input type=number dal vivo: imposta min, max e step, leggi valueAsNumber e ogni flag di validità, rimuovi lo spinner e scopri quando inputmode=numeric è il campo più adatto.
Usa input type="number" per quantità reali come un'età, un prezzo o un conteggio. min e max impostano l'intervallo consentito, step imposta l'incremento (1 di default, oppure any per decimali liberi) e valueAsNumber ti restituisce un numero, oppure NaN quando il campo è vuoto. Per numeri di carta e codici postali usa invece type="text" con inputmode="numeric".
Gli attributi di un campo numerico
Attributo
Esempio
Effetto
min="0"
I valori inferiori non superano la validazione (rangeUnderflow)
max="10"
I valori superiori non superano la validazione (rangeOverflow)
step="0.01" or step="any"
Predefinito 1; i valori fuori passo non sono validi (stepMismatch)
Un campo vuoto non è valido (valueMissing)
list="sizes"
Suggerisce valori da una datalist
placeholder="e.g. 2"
Suggerimento mostrato quando il campo è vuoto, mai un'etichetta
I campi numerici sembrano semplici, ma le regole su step, valori vuoti e spinner mettono in difficoltà molti. Imposta gli attributi nel tester, scrivi qualsiasi cosa nel campo e guarda il valore grezzo, il numero interpretato e ogni flag di validità aggiornarsi mentre digiti.
Inserisci i valori di min, max e step. Lascia vuota una casella per togliere quell'attributo.
Scrivi nel campo di prova oppure usa i tasti freccia e lo spinner.
Leggi value, valueAsNumber e i flag di validità nel pannello accanto.
Copia l'HTML generato quando il campo si comporta come vuoi.
Abbina sempre il campo a un elemento label visibile; un placeholder sparisce appena qualcuno inizia a scrivere.
Leggi valueAsNumber invece di fare il parsing di value da solo, e controlla che non sia NaN prima di usarlo.
Valida di nuovo sul server. I controlli del browser aiutano le persone, ma chiunque può inviare un form senza passarci.
Per gli importi, step="0.01" accetta i centesimi; per decimali liberi usa step="any".
Non usare type="number" per campi come numeri di telefono, numeri di carta e codici postali, dove uno spinner non ha senso.
Domande frequenti
Perché il mio input numerico rifiuta 1.5?
Lo step predefinito è 1, quindi sono validi solo i numeri interi, a meno che la base dello step non sia un intero. Aggiungi step="0.5", step="0.01" o step="any" per accettare i decimali.
Cosa restituisce valueAsNumber per un campo vuoto?
NaN. Nello stesso caso la proprietà value restituisce una stringa vuota. Puoi anche impostare valueAsNumber per scrivere un numero nel campo.
Come rimuovo le frecce da un input numerico?
Imposta appearance: textfield sull'input. I tasti freccia su e giù cambiano comunque il valore, perché appearance modifica solo l'aspetto. WebKit e Blink disegnano anche i pulsanti di incremento tramite pseudo-elementi, che l'esempio qui sotto nasconde a loro volta.
Devo usare type=number o inputmode=numeric?
Usa type="number" quando il valore è una quantità reale e uno spinner è utile. Usa type="text" con inputmode="numeric" e un pattern per stringhe di cifre come numeri di carta o codici postali, che sono identificativi e non importi.
Un campo numerico vuoto è valido?
Sì, a meno che non abbia l'attributo required. Un input numerico è considerato valido quando è vuoto o contiene un unico numero valido.
Come funziona la validazione
Il browser controlla il campo rispetto a min, max e step e imposta un flag sull'oggetto validity per ogni regola violata. Il form non viene inviato finché un flag è attivo, e :invalid ti permette di dare uno stile al campo.
Quando il campo contiene testo che il browser non riesce a trasformare in numero, validity.badInput diventa true. Controlla quel flag, oppure se valueAsNumber è NaN, prima di fidarti di ciò che leggi; il tester mostra esattamente cosa riporta il tuo browser.
Accessibilità e mobile
Un input numerico viene esposto alle tecnologie assistive come spinbutton. Se incrementare e decrementare non è utile per quel valore, un campo di testo con inputmode="numeric" evita modifiche accidentali con la rotella del mouse o i tasti freccia.
Chiediti se il valore è una quantità a cui potresti aggiungere o sottrarre qualcosa. Se lo è, usa un campo numerico; se è un codice che per caso contiene cifre, usa il testo.
Quale campo per quale numero
type=number a confronto con un campo di testo numerico
Dato
Campo
Perché
Quantità, età, ospiti
type="number" min max
Una quantità reale; spinner e controlli sull'intervallo aiutano
Campo prezzo con step decimale e stile per i valori non validi
Scrivi 4.999 o un numero negativo e il bordo diventa rosso, perché il valore viola lo step o il minimo.
Nascondere i pulsanti dello spinner
appearance: textfield rimuove le frecce; gli pseudo-elementi WebKit coprono i browser che le disegnano ancora. I tasti freccia continuano a funzionare.
Campo solo cifre senza spinner
inputmode suggerisce una tastiera numerica, il pattern controlla che ci siano cinque cifre e gli zeri iniziali restano intatti.
Leggere il numero in modo sicuro in JavaScript
valueAsNumber evita il parsing delle stringhe, e il controllo di validità intercetta i valori fuori intervallo o fuori passo.