Het element <input type="number">

Waarde

Een getal dat de waarde vertegenwoordigt van het getal dat in het invoerveld is ingevoerd. U kunt een standaardwaarde voor het invoerveld instellen door een getal op te nemen in het value-attribuut, zoals hier:

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

Aanvullende attributen

Naast de attributen die door alle <input>-typen worden ondersteund, ondersteunen invoervelden van het type number de volgende attributen.

list

De waarde van het list-attribuut is de id van een <datalist>-element dat zich in hetzelfde document bevindt. De <datalist> biedt een lijst met vooraf gedefinieerde waarden die aan de gebruiker worden voorgesteld voor dit invoerveld. Waarden in de lijst die niet compatibel zijn met het type worden niet opgenomen in de voorgestelde opties. De aangeboden waarden zijn suggesties, geen verplichtingen: gebruikers kunnen uit deze vooraf gedefinieerde lijst kiezen of een andere waarde opgeven.

max

De maximumwaarde die voor dit invoerveld wordt geaccepteerd. Als de value die in het element is ingevoerd deze waarde overschrijdt, voldoet het element niet aan de beperkingsvalidatie. Als de waarde van het max-attribuut geen getal is, heeft het element geen maximumwaarde.

Deze waarde moet groter dan of gelijk zijn aan de waarde van het min-attribuut.

min

De minimumwaarde die voor dit invoerveld wordt geaccepteerd. Als de value van het element kleiner is dan deze waarde, voldoet het element niet aan de beperkingsvalidatie. Als voor min een waarde is opgegeven die geen geldig getal is, heeft het invoerveld geen minimumwaarde.

Deze waarde moet kleiner dan of gelijk zijn aan de waarde van het max-attribuut.

placeholder

Het placeholder-attribuut is een tekenreeks die een korte aanwijzing geeft over wat voor soort informatie in het veld wordt verwacht. Het moet een woord of korte zin zijn die het verwachte type gegevens laat zien, in plaats van een verklarende boodschap. De tekst mag geen regeleinden of regelterugloop bevatten.

Als de inhoud van het besturingselement één schrijfrichting heeft (LTR of RTL), maar de placeholder in de tegenovergestelde schrijfrichting moet worden weergegeven, kunt u Unicode-opmaaktekens voor het bidirectionele algoritme gebruiken om de schrijfrichting binnen de placeholder te overschrijven; zie How to use Unicode controls for bidi text voor meer informatie.

readonly

Een booleaans attribuut dat, indien aanwezig, betekent dat dit veld niet door de gebruiker kan worden bewerkt. De value kan echter nog steeds worden gewijzigd door JavaScript-code die de HTMLInputElement-eigenschap value rechtstreeks instelt.

step

Het step-attribuut is een getal dat de granulariteit specificeert waaraan de waarde moet voldoen, of de speciale waarde any, die hieronder wordt beschreven. Alleen waarden die een heel aantal stappen van de stapbasis verwijderd zijn, zijn geldig. De stapbasis is min indien opgegeven, anders value, of 0 als geen van beide is opgegeven.

De standaard stapwaarde voor number-invoervelden is 1, waardoor alleen gehele getallen kunnen worden ingevoerd — tenzij de stapbasis geen geheel getal is.

Een tekenreekswaarde van any betekent dat er geen stapgrootte wordt opgelegd en dat elke waarde is toegestaan (behoudens andere beperkingen, zoals min en max).

Number-invoervelden gebruiken

Het invoertype number moet alleen worden gebruikt voor incrementele getallen, vooral wanneer het stapsgewijs verhogen en verlagen met een spinbutton nuttig is voor de gebruikerservaring. Het invoertype number is niet geschikt voor waarden die toevallig alleen uit cijfers bestaan, maar strikt genomen geen getal zijn, zoals postcodes in veel landen of creditcardnummers. Overweeg voor niet-numerieke invoer een ander invoertype te gebruiken, zoals <input type="tel"> of een ander <input>-type met het inputmode-attribuut:

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

<input type="number">-elementen kunnen uw werk vereenvoudigen bij het bouwen van de gebruikersinterface en logica voor het invoeren van getallen in een formulier. Wanneer u een number-invoerveld maakt met de juiste type-waarde, number, krijgt u automatische validatie dat de ingevoerde tekst een getal is, en meestal een set omhoog- en omlaagknoppen om de waarde stapsgewijs te verhogen en te verlagen.

