Het element <input type="tel">

Waarde

Het value-attribuut van het <input>-element bevat een tekenreeks die ofwel een telefoonnummer voorstelt, ofwel een lege tekenreeks is ("").

Aanvullende attributen

Naast de globale attributen en de attributen die van toepassing zijn op alle <input>-elementen, ongeacht hun type, ondersteunen telefoonnummerinvoervelden 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 vereisten: gebruikers kunnen uit deze vooraf gedefinieerde lijst kiezen of een andere waarde opgeven.

maxlength

De maximale tekenreekslengte (gemeten in UTF-16-code-eenheden) die de gebruiker in het telefoonnummerveld kan invoeren. Dit moet een geheel getal van 0 of hoger zijn. Als er geen maxlength is opgegeven, of een ongeldige waarde is opgegeven, heeft het telefoonnummerveld geen maximale lengte. Deze waarde moet ook groter dan of gelijk zijn aan de waarde van minlength.

Het invoerveld zal de beperkingsvalidatie niet doorstaan als de lengte van de tekst die in het veld is ingevoerd, groter is dan maxlength UTF-16-code-eenheden. Beperkingsvalidatie wordt alleen toegepast wanneer de waarde door de gebruiker wordt gewijzigd.

minlength

De minimale tekenreekslengte (gemeten in UTF-16-code-eenheden) die de gebruiker in het telefoonnummerveld kan invoeren. Dit moet een niet-negatief geheel getal zijn dat kleiner is dan of gelijk is aan de waarde die is opgegeven bij maxlength. Als er geen minlength is opgegeven, of een ongeldige waarde is opgegeven, heeft het telefoonnummerveld geen minimale lengte.

Het telefoonnummerveld zal de beperkingsvalidatie niet doorstaan als de lengte van de tekst die in het veld is ingevoerd, korter is dan minlength UTF-16-code-eenheden. Beperkingsvalidatie wordt alleen toegepast wanneer de waarde door de gebruiker wordt gewijzigd.

pattern

Het pattern-attribuut is, indien opgegeven, een reguliere expressie waaraan de value van het invoerveld moet voldoen om de beperkingsvalidatie te doorstaan. Het moet een geldige JavaScript-reguliere expressie zijn, zoals gebruikt door het RegExp-type, en zoals gedocumenteerd in onze handleiding over reguliere expressies; de 'u'-vlag wordt opgegeven bij het compileren van de reguliere expressie, zodat het patroon wordt behandeld als een reeks Unicode-codepunten in plaats van als ASCII. Er mogen geen schuine strepen rond de patrooontekst worden opgegeven.

Als het opgegeven patroon niet is opgegeven of ongeldig is, wordt er geen reguliere expressie toegepast en wordt dit attribuut volledig genegeerd.

Zie Patroonvalidatie hieronder voor details en een voorbeeld.

placeholder

Het placeholder-attribuut is een tekenreeks die de gebruiker 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 regeleindetekens 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 opmaaktekens van het Unicode-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 ervan kan echter nog steeds worden gewijzigd door JavaScript-code die de eigenschap value van HTMLInputElement rechtstreeks instelt.

size

Het size-attribuut is een numerieke waarde die aangeeft hoeveel tekens breed het invoerveld moet zijn. De waarde moet een getal groter dan nul zijn, en de standaardwaarde is 20. Omdat tekenbreedtes variëren, is dit mogelijk niet exact en er mag niet op vertrouwd worden dat dit wel zo is; het resulterende invoerveld kan smaller of breder zijn dan het opgegeven aantal tekens, afhankelijk van de tekens en het gebruikte lettertype (instellingen van font).

Dit stelt geen limiet in op hoeveel tekens de gebruiker in het veld kan invoeren. Het geeft alleen bij benadering aan hoeveel er tegelijk zichtbaar zijn. Gebruik het maxlength-attribuut om een bovengrens voor de lengte van de ingevoerde gegevens in te stellen.

Tel-invoervelden gebruiken

