Numero HTML: min, max, step, decimali e valueAsNumber
HTML input type="number" accetta quantità che possono essere confrontate o incrementate. min e max impostano l'intervallo, e step imposta gli intervalli validi. Consentire i decimali richiede di considerare sia l'intervallo che la sua base; numeri di telefono o codici postali che sembrano numerici generalmente necessitano di un altro tipo di input.
min · max · step
min e max non impediscono necessariamente di digitare numeri fuori intervallo. Anche se può essere inserito un valore non valido, l'invio ordinario del modulo viene bloccato dalla convalida. Aggiungi required se il valore non deve essere vuoto.
La base del passo è un valore min valido se presente, altrimenti un attributo value HTML valido, o zero se nessuno dei due esiste. I valori validi sono un numero intero di passi da quella base. L'intervallo predefinito è 1, ma una base decimale può produrre valori decimali validi, quindi il valore predefinito non proibisce universalmente i decimali.
| Configurazione | Esempi di valori validi | Attenzione |
|---|---|---|
min="0" step="1" |
0, 1, 2 |
0.5 non rientra nell'intervallo. |
min="0" step="0.01" |
1, 1.2, 1.23 |
1.234 non rientra. Questo non forza la visualizzazione con due decimali. |
min="0" step="3" |
0, 3, 6, 9 |
Multipli di tre a partire da zero. |
min="1" step="3" |
1, 4, 7, 10 |
La base è uno, quindi questi differiscono dai multipli di tre. |
step="any" |
Vari valori decimali all'interno dell'intervallo | Rimuove il vincolo del passo; rimangono gli altri vincoli di intervallo e obbligatori. |
Confronta input interi e decimali in un esempio
Salva questo codice completo come number.html e aprilo in un browser. Senza un server, confronta la convalida, le stringhe inviate e i valori numerici JavaScript per quantità e peso. Questo esercizio definisce il peso come 0–100 kg con incrementi di 0,01 kg.
<!doctype html>
<html lang="it">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Intervalli e passi numerici</title>
<style>
body { margin: 24px; font-family: sans-serif; }
label { display: block; margin: 16px 0 6px; }
input { width: 12rem; max-width: 100%; box-sizing: border-box; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; }
</style>
</head>
<body>
<h1>Inserisci quantità e peso</h1>
<form id="demo">
<label for="quantity">Quantità (1–10, unità intere)</label>
<input id="quantity" name="quantity" type="number"
min="1" max="10" step="1" value="2" required>
<label for="weight">Peso (0–100 kg, passi di 0,01 kg)</label>
<input id="weight" name="weight" type="number"
min="0" max="100" step="0.01" value="1.25" required>
<p><button type="submit">Mostra valori</button>
<button type="reset">Ripristina</button></p>
</form>
<pre id="result" aria-live="polite"></pre>
<script>
const form = document.querySelector('#demo');
const quantity = document.querySelector('#quantity');
const weight = document.querySelector('#weight');
const result = document.querySelector('#result');
form.addEventListener('submit', (event) => {
event.preventDefault();
result.textContent = JSON.stringify({
formData: [...new FormData(form).entries()],
numbers: { quantity: quantity.valueAsNumber, weight: weight.valueAsNumber }
}, null, 2);
});
form.addEventListener('input', () => { result.textContent = ''; });
form.addEventListener('reset', () => { result.textContent = ''; });
</script>
</body>
</html>- Invia i valori iniziali.
formData(stringhe):"2","1.25";numbers(numeri):2,1.25. - Imposta la quantità su 11 e invia per attivare la convalida del massimo. Impostala su 2,5 per la convalida degli step, oppure cancellala per la convalida obbligatoria. Ripristina la quantità a 2.
- Un peso di 1,23 viene inviato, ma 1,234 non rientra nell'intervallo. La formattazione con numero fisso di decimali differisce dagli intervalli numerici validi.
- Modificare solo la
step="1"della quantità instep="3"e riaprire il file. Perchémin="1", il valore iniziale 2 non è valido ma 4 è valido. Ripristinare il passaggio a 1 successivamente. - Il reset riporta la quantità a 2 e il peso a 1,25 e cancella il risultato.
Distinguere gli identificatori che sembrano numerici
Numeri di telefono, codici postali e ID di iscrizione spesso richiedono che la stringa originale venga preservata piuttosto che trattata aritmeticamente. Gli zeri iniziali o i trattini possono essere importanti. Considerare type="tel" per i telefoni e type="text" inputmode="numeric" per gli identificatori che sembrano numerici. inputmode indica una tastiera; non è una regola di convalida numerica.
Gli input numerici non devono usare maxlength o pattern per vincolare il numero di cifre o i modelli di espressioni regolari. Imposta la larghezza con CSS invece di usare size. I browser differiscono nel comportamento di inserimento dei caratteri, nelle frecce di incremento e nella visualizzazione del separatore decimale, quindi non fare affidamento su un aspetto o su un comportamento di blocco specifico.
Gestire i numeri in JavaScript e sul server
input.value e i valori ordinari inviati tramite form sono stringhe. Usa valueAsNumber per un numero; restituisce NaN quando è vuoto o non convertibile. Convertire una stringa vuota con Number() produce zero, quindi distingue prima un valore vuoto se significa qualcosa di diverso da zero.
La sola convalida tramite browser non rende un valore affidabile. Valida anche sul server il formato numerico, la finitezza, l'intervallo e il passo. Per calcoli che richiedono precisione decimale, come importi, tieni conto dell'errore del numero in virgola mobile binario di JavaScript e utilizza numeri interi nella più piccola unità di valuta o un approccio decimale appropriato.
Il riferimento all'input numerico MDN spiega gli attributi e le regole della base del passo.
