HTML input type=number: min, max, step, validatie | We.Inc
Test input type=number live: stel min, max en step in, lees valueAsNumber en elke validity-vlag, verwijder de spinner en ontdek wanneer inputmode=numeric het betere veld is.
Gebruik input type="number" voor echte hoeveelheden zoals een leeftijd, een prijs of een aantal. min en max bepalen het toegestane bereik, step bepaalt de stapgrootte (standaard 1, of any voor vrije decimalen), en valueAsNumber geeft u een getal, of NaN als het veld leeg is. Gebruik voor kaartnummers en postcodes in plaats daarvan type="text" met inputmode="numeric".
Attributen van een getalveld
Attribuut
Voorbeeld
Effect
min="0"
Lagere waarden zakken voor de validatie (rangeUnderflow)
max="10"
Hogere waarden zakken voor de validatie (rangeOverflow)
step="0.01" or step="any"
Standaard 1; waarden buiten de stap zakken (stepMismatch)
Een leeg veld zakt (valueMissing)
list="sizes"
Stelt waarden voor uit een datalist
placeholder="e.g. 2"
Hint die zichtbaar is zolang het veld leeg is, nooit een label
Getalvelden lijken eenvoudig, maar de regels rond stappen, lege waarden en de spinner zetten mensen op het verkeerde been. Stel de attributen in de tester in, typ iets in het veld en zie de ruwe waarde, het geparste getal en elke validity-vlag meeveranderen terwijl u typt.
Vul waarden in voor min, max en step. Laat een vak leeg om dat attribuut weg te laten.
Typ in het testveld of gebruik de pijltoetsen en de spinner.
Lees value, valueAsNumber en de validity-vlaggen in het paneel ernaast.
Kopieer de gegenereerde HTML zodra het veld zich gedraagt zoals u wilt.
Koppel het veld altijd aan een zichtbaar label-element; een placeholder verdwijnt zodra iemand begint te typen.
Lees valueAsNumber in plaats van value zelf te parsen, en controleer op NaN voordat u het gebruikt.
Valideer opnieuw op de server. Browsercontroles helpen mensen, maar iedereen kan een formulier zonder die controles versturen.
Voor bedragen accepteert step="0.01" centen; voor vrije decimalen gebruikt u step="any".
Gebruik geen type="number" voor velden zoals telefoonnummers, kaartnummers en postcodes, waar een spinner geen zin heeft.
Veelgestelde vragen
Waarom weigert mijn getalveld 1.5?
De standaard-step is 1, dus alleen hele getallen zijn geldig, tenzij de basis van de stap geen geheel getal is. Voeg step="0.5", step="0.01" of step="any" toe om decimalen te accepteren.
Wat geeft valueAsNumber terug voor een leeg veld?
NaN. De value-property geeft in hetzelfde geval een lege string terug. U kunt valueAsNumber ook instellen om een getal terug in het veld te schrijven.
Hoe verwijder ik de pijltjes uit een getalveld?
Zet appearance: textfield op de input. De pijltoetsen omhoog en omlaag veranderen de waarde nog steeds, want appearance verandert alleen het uiterlijk. WebKit en Blink tekenen de spinknoppen ook via pseudo-elementen, die het voorbeeld hieronder eveneens verbergt.
Moet ik type=number of inputmode=numeric gebruiken?
Gebruik type="number" als de waarde een echte hoeveelheid is en een spinner helpt. Gebruik type="text" met inputmode="numeric" en een pattern voor cijferreeksen zoals kaartnummers of postcodes, die identificatoren zijn in plaats van bedragen.
Is een leeg getalveld geldig?
Ja, tenzij het het required-attribuut heeft. Een getalveld telt als geldig als het leeg is of één geldig getal bevat.
Hoe validatie werkt
De browser controleert het veld tegen min, max en step, en zet voor elke overtreden regel een vlag op het validity-object. Het formulier wordt niet verstuurd zolang er een vlag gezet is, en met :invalid kunt u het veld opmaken.
Als het veld tekst bevat die de browser niet naar een getal kan omzetten, wordt validity.badInput true. Controleer die vlag, of valueAsNumber op NaN, voordat u vertrouwt op wat u leest; de tester toont precies wat uw browser meldt.
Toegankelijkheid en mobiel
Een getalveld wordt aan hulptechnologie aangeboden als spinbutton. Als op en neer stappen niet nuttig is voor de waarde, voorkomt een tekstveld met inputmode="numeric" onbedoelde wijzigingen door het scrollwiel of de pijltoetsen.
Vraag u af of de waarde een bedrag is waar u iets bij kunt optellen of van kunt aftrekken. Zo ja, gebruik een getalveld; is het een code die toevallig cijfers bevat, gebruik dan tekst.
Welk veld voor welk getal
type=number vergeleken met een numeriek tekstveld
Gegevens
Veld
Waarom
Aantal, leeftijd, gasten
type="number" min max
Een echte hoeveelheid; de spinner en bereikcontroles helpen