Telefoonnummers zijn een zeer veelvoorkomend type gegevens dat op het web wordt verzameld. Wanneer u bijvoorbeeld een registratie- of e-commercesite maakt, moet u de gebruiker waarschijnlijk om een telefoonnummer vragen, voor zakelijke doeleinden of voor noodcontact. Gezien hoe vaak telefoonnummers worden ingevoerd, is het jammer dat een "one size fits all"-oplossing voor het valideren van telefoonnummers niet praktisch is.

Gelukkig kunt u rekening houden met de vereisten van uw eigen site en zelf een passend validatieniveau implementeren. Zie Validatie hieronder voor details.

Aangepaste toetsenborden

Een van de belangrijkste voordelen van <input type="tel"> is dat het ervoor zorgt dat mobiele browsers een speciaal toetsenbord tonen voor het invoeren van telefoonnummers. Hier ziet u bijvoorbeeld hoe de toetsenborden eruitzien op een paar apparaten.

Firefox voor Android	WebKit iOS (Safari/Chrome/Firefox)

Een eenvoudig tel-invoerveld

In zijn meest eenvoudige vorm kan een tel-invoerveld als volgt worden geïmplementeerd:

<label for="telNo">Phone number:</label>
<input id="telNo" name="telNo" type="tel" />

Er gebeurt hier niets magisch. Bij verzending naar de server zouden de gegevens van het bovenstaande invoerveld bijvoorbeeld worden weergegeven als telNo=+12125553151.

Placeholders

Soms is het nuttig om een contextuele aanwijzing te geven over welke vorm de ingevoerde gegevens 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 de vorm laat zien die de value moet aannemen door een voorbeeld van een geldige waarde te tonen, die binnen het bewerkingsvak wordt weergegeven wanneer de value van het element "" is. Zodra er gegevens in het vak worden ingevoerd, verdwijnt de placeholder; als het vak weer leeg wordt gemaakt, verschijnt de placeholder opnieuw.

Hier hebben we een tel-invoerveld met de placeholder 123-4567-8901. Let op hoe de placeholder verdwijnt en weer verschijnt terwijl u de inhoud van het bewerkingsveld wijzigt.

<input id="telNo" name="telNo" type="tel" placeholder="123-4567-8901" />

De grootte van het invoerveld regelen

U kunt niet alleen de fysieke lengte van het invoervak regelen, maar ook de minimale en maximale toegestane lengtes voor de ingevoerde tekst zelf.

Fysieke grootte van het invoerelement

De fysieke grootte van het invoervak kan worden geregeld met het size-attribuut. Hiermee kunt u het aantal tekens opgeven dat het invoervak tegelijk kan weergeven. In dit voorbeeld is het tel-bewerkingsvak bijvoorbeeld 20 tekens breed:

<input id="telNo" name="telNo" type="tel" size="20" />

Lengte van de waarde van het element

De size staat los van de lengtebeperking op het ingevoerde telefoonnummer. U kunt een minimale lengte, in tekens, opgeven voor het ingevoerde telefoonnummer met behulp van het minlength-attribuut; gebruik op vergelijkbare wijze maxlength om de maximale lengte van het ingevoerde telefoonnummer in te stellen.

Het onderstaande voorbeeld creëert een 20 tekens brede invoerbox voor telefoonnummers, waarbij vereist wordt dat de inhoud niet korter is dan 9 tekens en niet langer dan 14 tekens.

<input
  id="telNo"
  name="telNo"
  type="tel"
  size="20"
  minlength="9"
  maxlength="14" />

Standaardopties opgeven

Eén standaardwaarde opgeven met het value-attribuut

Zoals altijd kunt u een standaardwaarde opgeven voor een tel-invoervak door het value-attribuut in te stellen:

<input id="telNo" name="telNo" type="tel" value="333-4444-4444" />

Voorgestelde waarden aanbieden

Als u het nog verder wilt uitbreiden, kunt u een lijst met standaard telefoonnummerwaarden aanbieden waaruit de gebruiker kan kiezen. Gebruik hiervoor het list-attribuut. Dit beperkt de gebruiker niet tot die opties, maar stelt hem wel in staat om veelgebruikte telefoonnummers sneller te selecteren. Dit biedt ook aanwijzingen voor autocomplete. Het list-attribuut geeft de ID op van een <datalist>-element, dat op zijn beurt één <option>-element per voorgestelde waarde bevat; de value van elke option is de bijbehorende voorgestelde waarde voor het telefoonnummerinvoervak.

