<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, haben sie nützliche Zwecke. Am offensichtlichsten ist, dass mobile Browser – insbesondere auf Mobiltelefonen – möglicherweise eine benutzerdefinierte Tastatur anzeigen, die für die Eingabe von Telefonnummern optimiert ist. Die Verwendung eines speziellen Eingabetyps für Telefonnummern erleichtert zudem die Erstellung benutzerdefinierter Validierungen und die Handhabung von Telefonnummern.

Das value-Attribut des <input>-Elements enthält eine Zeichenkette, die entweder eine Telefonnummer darstellt oder eine leere Zeichenkette ("") ist.

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

Der Wert des list-Attributs ist die id eines <datalist>-Elements, das sich im selben Dokument befindet. Das <datalist> bietet eine Liste vordefinierter Werte an, die dem Benutzer für diese Eingabe vorgeschlagen werden. Alle Werte in der Liste, die nicht mit dem type 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. Dieser Wert muss eine Ganzzahl von 0 oder höher sein. Wenn kein maxlength angegeben ist oder ein ungültiger Wert angegeben wird, hat das Telefonnummernfeld keine maximale Länge. Dieser Wert muss auch größer oder gleich dem Wert von minlength sein.

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

Die minimale Zeichenlänge (gemessen in UTF-16-Codeeinheiten), die der Benutzer in das Telefonnummernfeld eingeben kann. Dieser Wert muss eine nicht-negative Ganzzahl kleiner oder gleich dem vom maxlength angegebenen Wert sein. Wenn kein minlength angegeben ist oder ein ungültiger Wert vorliegt, hat die Telefonnummerneingabe keine Mindestlänge.

Das Telefonnummernfeld wird die Einschränkungsvalidierung nicht bestehen, wenn die Länge des eingegebenen Textes weniger als minlength UTF-16-Codeeinheiten beträgt. Die Einschränkungsvalidierung wird nur angewendet, wenn der Wert vom Benutzer geändert wird.

Wenn das pattern-Attribut angegeben ist, ist es ein regulärer Ausdruck, den der value der Eingabe erfüllen muss, damit der Wert die Einschränkungsvalidierung besteht. Es muss ein gültiger JavaScript-Regulärer-Ausdruck sein, wie er vom RegExp-Typ verwendet wird, und wie in unserem Leitfaden zu regulären Ausdrücken dokumentiert. Beim Kompilieren des regulären Ausdrucks wird das 'u'-Flag angegeben, sodass das Muster als Unicode-Codepunkte behandelt wird, anstatt als ASCII. Keine Schrägstriche sollten um den Mustertext angegeben werden.

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

Siehe Muster-Validierung für Details und ein Beispiel.

Das placeholder-Attribut ist eine Zeichenkette, die dem Benutzer einen kurzen Hinweis darauf gibt, welche Art von Informationen im Feld erwartet werden. Es sollte sich um ein Wort oder eine kurze Phrase handeln, die den erwarteten Datentyp darstellt, und keine erläuternde Nachricht sein. Der Text darf keine Wagenrückläufe oder Zeilenumbrüche enthalten.

Wenn der Inhalt des Steuerungselements eine Richtung (LTR oder RTL) hat, der Platzhalter jedoch in der entgegengesetzten Richtung dargestellt werden muss, können Sie Unicode-Zeichen zur bidirektionalen Steuerung verwenden, um die Richtung innerhalb des Platzhalters zu überschreiben; siehe Wie man Unicode-Steuerzeichen für bidirektionalen Text verwendet für weitere Informationen.

Ein boolesches Attribut, das, wenn es vorhanden ist, bedeutet, dass dieses Feld vom Benutzer nicht bearbeitet werden kann. Sein value kann jedoch weiterhin durch direktes Setzen der HTMLInputElement value-Eigenschaft durch JavaScript-Code geändert werden.

