<input type="tel">

<label for="phone">
  Enter your phone number:<br />
  <small>Format: 123-456-7890</small>
</label>

<input
  type="tel"
  id="phone"
  name="phone"
  pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
  required />

label {
  display: block;
  font:
    1rem "Fira Sans",
    sans-serif;
}

input,
label {
  margin: 0.4rem 0;
}

Obwohl Eingaben vom Typ tel funktional identisch mit Standard-text Eingaben sind, erfüllen sie dennoch nützliche Zwecke. Am offensichtlichsten ist, dass mobile Browser — insbesondere auf Mobiltelefonen — möglicherweise eine spezielle Tastatur für die Eingabe von Telefonnummern anzeigen. Die Verwendung eines speziellen Eingabetyps für Telefonnummern erleichtert auch die Implementierung benutzerdefinierter Validierungen und die Verarbeitung von Telefonnummern.

Das value-Attribut des <input>-Elements enthält einen String, der entweder eine Telefonnummer darstellt oder ein Leerstring ist ("").

Zusätzlich zu den globalen Attributen und den Attributen, die auf alle <input>-Elemente unabhängig von ihrem Typ wirken, unterstützen Telefonnummerneingaben die folgenden Attribute.

Der Wert des list-Attributs ist die id eines im selben Dokument befindlichen <datalist>-Elements. Das <datalist> bietet eine Liste vordefinierter Werte, die dem Benutzer für diese Eingabe vorgeschlagen werden. Werte in der Liste, die mit dem type nicht kompatibel sind, werden nicht in die vorgeschlagenen Optionen aufgenommen. Die bereitgestellten Werte sind Vorschläge, keine Anforderungen: Benutzer können aus dieser vordefinierten Liste auswählen oder einen anderen Wert angeben.

Die maximale Zeichenlänge (gemessen in UTF-16-Codeeinheiten), die der Benutzer in das Telefonnummernfeld eingeben kann. Dies muss ein ganzzahliger Wert von 0 oder höher sein. Wenn kein maxlength angegeben oder ein ungültiger Wert angegeben wird, hat das Telefonnummernfeld keine maximale Länge. Dieser Wert muss außerdem größer oder gleich dem Wert von minlength sein.

Die Eingabe wird die Einschränkungsüberprüfung nicht bestehen, wenn die Länge des in das Feld eingegebenen Textes größer ist als maxlength UTF-16-Codeeinheiten. Die Einschränkungsüberprüfung wird nur angewendet, wenn der Wert durch den Benutzer geändert wird.

Die minimale Zeichenlänge (gemessen in UTF-16-Codeeinheiten), die der Benutzer in das Telefonnummernfeld eingeben kann. Dies muss ein nicht-negativer ganzzahliger Wert sein, der kleiner oder gleich dem von maxlength angegebenen Wert ist. Wenn kein minlength angegeben oder ein ungültiger Wert angegeben wird, hat das Telefonnummernfeld keine Mindestlänge.

Das Telefonnummernfeld wird die Einschränkungsüberprüfung nicht bestehen, wenn die Länge des in das Feld eingegebenen Textes kleiner ist als minlength UTF-16-Codeeinheiten. Die Einschränkungsüberprüfung wird nur angewendet, wenn der Wert durch den Benutzer geändert wird.

Das pattern-Attribut, wenn angegeben, ist ein regulärer Ausdruck, den der value der Eingabe für die Einschränkungsüberprüfung erfüllen muss. Es muss ein gültiger JavaScript-Regulärer-Ausdruck sein, wie er vom RegExp-Typ verwendet wird, und wie es in unserem Leitfaden zu regulären Ausdrücken dokumentiert ist; das 'u'-Flag wird beim Kompilieren des regulären Ausdrucks angegeben, damit das Muster als eine Folge von Unicode-Codepunkten behandelt wird, anstatt als ASCII. Es sollten keine Schrägstriche um den Mustertext angegeben werden.

Wenn das angegebene Muster nicht angegeben oder ungültig ist, wird kein regulärer Ausdruck angewendet und dieses Attribut wird vollständig ignoriert.

Weitere Informationen und ein Beispiel finden Sie unten unter Pattern validation.

Das placeholder-Attribut ist ein String, der dem Benutzer einen kurzen Hinweis darauf gibt, welche Art von Informationen im Feld erwartet werden. Es sollte ein Wort oder eine kurze Phrase sein, die den erwarteten Datentyp verdeutlicht, anstatt einer erklärenden Nachricht. Der Text darf keine Wagenrückläufe oder Zeilenumbrüche enthalten.

Wenn der Inhalt der Steuerung eine Richtung (LTR oder RTL) hat, aber der Platzhalter in der entgegengesetzten Richtung angezeigt werden muss, können Sie Unicode-Zeichen für die bidirektionale Algorithmenformatierung verwenden, um die Richtung im Platzhalter zu überschreiben; siehe Wie man Unicode-Steuerzeichen für bidi Text verwendet für weitere Informationen.

