<input type="tel"> HTML-Attributwert

Probieren Sie es aus

<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 doch nützliche Zwecke; der offensichtlichste davon 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 Eingabetyp für Telefonnummern erleichtert auch das Hinzufügen benutzerdefinierter Validierung und Behandlung von Telefonnummern.

Wert

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

Zusätzliche Attribute

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

list

Der Wert des list-Attributs ist die id eines <datalist>-Elements, das sich im selben Dokument befindet. 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 den vorgeschlagenen Optionen enthalten. Die angegebenen Werte sind Vorschläge, keine Anforderungen: Benutzer können aus dieser vordefinierten Liste auswählen oder einen anderen Wert eingeben.

maxlength

Die maximale Zeichenfolgenlä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 ist oder ein ungültiger Wert angegeben wird, hat das Telefonnummernfeld keine maximalen Längenbegrenzungen. Dieser Wert muss auch größer oder gleich dem Wert von minlength sein.

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

minlength

Die minimale Zeichenfolgenlä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 durch maxlength angegebenen Wert ist. Wenn kein minlength angegeben ist oder ein ungültiger Wert angegeben wird, hat die Telefonnummerneingabe keine Mindestlänge.

Das Telefonnummernfeld schlägt Einschränkungsvalidierung fehl, wenn die Länge des in das Feld eingegebenen Textes kürzer ist als minlength UTF-16 Codeeinheiten. Einschränkungsvalidierung wird nur angewendet, wenn der Wert vom Benutzer geändert wird.

pattern

Das pattern-Attribut, wenn angegeben, ist ein regulärer Ausdruck, den der value der Eingabe erfüllen muss, um die Einschränkungsvalidierung zu bestehen. Es muss ein gültiger JavaScript-Regulärer Ausdruck sein, wie er vom 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 Folge von Unicode-Codepunkten und nicht als ASCII behandelt wird. Um den Text des Musters sollten keine Schrägstriche 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.

Sehen Sie Musterprüfung unten für Details und ein Beispiel.

placeholder

Das placeholder-Attribut ist eine Zeichenfolge, die dem Benutzer einen kurzen Hinweis darauf gibt, welche Art von Informationen in das Feld eingegeben werden sollen. Sie sollte ein Wort oder eine kurze Phrase sein, die den erwarteten Datentyp demonstriert, anstatt eine erläuternde Nachricht. Der Text darf keine Wagenrückläufe oder Zeilenumbruchzeichen enthalten.

Wenn der Inhalt der Steuerung eine Richtung (LTR oder RTL) hat, der Platzhalter jedoch in der entgegengesetzten Richtung dargestellt werden muss, können Sie die Zeichen der Unicode-Bidi-Algorithmus-Formatierung verwenden, um die Richtung im Platzhalter zu überschreiben; siehe Anleitung zur Verwendung von Unicode-Steuerungen für bidi-Text für weitere Informationen.

readonly

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

size

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 sich die Breiten der Zeichen unterscheiden, kann dies genau oder ungenau sein und sollte nicht darauf vertraut werden; das resultierende Eingabefeld kann je nach Zeichen und Schriftart (font-Einstellungen in Gebrauch) schmaler oder breiter sein als die angegebene Anzahl von Zeichen.

Dies legt kein Limit fest, wie viele Zeichen der Benutzer in das Feld eingeben kann. Es gibt nur ungefähr an, wie viele zu einem Zeitpunkt sichtbar sein können. Um ein oberes Limit der Länge der Eingabedaten festzulegen, verwenden Sie das maxlength-Attribut.

Verwendung von tel-Eingaben

Telefonnummern sind eine sehr häufig gesammelte Datenart im Web. Bei der Erstellung jeglicher Art von Registrierungs- oder E-Commerce-Website müssen Sie beispielsweise wahrscheinlich den Benutzer nach einer Telefonnummer fragen, sei es für geschäftliche Zwecke oder für Notfallkontakte. Angesichts dessen, wie häufig Telefonnummern eingegeben werden, 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 Website berücksichtigen und selbst ein angemessenes Maß an Validierung implementieren. Siehe Validierung unten für Details.

Benutzerdefinierte Tastaturen