Mobiele browsers helpen de gebruikerservaring verder te verbeteren door een speciaal toetsenbord te tonen dat beter geschikt is voor het invoeren van getallen wanneer de gebruiker een waarde probeert in te voeren.

Een eenvoudig number-invoerveld

In zijn eenvoudigste vorm kan een number-invoerveld als volgt worden geïmplementeerd:

<label for="ticketNum">Number of tickets you would like to buy:</label>
<input id="ticketNum" type="number" name="ticketNum" value="0" />

Een number-invoerveld wordt als geldig beschouwd wanneer het leeg is en wanneer één getal is ingevoerd, maar is in alle andere gevallen ongeldig. Als het required-attribuut wordt gebruikt, wordt het invoerveld niet langer als geldig beschouwd wanneer het leeg is.

Placeholders

Soms is het nuttig om in de context een aanwijzing te geven over welke vorm de invoergegevens moeten hebben. Dit kan vooral belangrijk zijn als het paginaontwerp geen beschrijvende labels biedt voor elk <input>. Hier komen placeholders om de hoek kijken. Een placeholder is een waarde die meestal wordt gebruikt om een aanwijzing te geven over het formaat dat de value van het invoerveld moet hebben. Deze wordt weergegeven in het invoerveld wanneer de value van het element "" is. Zodra gegevens in het veld worden ingevoerd, verdwijnt de placeholder; als het veld weer wordt leeggemaakt, verschijnt de placeholder opnieuw.

Hier hebben we een number-invoerveld met de placeholder "Multiple of 10". Let op hoe de placeholder verdwijnt en weer verschijnt terwijl u de inhoud van het invoerveld wijzigt.

<input type="number" placeholder="Multiple of 10" />

Stapgrootte bepalen

Standaard verhogen en verlagen de omhoog- en omlaagknoppen die worden geboden om het getal stapsgewijs aan te passen, de waarde met 1. U kunt dit wijzigen door een step-attribuut op te geven, waarvan de waarde een getal is dat de stapgrootte specificeert. Ons bovenstaande voorbeeld bevat een placeholder die aangeeft dat de waarde een veelvoud van 10 moet zijn, dus het is logisch om een step-waarde van 10 toe te voegen:

<input type="number" placeholder="multiple of 10" step="10" />

In dit voorbeeld ziet u dat de stappijltjes omhoog en omlaag de waarde telkens met 10 verhogen en verlagen, niet met 1. U kunt nog steeds handmatig een getal invoeren dat geen veelvoud van 10 is, maar dat wordt dan als ongeldig beschouwd.

Minimum- en maximumwaarden opgeven

U kunt de attributen min en max gebruiken om een minimum- en maximumwaarde op te geven die het veld mag hebben. Laten we bijvoorbeeld ons voorbeeld een minimum van 0 en een maximum van 100 geven:

<input type="number" placeholder="multiple of 10" step="10" min="0" max="100" />

In deze bijgewerkte versie ziet u dat de stapknoppen omhoog en omlaag u niet onder 0 of boven 100 laten gaan. U kunt nog steeds handmatig een getal buiten deze grenzen invoeren, maar dat wordt als ongeldig beschouwd.

Decimale waarden toestaan

Een probleem met number-invoervelden is dat hun stapgrootte standaard 1 is. Als u probeert een getal met een decimale waarde in te voeren dat geen geheel getal is (zoals "1.1"), wordt dit als ongeldig beschouwd. Merk op dat waarden zoals "1.0" als geldig worden beschouwd, omdat ze numeriek gelijk zijn aan gehele getallen. Als u waarden met breuken wilt invoeren, moet u dit weerspiegelen in de step-waarde (bijvoorbeeld step="0.01" om decimalen tot op twee decimalen toe te staan). Hier is een eenvoudig voorbeeld:

<input type="number" placeholder="1.0" step="0.01" min="0" max="10" />

U ziet dat dit voorbeeld elke waarde tussen 0.0 en 10.0 toestaat, met decimalen tot op twee cijfers. "9.52" is bijvoorbeeld geldig, maar "9.521" niet.

Als u willekeurige decimale waarden wilt toestaan, kunt u de step-waarde instellen op "any".

Invoergrootte bepalen

<input>-elementen van het type number ondersteunen geen formuliergrootte-attributen zoals size. U zult uw toevlucht moeten nemen tot CSS om de grootte van deze besturingselementen te wijzigen.