<label for="telNo">Phone number: </label>
<input id="telNo" name="telNo" type="tel" list="defaultTels" />

<datalist id="defaultTels">
  <option value="111-1111-1111"></option>
  <option value="122-2222-2222"></option>
  <option value="333-3333-3333"></option>
  <option value="344-4444-4444"></option>
</datalist>

Met het <datalist>-element en de bijbehorende <option>-elementen op hun plaats, biedt de browser de opgegeven waarden als mogelijke waarden voor het telefoonnummer aan; dit wordt doorgaans gepresenteerd als een pop-up of vervolgkeuzemenu met de suggesties. Hoewel de specifieke gebruikerservaring van browser tot browser kan verschillen, wordt er doorgaans, wanneer u in het bewerkingsvak klikt, een vervolgkeuzelijst met voorgestelde telefoonnummers weergegeven. Terwijl de gebruiker vervolgens typt, wordt de lijst aangepast om alleen gefilterde overeenkomende waarden te tonen. Elk getypt teken beperkt de lijst verder totdat de gebruiker een keuze maakt of een aangepaste waarde intypt.

Hier is een schermafbeelding van hoe dat eruit zou kunnen zien:

Validatie

Zoals we eerder al hebben aangehaald, is het behoorlijk lastig om een one-size-fits-all clientside-validatieoplossing voor telefoonnummers aan te bieden. Wat kunnen we dus doen? Laten we enkele opties bekijken.

Telefoonnummers verplicht maken

U kunt ervoor zorgen dat een leeg invoerveld ongeldig is en niet naar de server wordt verzonden, door het required-attribuut te gebruiken. Laten we bijvoorbeeld deze HTML gebruiken:

<form>
  <div>
    <label for="telNo">Enter a telephone number (required): </label>
    <input id="telNo" name="telNo" type="tel" required />
    <span class="validity"></span>
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>

En laten we de volgende CSS opnemen om geldige invoer te markeren met een vinkje en ongeldige invoer met een kruisje:

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;
  color: darkred;
}

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

De uitvoer ziet er zo uit:

Patroonvalidatie

Als u de ingevoerde nummers verder wilt beperken zodat ze ook aan een specifiek patroon moeten voldoen, kunt u het pattern-attribuut gebruiken, dat als waarde een reguliere expressie neemt waaraan ingevoerde waarden moeten voldoen.

In dit voorbeeld gebruiken we dezelfde CSS als voorheen, maar onze HTML wordt als volgt gewijzigd:

<form>
  <div>
    <label for="telNo">
      Enter a telephone number (in the form xxx-xxx-xxxx):
    </label>
    <input
      id="telNo"
      name="telNo"
      type="tel"
      required
      pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" />
    <span class="validity"></span>
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>

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;
  color: darkred;
}

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

Merk op hoe de ingevoerde waarde als ongeldig wordt gemeld tenzij deze overeenkomt met het patroon xxx-xxx-xxxx; zo wordt 41-323-421 bijvoorbeeld niet geaccepteerd. 800-VOORBEELD ook niet. 865-555-6502 wordt echter wel geaccepteerd. Dit specifieke patroon is uiteraard alleen bruikbaar voor bepaalde landinstellingen — in een echte toepassing zou u het gebruikte patroon waarschijnlijk moeten laten variëren afhankelijk van de landinstelling van de gebruiker.

Voorbeelden

In dit voorbeeld presenteren we een <select>-element waarmee de gebruiker kan kiezen in welk land hij zich bevindt, en een reeks <input type="tel">-elementen waarmee hij elk deel van zijn telefoonnummer kan invoeren; er is geen reden waarom u niet meerdere tel-invoervelden zou kunnen hebben.