Einer der Hauptvorteile von <input type="tel"> ist, dass es mobile Browser dazu bringt, eine spezielle Tastatur für die Eingabe von Telefonnummern anzuzeigen. Hier sind beispielsweise die Tastaturen auf ein paar Geräten dargestellt.

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

Eine grundlegende tel-Eingabe

In seiner grundlegendsten Form kann eine tel-Eingabe 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 Daten dieser Eingabe beispielsweise als telNo=+12125553151 dargestellt.

Platzhalter

Manchmal ist es hilfreich, einen Hinweishinweis im Kontext 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 des value demonstriert, indem er ein Beispiel eines gültigen Werts zeigt, 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 erneut.

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

Steuerung der Eingabegröße

Sie können nicht nur die physische Länge der Eingabebox kontrollieren, sondern auch die minimal und maximal erlaubten Längen für den eingegebenen Text.

Physische Größe des Eingabeelements

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

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

Länge des Elementwerts

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

Das folgende Beispiel erstellt eine 20 Zeichen breite Telefonnummerneingabebox, die 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" />

Bereitstellung von Standardoptionen

Bereitstellung eines einzigen Standardwerts mit dem value-Attribut

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

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

Anbieten vorgeschlagener Werte

Wenn Sie einen Schritt weiter gehen möchten, können Sie eine Liste von Standard-Telefonnummernwerten bereitstellen, 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, 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 wiederum ein <option>-Element pro vorgeschlagenem Wert enthält; jeder option's value ist der entsprechende vorgeschlagene Wert für die Telefonnummerneingabebox.

<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 normalerweise als Popup- oder Drop-down-Menü mit den Vorschlägen präsentiert. Während das spezifische Benutzererlebnis von einem Browser zum anderen variieren kann, wird typischerweise durch das Klicken in das Bearbeitungsfeld ein Dropdown der vorgeschlagenen Telefonnummern angezeigt. Dann, während 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:

Validierung

Wie bereits erwähnt, ist es ziemlich schwierig, eine Einheitslösung für die clientseitige Validierung von Telefonnummern zu bieten. Was können wir also tun? Lassen Sie uns einige Optionen in Betracht ziehen.

Telefonnummern erforderlich machen

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. 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 wir fügen 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: darkred;
}

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

Das Ergebnis sieht folgendermaßen aus:

Musterprüfung

Wenn Sie eingegebene Zahlen 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 erhält, dem die eingegebenen Werte entsprechen müssen.

In diesem Beispiel verwenden wir dasselbe CSS wie zuvor, aber unser HTML wurde so geändert:

<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. Ebenso wird 800-MDN-ROCKS nicht akzeptiert. Allerdings wird 865-555-6502 akzeptiert. Dieses spezielle Muster ist offensichtlich nur für bestimmte Orte nützlich — in einer echten Anwendung müssten Sie wahrscheinlich das verwendete Muster abhängig von dem Ort des Benutzers variieren.

Beispiele

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

Jede Eingabe verfügt über ein placeholder-Attribut, um sehende Benutzer Hinweise zu geben, was eingegeben werden soll, ein pattern, um eine spezifische Anzahl an Zeichen für den gewünschten Abschnitt durchzusetzen, und ein aria-label-Attribut, das einen Hinweis enthält, der für Bildschirmleserbenutzer 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, wenn der <select>-Wert geändert wird, das pattern, placeholder und aria-label des <input>-Elements aktualisiert, um das Format von Telefonnummern 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 folgendermaßen aus:

Dies ist eine interessante Idee, die eine potenzielle Lösung für das Problem des Umgangs mit internationalen Telefonnummern zeigt. Sie müssten das Beispiel natürlich erweitern, um das richtige Muster für möglicherweise jedes Land bereitzustellen, was eine Menge Arbeit wäre, und es wäre immer noch keine wasserdichte Garantie, dass die Benutzer ihre Nummern korrekt eingeben.

Es lässt einen nachdenken, ob es sich die Mühe auf der Clientseite lohnt, wenn Sie einfach den Benutzer seine Nummer in jedem beliebigen Format auf der Clientseite eingeben lassen könnten, und diese dann auf dem Server validieren und 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;
}

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

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