Om bijvoorbeeld de breedte van het invoerveld aan te passen zodat deze net breed genoeg is om een getal van drie cijfers in te voeren, kunnen we onze HTML wijzigen zodat er een id wordt toegevoegd en onze placeholder inkorten, omdat het veld te smal zal zijn voor de tekst die we tot nu toe hebben gebruikt:

<input
  type="number"
  placeholder="x10"
  step="10"
  min="0"
  max="100"
  id="number" />

Vervolgens voegen we wat CSS toe om de breedte van het element met de id-selector #number te versmallen:

#number {
  width: 3em;
}

Het resultaat ziet er zo uit:

Voorgestelde waarden aanbieden

U kunt een lijst met standaardopties aanbieden waaruit de gebruiker kan kiezen door het list-attribuut op te geven, dat als waarde de id bevat van een <datalist>, die op zijn beurt één <option>-element per voorgestelde waarde bevat. De value van elke option is de bijbehorende voorgestelde waarde voor het invoerveld voor getallen.

<input id="ticketNum" type="number" name="ticketNum" list="defaultNumbers" />
<span class="validity"></span>

<datalist id="defaultNumbers">
  <option value="10045678"></option>
  <option value="103421"></option>
  <option value="11111111"></option>
  <option value="12345678"></option>
  <option value="12999922"></option>
</datalist>

Validatie

We hebben al een aantal validatiefuncties van number-invoervelden genoemd, maar laten we ze nu nog eens bekijken:

• <input type="number">-elementen maken automatisch elke invoer ongeldig die geen getal is (of leeg, tenzij required is opgegeven).
• U kunt het required-attribuut gebruiken om een lege invoer ongeldig te maken. (Met andere woorden, het invoerveld moet worden ingevuld.)
• U kunt het step-attribuut gebruiken om geldige waarden te beperken tot een bepaalde reeks stappen (bijvoorbeeld veelvouden van 10).
• U kunt de attributen min en max gebruiken om geldige waarden te beperken tot een onder- en bovengrens.

Het volgende voorbeeld demonstreert alle bovenstaande functies, en gebruikt bovendien wat CSS om geldig- en ongeldig-pictogrammen weer te geven, afhankelijk van de waarde van het input-element:

<form>
  <div>
    <label for="balloons">Number of balloons to order (multiples of 10):</label>
    <input
      id="balloons"
      type="number"
      name="balloons"
      step="10"
      min="0"
      max="100"
      required />
    <span class="validity"></span>
  </div>
  <div>
    <input type="submit" />
  </div>
</form>

Probeer het formulier te verzenden met verschillende ongeldige waarden ingevoerd — bijvoorbeeld geen waarde; een waarde onder 0 of boven 100; een waarde die geen veelvoud van 10 is; of een niet-numerieke waarde — en bekijk hoe de foutmeldingen die de browser geeft, verschillen bij de verschillende gevallen.

De CSS die op dit voorbeeld wordt toegepast, is als volgt:

div {
  margin-bottom: 10px;
}

input:invalid + span::after {
  content: "✖";
  padding-left: 5px;
}

input:valid + span::after {
  content: "✓";
  padding-left: 5px;
}

Hier gebruiken we de pseudoklassen :invalid en :valid om een passend ongeldig- of geldig-pictogram weer te geven als gegenereerde inhoud op het aangrenzende <span>-element, als visuele indicator van geldigheid.

We plaatsen dit in een apart <span>-element voor extra flexibiliteit. Sommige browsers geven gegenereerde inhoud niet erg effectief weer bij bepaalde typen formulierinvoer. (Lees bijvoorbeeld de sectie over validatie van <input type="date">.)

Patroonvalidatie

<input type="number">-elementen ondersteunen het gebruik van het pattern-attribuut niet om ervoor te zorgen dat ingevoerde waarden voldoen aan een specifiek regex-patroon.

De reden hiervoor is dat number-invoervelden niet geldig zijn als ze iets anders dan cijfers bevatten, en u kunt het minimum- en maximumaantal geldige cijfers beperken met behulp van de attributen min en max (zoals hierboven uitgelegd).

Toegankelijkheid

De impliciete rol voor het <input type="number">-element is spinbutton. Als spinbutton geen belangrijk kenmerk is voor uw formulierbesturingselement, overweeg dan om type="number" niet te gebruiken. Gebruik in plaats daarvan inputmode="numeric" samen met een pattern-attribuut dat de tekens beperkt tot cijfers en bijbehorende tekens. Bij <input type="number"> bestaat het risico dat gebruikers per ongeluk een getal verhogen wanneer ze iets anders proberen te doen. Bovendien, als gebruikers proberen iets in te voeren dat geen getal is, krijgen ze geen expliciete feedback over wat ze verkeerd doen.

