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

Trotz der Tatsache, dass Eingaben des Typs tel funktional identisch mit Standard-text-Eingaben sind, erfüllen sie nützliche Zwecke; der schnellste, offensichtliche Vorteil liegt darin, dass mobile Browser – insbesondere auf Mobiltelefonen – möglicherweise eine angepasste Tastatur zur Eingabe von Telefonnummern anzeigen. Die Verwendung eines spezifischen Eingabetypen für Telefonnummern erleichtert auch die Hinzufügung benutzerdefinierter Validierungen und die Handhabung 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. Werte in der Liste, die nicht kompatibel mit dem type sind, werden in den vorgeschlagenen Optionen nicht enthalten. Die bereitgestellten Werte sind Vorschläge, keine Anforderungen: Benutzer können aus dieser vordefinierten Liste auswählen oder einen anderen Wert eingeben.

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

Die Eingabe wird bei der Einschränkungsvalidierung fehlschlagen, wenn die Länge des in das Feld eingegebenen Texts größer als maxlength UTF-16-Codeeinheiten ist. Die Einschränkungsvalidierung wird nur angewendet, wenn der Wert durch den Benutzer geändert wird.

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

Das Telefonnummerneingabefeld wird bei der Einschränkungsvalidierung fehlschlagen, wenn die Länge des in das Feld eingegebenen Texts weniger als minlength UTF-16-Codeeinheiten ist. Die Einschränkungsvalidierung 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 des Eingabefelds erfüllen muss, um die Einschränkungsvalidierung zu bestehen. Es muss ein gültiger JavaScript-regulärer Ausdruck sein, wie er durch den RegExp-Typ verwendet wird und in unserem Leitfaden zu regulären Ausdrücken dokumentiert ist; das 'u'-Flag wird beim Kompilieren des regulären Ausdrucks angegeben, sodass 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.

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

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

Wenn der Inhalt des Steuerelements eine Richtung (LTR oder RTL) hat, der Platzhalter jedoch in der entgegengesetzten Richtung angezeigt werden muss, können Sie Unicode Formatierungszeichen des bidirektionalen Algorithmus 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, falls vorhanden, bedeutet, dass dieses Feld nicht durch den Benutzer bearbeitet werden kann. Sein value kann jedoch immer noch durch JavaScript-Code direkt durch Setzen der HTMLInputElement value-Eigenschaft 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 genau oder auch nicht exakt sein und sollte daher nicht darauf verlassen werden; das resultierende Eingabefeld kann schmaler oder breiter als die angegebene Anzahl von Zeichen sein, abhängig von den Zeichen und den Schriftart-(font-Einstellungen), die verwendet werden.

Dies setzt keine Begrenzung, wie viele Zeichen der Benutzer in das Feld eingeben kann. Es gibt nur an, wie viele ungefähr zu einem Zeitpunkt gesehen werden können. Um eine obere Grenze für die Länge der Eingabedaten festzulegen, verwenden Sie das maxlength-Attribut.

Telefonnummern sind eine sehr häufig erfasste Art von Daten im Web. Wenn Sie beispielsweise eine Registrierungs- oder E-Commerce-Seite erstellen, müssen Sie wahrscheinlich den Benutzer nach einer Telefonnummer fragen, sei es für geschäftliche Zwecke oder für Notfallkontakte. 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 in Betracht ziehen und selbst ein angemessenes Maß an Validierung implementieren. Siehe Validierung unten für Details.

Einer der Hauptvorteile von <input type="tel"> besteht darin, dass mobile Browser eine spezielle Tastatur zur Eingabe von Telefonnummern anzeigen. Hier sind zum Beispiel die Tastenfelder auf ein paar Geräten.

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

In seiner grundlegendsten Form kann ein tel-Eingabefeld folgendermaßen implementiert werden:

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

Hier geschieht nichts Magisches. Wenn es zum Server gesendet wird, würde die obenstehende Eingabe als Beispiel telNo=+12125553151 dargestellt werden.

