<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 zu Standard-text-Eingaben sind, haben sie nützliche Verwendungszwecke; der am schnellsten ersichtliche Vorteil ist, dass mobile Browser—besonders auf Mobiltelefonen—möglicherweise eine benutzerdefinierte Tastatur präsentieren, die für die Eingabe von Telefonnummern optimiert ist. Die Verwendung eines spezifischen Eingabetyps für Telefonnummern erleichtert auch die Hinzufügung benutzerdefinierter Validierungen und Handhabungen von Telefonnummern.

Das value-Attribut des <input>-Elements enthält einen String, der entweder eine Telefonnummer darstellt oder ein leerer String ("") 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. Alle Werte in der Liste, die nicht mit dem type kompatibel sind, werden nicht in den 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 ganze Zahl von 0 oder höher sein. Wenn keine maxlength angegeben oder ein ungültiger Wert angegeben ist, hat das Telefonnummernfeld keine maximale Länge. Dieser Wert muss auch größer oder gleich dem Wert von minlength sein.

Die Eingabe wird 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 ganze Zahl sein, die kleiner oder gleich dem durch maxlength angegebenen Wert ist. Wenn keine minlength angegeben oder ein ungültiger Wert angegeben ist, hat die Telefonnummerneingabe keine Mindestlänge.

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

Das pattern-Attribut, wenn angegeben, ist 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 ist; das 'u'-Flag wird beim Compilieren des regulären Ausdrucks angegeben, so dass das Muster als eine Sequenz von Unicode-Codepunkten behandelt wird, anstatt als ASCII. Um das Mustertext sollten keine Schrägstriche angegeben werden.

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

Details und ein Beispiel finden Sie unter Muster-Validierung weiter unten.

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

Wenn der Inhalt der Steuerung eine bestimmte Richtung (LTR oder RTL) hat, der Platzhalter jedoch in entgegengesetzter Richtung präsentiert werden muss, können Sie Unicode bidirektionale Algorithmus-Formatierungszeichen verwenden, um die Richtung innerhalb des Platzhalters zu überschreiben; siehe Wie man Unicode-Steuerungen für bidi-Text verwendet für weitere Informationen.

Ein Boolean-Attribut, das, wenn vorhanden, bedeutet, dass dieses Feld nicht vom Benutzer bearbeitet werden kann. Sein value kann jedoch weiterhin durch direktes Setzen der value-Eigenschaft des HTMLInputElement 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 ist 20. Da Zeichenbreiten variieren, kann dies genauer oder ungenauer sein und sollte nicht darauf verlassen werden, genau zu sein; die resultierende Eingabe kann je nach Zeichen und verwendeter Schriftart (font Einstellungen in Verwendung) schmaler oder breiter als die angegebene Anzahl von Zeichen sein.

Dies legt kein Limit fest, wie viele Zeichen der Benutzer in das Feld eingeben kann. Es gibt nur an, wie viele etwa auf einmal gesehen werden können. Um ein oberes Limit für die Länge der Eingabedaten festzulegen, verwenden Sie das maxlength-Attribut.

Telefonnummern sind ein sehr häufig gesammelter Datentyp im Web. Beim Erstellen einer beliebigen Art von Registrierungs- oder E-Commerce-Website beispielsweise müssen Sie wahrscheinlich den Benutzer nach einer Telefonnummer fragen, sei es für geschäftliche Zwecke 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.

Glücklicherweise können Sie die Anforderungen Ihrer eigenen Website berücksichtigen und selbst ein angemessenes Validierungsniveau implementieren. Details siehe Validierung unten.

Einer der Hauptvorteile von <input type="tel"> ist, dass es mobile Browser veranlasst, eine spezielle Tastatur zum Eingeben von Telefonnummern anzuzeigen. Zum Beispiel sehen die Tastaturen auf einigen Geräten wie folgt aus.

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

In ihrer einfachsten Form kann eine tel-Eingabe wie folgt implementiert werden:

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

Hier passiert nichts Magisches. Wenn das obige Eingabefeld an den Server gesendet wird, würde die Daten als telNo=+12125553151 dargestellt.

Manchmal ist es hilfreich, einen kontextbezogenen Hinweis darauf zu geben, welche Form die Eingabedaten haben sollten. Dies kann besonders wichtig sein, wenn das Seitendesign keine beschreibenden Labels für jedes <input> bietet. Das ist der Punkt, an dem Platzhalter ins Spiel kommen. Ein Platzhalter ist ein Wert, der die Form des value demonstriert, indem er ein Beispiel für einen gültigen Wert anzeigt, 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 wieder.