Overweeg ook het gebruik van het autocomplete-attribuut om gebruikers te helpen formulieren sneller en met minder kans op fouten in te vullen. Stel bijvoorbeeld autocomplete="postal-code" in om automatisch invullen voor een postcodeveld mogelijk te maken.

Voorbeelden

We hebben al besproken dat de standaard stapgrootte 1 is, en dat u het step-attribuut kunt gebruiken om decimale invoer toe te staan. Laten we dit nader bekijken.

In het volgende voorbeeld staat een formulier voor het invoeren van de lengte van de gebruiker. Standaard accepteert het een lengte in meters, maar u kunt op de betreffende knop klikken om het formulier te wijzigen zodat het in plaats daarvan voet en inch accepteert. Het invoerveld voor de lengte in meters accepteert decimalen tot op twee cijfers.

De HTML ziet er als volgt uit:

<form>
  <div class="metersInputGroup">
    <label for="meters">Enter your height — meters:</label>
    <input
      id="meters"
      type="number"
      name="meters"
      step="0.01"
      min="0"
      placeholder="e.g. 1.78"
      required />
    <span class="validity"></span>
  </div>
  <div class="feetInputGroup">
    <span>Enter your height — </span>
    <label for="feet">feet:</label>
    <input id="feet" type="number" name="feet" min="0" step="1" />
    <span class="validity"></span>
    <label for="inches">inches:</label>
    <input id="inches" type="number" name="inches" min="0" max="11" step="1" />
    <span class="validity"></span>
  </div>
  <div>
    <input
      type="button"
      class="meters"
      value="Enter height in feet and inches" />
  </div>
  <div>
    <input type="submit" value="Submit form" />
  </div>
</form>

U zult zien dat we veel van de attributen gebruiken die we eerder in het artikel al hebben bekeken. Omdat we een metersvaarde in centimeters willen accepteren, hebben we de step-waarde ingesteld op 0.01, zodat waarden zoals 1.78 niet als ongeldig worden beschouwd. We hebben ook een placeholder voor dat invoerveld opgegeven.

We hebben de invoervelden voor voet en inch aanvankelijk verborgen met style="display: none;", zodat meters het standaard invoertype is.

Nu naar de CSS. Deze lijkt sterk op de validatiestyling die we eerder zagen; niets bijzonders hier.

div {
  margin-bottom: 10px;
  position: relative;
}

input[type="number"] {
  width: 100px;
}

input + span {
  padding-right: 30px;
}

input:invalid + span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
}

input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
}

En ten slotte de JavaScript:

const metersInputGroup = document.querySelector(".metersInputGroup");
const feetInputGroup = document.querySelector(".feetInputGroup");
const metersInput = document.querySelector("#meters");
const feetInput = document.querySelector("#feet");
const inchesInput = document.querySelector("#inches");
const switchBtn = document.querySelector('input[type="button"]');

feetInputGroup.style.display = "none"; // Hide feet/inches inputs initially

switchBtn.addEventListener("click", () => {
  if (switchBtn.getAttribute("class") === "meters") {
    switchBtn.setAttribute("class", "feet");
    switchBtn.value = "Enter height in meters";

    metersInputGroup.style.display = "none";
    feetInputGroup.style.display = "block";

    feetInput.setAttribute("required", "");
    inchesInput.setAttribute("required", "");
    metersInput.removeAttribute("required");

    metersInput.value = "";
  } else {
    switchBtn.setAttribute("class", "meters");
    switchBtn.value = "Enter height in feet and inches";

    metersInputGroup.style.display = "block";
    feetInputGroup.style.display = "none";

    feetInput.removeAttribute("required");
    inchesInput.removeAttribute("required");
    metersInput.setAttribute("required", "");

    feetInput.value = "";
    inchesInput.value = "";
  }
});

Na het declareren van een aantal variabelen wordt een event listener toegevoegd aan de button om het schakelmechanisme te regelen. Dit houdt in dat de class en het <label> van de knop worden gewijzigd, en dat de weergavewaarden van de twee sets invoervelden worden bijgewerkt wanneer op de knop wordt gedrukt.

(Merk op dat we hier niet heen en weer converteren tussen meters en voet/inch, wat een webapplicatie in de praktijk waarschijnlijk wel zou doen.)

Technische samenvatting

Zie ook

• <input>
• <input type="tel">