Das size-Attribut ist ein numerischer Wert, der angibt, wie viele Zeichen breit das Eingabefeld sein soll. Der Wert muss eine Zahl größer als null sein, und der Standardwert beträgt 20. Da Zeichenbreiten variieren, kann dies mehr oder weniger genau sein und sollte nicht darauf vertraut werden, dass es exakt ist; die resultierende Eingabe kann je nach den Zeichen und dem verwendeten Schriftart-(font)-Einstellungen schmaler oder breiter sein als die angegebene Anzahl von Zeichen.

Dies legt keine Begrenzung der Anzahl der Zeichen fest, die der Benutzer in das Feld eingeben kann. Es gibt nur an, wie viele ungefähr gleichzeitig zu sehen sind. Um ein oberes Limit für die Länge der Eingabedaten festzulegen, verwenden Sie das maxlength-Attribut.

Telefonnummern werden im Web sehr häufig gesammelt. Wenn Sie beispielsweise eine Art Registrierungs- oder E-Commerce-Seite erstellen, müssen Sie vermutlich den Benutzer nach einer Telefonnummer fragen, sei es aus geschäftlichen Gründen oder für Notfallkontakte. Angesichts der Häufigkeit eingegebener Telefonnummern ist es bedauerlich, dass eine "Einheitsgröße für alle" Lösung zur Validierung von Telefonnummern nicht praktikabel ist.

Glücklicherweise können Sie die Anforderungen Ihrer eigenen Seite berücksichtigen und selbst ein geeignetes Maß an Validierung implementieren. Siehe Validierung unten für Details.

Einer der Hauptvorteile von <input type="tel"> ist, dass es mobile Browser dazu veranlasst, eine spezielle Tastatur zur Eingabe von Telefonnummern anzuzeigen. So sehen beispielsweise die Tastenfelder auf verschiedenen Geräten aus.

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

In ihrer grundlegendsten Form kann eine Tel-Eingabe wie folgt umgesetzt werden:

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

Hier passiert nichts Magisches. Wenn sie an den Server übermittelt wird, würden die oben genannten Daten der Eingabe beispielsweise als telNo=+12125553151 dargestellt.

Manchmal ist es hilfreich, einen kontextbezogenen Hinweis darauf anzubieten, 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 darstellt, die der value haben sollte, indem er ein Beispiel für einen gültigen Wert präsentiert, der im Bearbeitungsfeld angezeigt wird, wenn der Wert des Elements "" ist. Sobald Daten in das Feld eingegeben werden, verschwindet der Platzhalter; wird das Feld geleert, erscheint der Platzhalter erneut.

Hier haben wir eine tel-Eingabe mit dem Platzhalter 123-4567-8901. Beachten Sie, wie der Platzhalter verschwinden und wieder auftauchen kann, während 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 des Eingabefeldes kontrollieren, sondern auch die minimale und maximale Länge, die für den eingegebenen Text erlaubt ist.

Physische Eingabefeldgröße

Die physische Größe des Eingabefeldes kann mithilfe des size-Attributs gesteuert werden. Damit können Sie die Anzahl der Zeichen angeben, die das Eingabefeld gleichzeitig anzeigen kann. In diesem Beispiel zum Beispiel ist das tel-Bearbeitungsfeld 20 Zeichen breit:

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

Länge des Elementwertes

Die size-Angabe ist unabhängig von der Längenbeschränkung für die eingegebene Telefonnummer. Sie können eine Mindestlänge, in Zeichen, für die eingegebene Telefonnummer mithilfe des minlength-Attributs angeben; ebenso verwenden Sie maxlength, um die maximale Länge der eingegebenen Telefonnummer festzulegen.

Das folgende Beispiel erstellt ein Telefonnummereingabefeld mit einer Breite von 20 Zeichen und fordert, 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 Standards mithilfe des value-Attributs

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

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

Anbieten vorgeschlagener Werte