Hier haben wir ein tel-Eingabefeld mit dem Platzhalter 123-4567-8901. Beachten Sie, wie der Platzhalter verschwindet und wieder erscheint, 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 steuern, sondern auch die minimalen und maximalen Längen, die für den eingegebenen Text erlaubt sind.

Physische Größe des Eingabeelements

Die physische Größe des Eingabefelds kann mit dem size-Attribut gesteuert werden. Mit ihm können Sie die Anzahl der Zeichen angeben, die das Eingabefeld auf einmal anzeigen kann. In diesem Beispiel ist das tel-Eingabefeld 20 Zeichen breit:

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

Element-Wertlänge

Die size ist von der Längenbeschränkung der eingegebenen Telefonnummer getrennt. Sie können eine minimale Länge, in Zeichen, für die eingegebene Telefonnummer mit dem minlength-Attribut festlegen; verwenden Sie ähnlicheweise maxlength, um die maximale Länge der eingegebenen Telefonnummer festzulegen.

Das folgende Beispiel erstellt ein 20 Zeichen breites Telefonnummerneingabefeld, das erfordert, 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" />

Einen einzigen Standard mit dem Wertattribut bereitstellen

Wie immer können Sie einen Standardwert für eine tel-Eingabe bereitstellen, indem Sie ihr value-Attribut festlegen:

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

Vorgeschlagene Werte anbieten

Einen Schritt weiter gegangen, können Sie eine Liste von Standardtelefonnummernwerten bereitstellen, aus denen der Benutzer auswählen kann. Verwenden Sie dazu das list-Attribut. Dies schränkt die Benutzer nicht auf diese Optionen ein, ermöglicht es ihnen jedoch, häufig verwendete Telefonnummern schneller auszuwählen. Dies bietet auch Hinweise für autocomplete. Das list-Attribut spezifiziert die ID eines <datalist>-Elements, das wiederum ein <option>-Element pro vorgeschlagenem Wert enthält; der value jedes option 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 stellt der Browser die angegebenen Werte als potenzielle Werte für die Telefonnummer bereit; 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 typischerweise beim Klicken in das Bearbeitungsfeld ein Dropdown mit den vorgeschlagenen Telefonnummern angezeigt. Dann, wenn der Benutzer tippt, wird die Liste angepasst, um nur gefilterte passende Werte anzuzeigen. Jeder eingegebene Buchstabe schränkt die Liste weiter ein, bis der Benutzer eine Auswahl trifft oder einen benutzerdefinierten Wert eingibt.

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

Wie bereits erwähnt, ist es ziemlich schwierig, eine einheitliche clientseitige Validierungslösung für Telefonnummern bereitzustellen. Was können wir also tun? Betrachten wir einige Optionen.

Sie können es so einstellen, dass eine leere Eingabe ungültig ist und nicht an den Server übermittelt 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 Eingaben 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;
}

Der Ausgabe sieht so aus:

Wenn Sie weiter einschränken möchten, dass eingegebene Nummern auch einem bestimmten Muster entsprechen müssen, können Sie das pattern-Attribut verwenden, das als Wert einen regulären Ausdruck erhält, 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 eingehalten; beispielsweise wird 41-323-421 nicht akzeptiert. Auch nicht 800-MDN-ROCKS. Allerdings wird 865-555-6502 akzeptiert. Dieses spezielle Muster ist offensichtlich nur für bestimmte Regionen nützlich – in einer realen Anwendung müssten Sie wahrscheinlich das verwendete Muster je nach Region des Benutzers variieren.

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

Jede Eingabe hat ein placeholder-Attribut, das einen Hinweis für sehende Benutzer anzeigt, was eingegeben werden soll, ein pattern zum Erzwingen einer bestimmten Anzahl von Zeichen für den gewünschten Abschnitt, und ein aria-label-Attribut, das einen Hinweis enthält, der für Screenreader-Benutzer darüber vorgelesen wird, was eingegeben 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>-Wertes das pattern, placeholder und aria-label des <input>-Elements aktualisiert, um den Telefonnummernformaten in diesem Land/Gebiet 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 ein potenzielles Lösung für das Problem der Handhabung internationaler Telefonnummern zeigt. Natürlich müssten Sie das Beispiel erweitern, um das richtige Muster für potenziell jedes Land bereitzustellen, was viel Arbeit wäre, und es gäbe immer noch keine zuverlässige Garantie, dass Benutzer ihre Nummern korrekt eingeben würden.

Es lässt einen überlegen, ob es sich lohnt, all diese Mühen auf der Clientseite zu betreiben, wenn man den Benutzer die Nummer einfach so eingeben lassen könnte, wie er möchte, und sie dann auf dem Server validieren und bereinigen könnte. 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-Formular-Leitfaden
• <input>
  • <input type="text">
  • <input type="email">