Manchmal ist es hilfreich, einen hinweisenden Kontext zu bieten, welche Form die Eingabedaten annehmen sollten. Dies kann besonders wichtig sein, wenn das Seitendesign keine beschreibenden Beschriftungen für jedes <input> bietet. Hier kommen Platzhalter ins Spiel. Ein Platzhalter ist ein Wert, der die Form darstellt, die der value annehmen sollte, indem ein Beispiel eines gültigen Werts vorgestellt wird, das innerhalb des Bearbeitungsfelds 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 eine tel-Eingabe mit dem Platzhalter 123-4567-8901. Beachten Sie, wie der Platzhalter verschwindet und wieder erscheint, während Sie den Inhalt des Bearbeitungsfelds manipulieren.

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

Sie können nicht nur die physische Länge des Eingabefelds steuern, sondern auch die minimal und maximal zugelassenen Längen des Eingabetexts selbst.

Physische Größe des Eingabefelds

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

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

Elementwertlänge

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

Das folgende Beispiel erstellt ein 20 Zeichen breites Telefonnummern-Eingabefeld und 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 einzigen Standards mit dem value-Attribut

Wie immer können Sie einen Standardwert für ein tel-Eingabefeld angeben, indem Sie dessen 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 Standard-Telefonnummernwerten anbieten, aus denen der Benutzer auswählen kann. Verwenden Sie dazu das list-Attribut. Das schränkt den Benutzer nicht auf diese Optionen ein, 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; der value jedes option ist der entsprechende vorgeschlagene Wert für die Telefonnummerneingabe.

<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 Pop-up oder Dropdown-Menü mit den Vorschlägen präsentiert. Während die spezifische Benutzererfahrung von Browser zu Browser variieren kann, präsentiert typischerweise ein Klick in das Bearbeitungsfeld eine Dropdown-Liste der vorgeschlagenen Telefonnummern. Dann, während der Benutzer tippt, wird die Liste angepasst, um nur gefilterte übereinstimmende Werte anzuzeigen. Jedes getippte Zeichen verkleinert die Liste, bis der Benutzer eine Auswahl trifft oder einen benutzerdefinierten Wert eingibt.

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

Wie bereits erwähnt, ist es ziemlich schwierig, eine Alles-in-einem-Client-Validierungslösung für Telefonnummern bereitzustellen. Was können wir also tun? Lassen Sie uns einige Optionen in Betracht ziehen.

Sie können eine leere Eingabe ungültig machen, sodass sie 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 folgendes CSS hinzu, um gültige Eingaben mit einem Häkchen und ungültige Eingaben mit einem Kreuz zu markieren:

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

Die Ausgabe sieht so aus:

Wenn Sie die eingegebenen Nummern weiter einschränken 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 verwendet, dem die eingegebenen Werte entsprechen müssen.

In diesem Beispiel verwenden wir das gleiche CSS wie zuvor, aber unser HTML wurde geändert, um so auszusehen:

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

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. 800-MDN-ROCKS auch nicht. Jedoch wird 865-555-6502 akzeptiert. Dieses besondere 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 die Auswahl des Landes ermöglicht, in dem er sich befindet, und eine Reihe von <input type="tel">-Elementen, um jeden Teil ihrer Telefonnummer einzugeben; es gibt keinen Grund, warum Sie nicht mehrere tel-Eingaben haben sollten.

Jede Eingabe hat ein placeholder-Attribut, um sehenden Benutzern einen Hinweis darauf zu geben, was eingegeben werden soll, ein pattern, um eine bestimmte Anzahl von Zeichen für den gewünschten Abschnitt durchzusetzen, und ein aria-label-Attribut, um den Inhalt eines Hinweises zu enthalten, der von Screenreadern Benutzern 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-Event-Handler, der beim Ändern des <select>-Werts das pattern, den placeholder und das aria-label des <input>-Elements aktualisiert, um dem Format von Telefonnummern in diesem Land bzw. 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 ein potenzielles Lösung aufzeigt für das Problem des Umgangs mit internationalen Telefonnummern. Natürlich müssten Sie das Beispiel erweitern, um das richtige Muster für jedes Land bereitzustellen, was viel Arbeit wäre, und es gäbe immer noch keine narrensichere Garantie, dass die Benutzer ihre Nummern korrekt eingeben.

Es stellt sich die Frage, ob es sich lohnt, all diese Mühe auf der Client-Seite zu machen, anstatt den Benutzer seine Nummer in einem beliebigen Format auf der Client-Seite eingeben zu lassen und 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: darkred;
}

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

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