Ein boolesches Attribut, welches bei Vorhandensein bedeutet, dass dieses Feld vom Benutzer nicht bearbeitet werden kann. Sein value kann jedoch weiterhin direkt durch JavaScript-Code, der die HTMLInputElement-value-Eigenschaft setzt, geändert werden.

Das size-Attribut ist ein numerischer Wert, der angibt, wie viele Zeichen weit das Eingabefeld sein sollte. Der Wert muss eine Zahl größer als Null sein, und der Standardwert ist 20. Da sich die Zeichenbreiten unterscheiden, muss dies nicht exakt sein und sollte nicht darauf verlassen werden, dass es so ist; das resultierende Eingabefeld kann schmaler oder breiter als die angegebene Anzahl von Zeichen sein, abhängig von den Zeichen und der Schriftart (font-Einstellungen, die verwendet werden).

Dies setzt kein Limit, wie viele Zeichen der Benutzer in das Feld eingeben kann. Es gibt lediglich an, wie viele ungefähr gleichzeitig sichtbar sein können. Um ein oberes Limit für die Länge der Eingabedaten festzulegen, verwenden Sie das maxlength-Attribut.

Telefonnummern sind eine sehr häufig erfasste Datenform im Web. Wenn Sie eine Art von Registrierungs- oder E-Commerce-Website erstellen, müssen Sie wahrscheinlich den Benutzer nach einer Telefonnummer fragen, sei es zu geschäftlichen Zwecken oder für Notfallkontaktzwecke. Angesichts der häufig eingegebenen Telefonnummern ist es bedauerlich, dass eine "One size fits all"-Lösung zur Validierung von Telefonnummern nicht praktikabel ist.

Zum Glück können Sie die Anforderungen Ihrer eigenen Website berücksichtigen und ein angemessenes Maß an Validierung selbst implementieren. Siehe Validierung unten für Details.

Einer der Hauptvorteile von <input type="tel"> ist, dass es mobile Browser dazu veranlasst, eine spezielle Tastatur für die Eingabe von Telefonnummern anzuzeigen. Zum Beispiel sehen hier die Tastenfelder auf ein paar Geräten so aus.

Firefox für Android	WebKit iOS (Safari/Chrome/Firefox)

In seiner einfachsten Form kann ein tel-Eingabefeld so implementiert werden:

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

Hier passiert nichts Magisches. Beim Senden an den Server würde die Eingabedaten des obigen Eingabefelds beispielsweise als telNo=+12125553151 dargestellt.

Manchmal ist es hilfreich, einen Hinweis im Kontext zu bieten, in welcher Form die Eingabedaten vorliegen sollten. Dies kann besonders wichtig sein, wenn das Seitendesign keine beschreibenden Labels für jedes <input> bietet. Hier kommen Platzhalter ins Spiel. Ein Platzhalter ist ein Wert, der die Form des value zeigt, indem ein Beispiel für einen gültigen Wert dargestellt wird, der im Bearbeitungsfeld angezeigt wird, wenn der value des Elements "" ist. Sobald Daten in das Feld eingegeben werden, verschwindet der Platzhalter; wenn das Feld geleert wird, erscheint der Platzhalter erneut.

Hier sehen Sie eine tel-Eingabe mit dem Platzhalter 123-4567-8901. Beachten Sie, wie der Platzhalter verschwindet und wieder erscheint, wenn Sie den Inhalt des Bearbeitungsfeldes manipulieren.

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

Sie können nicht nur die physische Länge der Eingabebox steuern, sondern auch die minimalen und maximalen Längen, die für den eingegebenen Text selbst erlaubt sind.

Physische Eingabeelementgröße

Die physische Größe der Eingabebox kann mit dem size-Attribut gesteuert werden. Damit können Sie die Anzahl der Zeichen angeben, die die Eingabebox auf einmal anzeigen kann. In diesem Beispiel ist zum Beispiel die tel-Eingabebox 20 Zeichen breit:

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

Elementwertlänge

Die size ist separat von der Längenbegrenzung der eingegebenen Telefonnummer. Sie können eine Mindestlänge in Zeichen für die eingegebene Telefonnummer mit dem minlength-Attribut angeben; verwenden Sie ähnlich maxlength, um die maximale Länge der eingegebenen Telefonnummer festzulegen.

Das folgende Beispiel erstellt eine 20 Zeichen breite Telefonnummerneingabebox, die verlangt, dass der Inhalt nicht kürzer als 9 Zeichen und nicht länger als 14 Zeichen ist.

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

Bereitstellung eines einzelnen Standardwerts mit dem value-Attribut

Wie üblich können Sie einen Standardwert für ein tel-Eingabefeld angeben, indem Sie sein value-Attribut setzen:

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

Angebot von vorgeschlagenen Werten

