<input type="number">

Gli elementi di tipo number vengono utilizzati per consentire all'utente di inserire un numero. Includono la convalida incorporata per rifiutare le voci non numeriche.

Il browser può scegliere di fornire frecce stepper per consentire all'utente di aumentare e diminuire il valore utilizzando il mouse o toccando con la punta del dito.

Nei browser che non supportano gli input di tipo number, un input number ritorna al tipo text.

Valore

Un numero che rappresenta il valore del numero immesso nell'input. Puoi impostare un valore predefinito per l'input includendo un numero all'interno dell'attributo value, in questo modo:

<input id="number" type="number" value="42">

Attributi aggiuntivi

list

I valori dell'attributo list sono quelli id di un elemento <datalist> che si trova nello stesso documento. <datalist> fornisce un elenco di valori predefiniti da suggerire all'utente per questo input. Eventuali valori nell'elenco che non sono compatibili con typenon sono inclusi nelle opzioni suggerite. I valori forniti sono suggerimenti, non requisiti: gli utenti possono selezionare da questo elenco predefinito o fornire un valore diverso.

max

Il valore massimo da accettare per questo input. Se il valore immesso nell'elemento supera questo valore, l'elemento non supera la convalida del vincolo. Se il valore dell'attributo max non è un numero, l'elemento non ha un valore massimo.

Questo valore deve essere maggiore o uguale al valore dell'attributo min.

min

Il valore minimo da accettare per questo input. Se il valore dell'elemento è inferiore a questo, l'elemento non supera la convalida del vincolo . Se viene specificato un valore min che non è un numero valido, l'input non ha un valore minimo.

Questo valore deve essere minore o uguale al valore dell'attributo max.

placeholder

L'attributo placeholder è una stringa che fornisce un breve suggerimento all'utente sul tipo di informazioni previste nel campo. Dovrebbe essere una parola o una breve frase che dimostri il tipo di dati previsto, piuttosto che un messaggio esplicativo. Il testo non deve includere ritorni a capo o avanzamenti di riga.

Se il contenuto del controllo ha una direzionalità ( LTR o RTL ) ma deve presentare il segnaposto nella direzionalità opposta, puoi utilizzare i caratteri di formattazione dell'algoritmo bidirezionale Unicode per sovrascrivere la direzionalità all'interno del segnaposto.

readonly

Un attributo booleano che, se presente, significa che questo campo non può essere modificato dall'utente. Tuttavia value, può ancora essere modificato dal codice JavaScript impostando direttamente la proprietà HTMLInputElement value.

step

L'attributo step è un numero che specifica la granularità a cui deve attenersi il valore o il valore speciale any, descritto di seguito. Sono validi solo i valori che sono uguali alla base per il passaggio ( min se specificato, value altrimenti, e un valore predefinito appropriato se nessuno di questi è fornito).

Un valore stringa di any significa che non è implicito alcun passaggio e qualsiasi valore è consentito (salvo altri vincoli, come min e max).

Il valore di avanzamento predefinito per gli input number è 1, consentendo l'immissione solo di numeri interi, a meno che la base di avanzamento non sia un numero intero.

Utilizzo degli input di tipo number

Il numbertipo di input deve essere utilizzato solo per numeri incrementali, specialmente quando l'incremento e il decremento del pulsante di selezione sono utili per l'esperienza dell'utente. Il numbertipo di input non è appropriato per valori che sono costituiti solo da numeri ma non sono in senso stretto un numero, come codici postali in molti paesi o numeri di carte di credito. Per input non numerici, considerare l'utilizzo di un tipo di input diverso, come <input type="tel"> o altro tipo di <input> con l'attributo inputmode:

<input type="text" inputmode="numeric" pattern="\d*">

Gli elementi <input type="number"> possono aiutare a semplificare il lavoro durante la creazione dell'interfaccia utente e della logica per l'immissione di numeri in un modulo. Quando crei un input numerico con il valore type corretto, numberottieni la convalida automatica che il testo inserito è un numero e di solito una serie di pulsanti su e giù per aumentare e diminuire il valore.

I browser mobili aiutano ulteriormente l'esperienza dell'utente mostrando una tastiera speciale più adatta per inserire numeri quando l'utente tenta di inserire un valore.

Convalida

• gli elementi <input type="number"> invalidano automaticamente qualsiasi voce che non sia un numero (o vuota, a meno che non requiredsia specificato).
• È possibile utilizzare l'attributo required per rendere non valida una voce vuota. (In altre parole, l'input deve essere compilato.)
• È possibile utilizzare l'attributo step per vincolare valori validi a un determinato insieme di passaggi (ad es. multipli di 10).
• È possibile utilizzare gli attributi min e max per vincolare i valori validi ai limiti inferiore e superiore.