Elk invoerveld heeft een placeholder-attribuut om ziende gebruikers een aanwijzing te geven over wat ze moeten invoeren, een pattern om een specifiek aantal tekens voor het betreffende gedeelte af te dwingen, en een aria-label-attribuut met een aanwijzing die aan schermlezergebruikers wordt voorgelezen over wat ze moeten invoeren.

<form>
  <div>
    <label for="country">Choose your country:</label>
    <select id="country" name="country">
      <option>UK</option>
      <option selected>US</option>
      <option>Germany</option>
    </select>
  </div>
  <div>
    <p>Enter your telephone number:</p>
    <span class="areaDiv">
      <input
        id="areaNo"
        name="areaNo"
        type="tel"
        required
        placeholder="Area code"
        pattern="[0-9]{3}"
        aria-label="Area code" />
      <span class="validity"></span>
    </span>
    <span class="number1Div">
      <input
        id="number1"
        name="number1"
        type="tel"
        required
        placeholder="First part"
        pattern="[0-9]{3}"
        aria-label="First part of number" />
      <span class="validity"></span>
    </span>
    <span class="number2Div">
      <input
        id="number2"
        name="number2"
        type="tel"
        required
        placeholder="Second part"
        pattern="[0-9]{4}"
        aria-label="Second part of number" />
      <span class="validity"></span>
    </span>
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>

De JavaScript bevat een onchange-gebeurtenishandler die, wanneer de waarde van <select> wordt gewijzigd, het pattern, placeholder en aria-label van het <input>-element aanpast aan het formaat van telefoonnummers in dat land/gebied.

const selectElem = document.querySelector("select");
const inputElems = document.querySelectorAll("input");

selectElem.onchange = () => {
  for (const e of inputElems) {
    e.value = "";
  }

  if (selectElem.value === "US") {
    inputElems[2].parentNode.style.display = "inline";

    inputElems[0].placeholder = "Area code";
    inputElems[0].pattern = "[0-9]{3}";

    inputElems[1].placeholder = "First part";
    inputElems[1].pattern = "[0-9]{3}";
    inputElems[1].setAttribute("aria-label", "First part of number");

    inputElems[2].placeholder = "Second part";
    inputElems[2].pattern = "[0-9]{4}";
    inputElems[2].setAttribute("aria-label", "Second part of number");
  } else if (selectElem.value === "UK") {
    inputElems[2].parentNode.style.display = "none";

    inputElems[0].placeholder = "Area code";
    inputElems[0].pattern = "[0-9]{3,6}";

    inputElems[1].placeholder = "Local number";
    inputElems[1].pattern = "[0-9]{4,8}";
    inputElems[1].setAttribute("aria-label", "Local number");
  } else if (selectElem.value === "Germany") {
    inputElems[2].parentNode.style.display = "inline";

    inputElems[0].placeholder = "Area code";
    inputElems[0].pattern = "[0-9]{3,5}";

    inputElems[1].placeholder = "First part";
    inputElems[1].pattern = "[0-9]{2,4}";
    inputElems[1].setAttribute("aria-label", "First part of number");

    inputElems[2].placeholder = "Second part";
    inputElems[2].pattern = "[0-9]{4}";
    inputElems[2].setAttribute("aria-label", "Second part of number");
  }
};

Het voorbeeld ziet er als volgt uit:

Dit is een interessant idee, dat laat zien wat een mogelijke oplossing is voor het probleem van het omgaan met internationale telefoonnummers. U zou het voorbeeld natuurlijk moeten uitbreiden om het juiste patroon voor mogelijk elk land aan te bieden, wat een hoop werk zou zijn, en er zou nog steeds geen waterdichte garantie zijn dat gebruikers hun nummers correct zouden invoeren.

Het doet u zich afvragen of het de moeite waard is om al deze moeite aan de clientzijde te doen, terwijl u de gebruiker ook gewoon zijn nummer in elk gewenst formaat aan de clientzijde zou kunnen laten invoeren en het vervolgens op de server zou kunnen valideren en opschonen. Maar deze keuze is aan u.

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;
  color: darkred;
}

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

Technische samenvatting

Zie ook

• <input>
• <input type="text">
• <input type="email">