Gehen Sie einen Schritt weiter, indem Sie eine Liste von Standard-Telefonnummernwerten angeben, aus denen der Benutzer auswählen kann. Verwenden Sie hierzu das list-Attribut. Dies beschränkt den Benutzer nicht auf diese Optionen, ermöglicht es ihm jedoch, häufig verwendete Telefonnummern schneller auszuwählen. Dies bietet auch Hinweise für autocomplete. Das list-Attribut gibt die ID eines <datalist>-Elements an, das seinerseits ein <option>-Element pro vorgeschlagenem Wert enthält; jeder option-Wert ist der entsprechende vorgeschlagene Wert für das Telefonnummereingabefeld.

<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 potenzielle Werte für die Telefonnummer anbieten; dies wird typischerweise als Popup- oder Dropdown-Menü mit den Vorschlägen präsentiert. Während das spezifische Benutzererlebnis von einem Browser zum anderen variieren kann, wird durch das Klicken in das Bearbeitungsfeld typischerweise ein Dropdown mit den vorgeschlagenen Telefonnummern angezeigt. Dann wird durch das Eingeben der Liste nur gefilterte passende Werte angezeigt. Jedes eingetippte Zeichen reduziert die Liste, bis der Benutzer eine Auswahl trifft oder einen benutzerdefinierten Wert eingibt.

Hier ist ein Screenshot, wie das aussehen könnte:

Wie bereits angedeutet, ist es ziemlich schwierig, eine Einheitslösung zur clientseitigen Validierung von Telefonnummern bereitzustellen. Was können wir also tun? Lassen Sie uns einige Optionen in Betracht ziehen.

Sie können es so einstellen, dass eine leere Eingabe ungültig ist und nicht an den Server gesendet wird, indem Sie das required-Attribut verwenden. Zum Beispiel, verwenden wir diesen HTML-Code:

<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 fügen wir das folgende CSS hinzu, um gültige Eingaben mit einem Häkchen und ungültige 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 folgendermaßen aus:

Wenn Sie den eingegebenen Zahlen weitere Einschränkungen auferlegen möchten, damit sie auch einem bestimmten Muster entsprechen müssen, können Sie das pattern-Attribut verwenden, das einen regulären Ausdruck als Wert hat, dem eingegebene Werte entsprechen müssen.

In diesem Beispiel verwenden wir das gleiche CSS wie zuvor, aber unser HTML sieht wie folgt 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, dass der eingegebene Wert als ungültig gilt, es sei denn, er entspricht dem Muster xxx-xxx-xxxx; zum Beispiel, 41-323-421 wird nicht akzeptiert. Ebenso wenig wird 800-MDN-ROCKS akzeptiert. Allerdings wird 865-555-6502 akzeptiert. Dieses spezielle Muster ist offensichtlich nur in bestimmten Regionen nützlich – in einer echten Anwendung müssten Sie das verwendete Muster wahrscheinlich je nach Standort des Benutzers variieren.

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

Jede Eingabe verfügt über ein placeholder-Attribut, um sehenden Benutzern einen Hinweis darauf zu gebeet, was eingegeben werden soll, 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 von Bildschirmlesesoftware gelesen wird, worauf zu achten ist.

<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, den placeholder und das aria-label des <input>-Elements aktualisiert, um das Format der Telefonnummern in diesem Land/Territorium widerzuspiegeln.

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 folgendermaßen aus:

Dies ist eine interessante Idee, die ein mögliches Lösungskonzept für das Problem der internationalen Telefonnummerneingabe aufzeigt. Natürlich müsste das Beispiel erweitert werden, um das korrekte Muster potenziell für jedes Land bereitzustellen, was viel Arbeit wäre, und es gäbe trotzdem keine narrensichere Garantie dafür, dass die Benutzer ihre Nummern korrekt eingeben.

Es lässt Sie darüber nachdenken, ob es sich lohnt, all diese Mühe auf der Client-Seite zu betreiben, wenn Sie dem Benutzer einfach erlauben könnten, seine Nummer in welchem Format auch immer auf der Client-Seite einzugeben, und sie dann auf dem Server zu validieren und zu bereinigen. Aber diese Entscheidung 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">