Einen Schritt weiter können Sie eine Liste von Standardtelefonnummern anbieten, aus denen der Benutzer auswählen kann. Verwenden Sie dazu das list-Attribut. Dies beschränkt den Benutzer nicht auf diese Optionen, ermöglicht es ihm jedoch, schneller häufig verwendete Telefonnummern auszuwählen. Dies bietet auch Hinweise auf autocomplete. Das Attribut list gibt die ID eines <datalist>-Elements an, das wiederum ein <option>-Element pro vorgeschlagenem Wert enthält; jedes option's value ist der entsprechende vorgeschlagene Wert für das Telefonnummerneingabefeld.

<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>

Mit dem <datalist>-Element und seinen <option>s an Ort und Stelle wird der Browser die angegebenen Werte als mögliche Werte für die Telefonnummer vorschlagen; dies wird in der Regel als Popup- oder Dropdown-Menü mit den Vorschlägen dargestellt. Während sich die spezifische Benutzererfahrung von einem Browser zum anderen unterscheiden kann, wird typischerweise durch das Klicken in das Bearbeitungsfeld ein Dropdown mit den vorgeschlagenen Telefonnummern angezeigt. Dann, während der Benutzer tippt, wird die Liste so angepasst, dass nur passende Werte angezeigt werden. Jeder getippte Buchstabe schränkt die Liste solange ein, bis der Benutzer eine Auswahl trifft oder einen benutzerdefinierten Wert eingibt.

Hier ein Screenshot, wie das aussehen könnte:

Wie bereits angedeutet, ist es ziemlich schwierig, eine All-in-One-Client-seitige Validierungslösung für Telefonnummern bereitzustellen. Was können wir also tun? Lassen Sie uns einige Optionen in Betracht ziehen.

Sie können es so einrichten, dass eine leere Eingabe ungültig ist und nicht an den Server gesendet wird, indem Sie das required-Attribut verwenden. Beispielsweise lassen Sie uns dieses HTML verwenden:

<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>

Und lassen Sie uns das folgende CSS hinzufügen, um gültige Einträge mit einem Häkchen und ungültige Einträge mit einem Kreuz hervorzuheben:

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: #8b0000;
}

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

Die Ausgabe sieht so aus:

Wenn Sie weitere Einschränkungen auf die eingegebenen Zahlen anwenden möchten, sodass sie auch einem bestimmten Muster entsprechen müssen, können Sie das pattern-Attribut verwenden, das als Wert einen regulären Ausdruck übernimmt, dem die eingegebenen Werte entsprechen müssen.

In diesem Beispiel verwenden wir das gleiche CSS wie zuvor, aber unser HTML sieht so aus:

<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: #8b0000;
}

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

Beachten Sie, wie der eingegebene Wert als ungültig gemeldet wird, es sei denn, das Muster xxx-xxx-xxxx wird erfüllt; zum Beispiel wird 41-323-421 nicht akzeptiert. Auch nicht 800-MDN-ROCKS. Allerdings wird 865-555-6502 akzeptiert. Dieses bestimmte Muster ist offensichtlich nur für bestimmte Regionen nützlich — in einer echten Anwendung müssten Sie wahrscheinlich das verwendete Muster je nach Region des Benutzers variieren.

In diesem Beispiel präsentieren wir ein <select>-Element, das es dem Benutzer ermöglicht, das Land auszuwählen, in dem er sich befindet, und eine Reihe von <input type="tel">-Elementen, um ihm zu ermöglichen, jeden Teil seiner Telefonnummer einzugeben; es gibt keinen Grund, warum Sie nicht mehrere tel-Eingaben haben können.

Jede Eingabe hat ein placeholder-Attribut, um sehenden Benutzern einen Hinweis darauf zu geben, was sie eingeben sollen, ein pattern, um eine bestimmte Anzahl von Zeichen für den gewünschten Abschnitt zu erzwingen, und ein aria-label-Attribut, das einen Hinweis enthält, der über einen Bildschirmleser-Benutzer über das Eingabefeld vorgelesen werden soll.

<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>

Das JavaScript enthält einen onchange-Ereignishandler, der beim Ändern des <select>-Werts das pattern, placeholder und aria-label des <input>-Elements aktualisiert, um dem Telefonnummernformat in diesem Land/dieser Region zu entsprechen.

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");
  }
};

Das Beispiel sieht so aus:

Dies ist eine interessante Idee, die eine mögliche Lösung zur Handhabung internationaler Telefonnummern aufzeigt. Sie müssten das Beispiel natürlich erweitern, um das richtige Muster potenziell für jedes Land bereitzustellen, was eine Menge Arbeit wäre, und es gäbe immer noch keine wasserdichte Garantie, dass die Benutzer ihre Nummern korrekt eingeben würden.

Es lässt Sie fragen, ob es sich lohnt, all diese Mühe auf der Clientseite zu machen, wenn Sie dem Benutzer einfach erlauben könnten, seine Nummer im gewünschten Format auf der Clientseite einzugeben und sie dann auf dem Server zu validieren und zu bereinigen. Aber diese Wahl liegt bei Ihnen.

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: #8b0000;
}

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

• HTML-Formulare Leitfaden
• <input>
  • <input type="text">
  • <input type="email">