<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 Eingabefelder vom Typ tel funktional identisch zu Standard-text-Eingabefeldern sind, haben sie nützliche Zwecke; der offensichtlichste davon ist, dass mobile Browser — insbesondere auf Handys — möglicherweise eine angepasste Tastatur anzeigen, die für die Eingabe von Telefonnummern optimiert ist. Die Verwendung eines speziellen Eingabetypen für Telefonnummern erleichtert auch das Hinzufügen benutzerdefinierter Validierung und Handhabung von Telefonnummern.

Wert

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

Zusätzliche Attribute

Neben den globalen Attributen und den Attributen, die für alle <input>-Elemente unabhängig von ihrem Typ gelten, unterstützen Telefonnummerneingaben die folgenden Attribute.

list

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

maxlength

Die maximale Zeichenkettenlä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 ist, hat das Telefonnummernfeld keine Maximallänge. Dieser Wert muss auch größer oder gleich dem Wert von minlength sein.

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

minlength

Die minimale Zeichenkettenlänge (gemessen in UTF-16-Codeeinheiten), die der Benutzer in das Telefonnummernfeld eingeben kann. Dies muss ein nichtnegativer Ganzzahlwert kleiner als oder gleich dem Wert sein, der durch maxlength angegeben wird. Wenn kein minlength angegeben ist oder ein ungültiger Wert angegeben ist, hat die Telefonnummerneingabe keine Mindestlänge.

Das Telefonnummernfeld schlägt bei der Einschränkungsvalidierung fehl, 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.

pattern

Wenn das pattern-Attribut angegeben ist, handelt es sich um einen regulären Ausdruck, den der value der Eingabe für das Bestehen der Einschränkungsvalidierung erfüllen muss. Es muss ein gültiger JavaScript-Regulärer Ausdruck sein, wie er vom RegExp-Typ verwendet wird, und wie in unserem Leitfaden für reguläre Ausdrücke dokumentiert; das 'u'-Flag wird beim Kompilieren des regulären Ausdrucks angegeben, damit das Muster als Folge von Unicode-Codepunkten behandelt wird, anstatt als ASCII. Keine Schrägstriche sollten 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 unter Muster-Validierung unten.

placeholder

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 einen kurzen Satz handeln, der die erwartete Art von Daten demonstriert, anstatt einer erklärenden Nachricht. Der Text darf keine Wagenrückläufe oder Zeilenumbrüche enthalten.

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

readonly

Ein booleanes Attribut, das, falls vorhanden, bedeutet, dass dieses Feld vom Benutzer nicht bearbeitet werden kann. Der value kann jedoch immer noch direkt durch JavaScript-Code geändert werden, indem die value-Eigenschaft des HTMLInputElement festgelegt wird.

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 Zeichenbreite unterscheiden kann, muss dies möglicherweise nicht exakt sein und sollte nicht darauf vertraut werden; die resultierende Eingabe kann schmaler oder breiter als die angegebene Anzahl von Zeichen sein, abhängig von den Zeichen und den Schriftart- (font-Einstellungen) in Verwendung.

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

Verwendung von tel-Eingaben

Telefonnummern sind eine sehr häufig gesammelte Art von Daten im Web. Wenn Sie eine Art Registrierung oder eCommerce-Site erstellen, müssen Sie wahrscheinlich die Telefonnummer eines Benutzers abfragen, sei es für geschäftliche Zwecke oder für Notfallkontakte. Angesichts der häufig eingegebenen Telefonnummern ist es bedauerlich, dass eine "Einheitslösung" für die Validierung von Telefonnummern nicht praktikabel ist.

Glücklicherweise können Sie die Anforderungen Ihrer eigenen Site berücksichtigen und selbst ein angemessenes Maß an Validierung implementieren. Weitere Informationen finden Sie unter Validierung unten.

Benutzerdefinierte Tastaturen

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 so die Tastaturen auf ein paar Geräten aus.

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

Eine grundlegende tel-Eingabe

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 Formular an den Server gesendet wird, würde die obige Eingabe als telNo=+12125553151 dargestellt.

Platzhalter

Manchmal ist es hilfreich, im Kontext einen Hinweis zu geben, 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 durch Präsentation eines Beispiels für einen gültigen Wert demonstriert, der innerhalb des Bearbeitungsfeldes 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, wenn Sie die Inhalte des Bearbeitungsfeldes 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 des Eingabefeldes steuern, sondern auch die minimalen und maximalen Längen, die für den eingegebenen Text selbst erlaubt sind.

Physische Größe des Eingabeelements

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 ist das tel-Bearbeitungsfeld beispielsweise 20 Zeichen breit:

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

Länge des Elementwertes

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

Das folgende Beispiel erstellt ein Telefonnummerneingabefeld mit einer Breite von 20 Zeichen, 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" />

Bereitstellung von Standardoptionen

Bereitstellung eines einzelnen Standards mit dem value-Attribut

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

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

Angebot vorgeschlagener Werte

Darüber hinaus 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 ihm jedoch, gängige 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; jedes option-Attributs 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 wird der Browser die angegebenen Werte als mögliche 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, präsentiert das Anklicken des Bearbeitungsfeldes normalerweise ein Dropdown der vorgeschlagenen Telefonnummern. Dann wird die Liste beim Tippen des Benutzers angepasst, um nur gefilterte übereinstimmende Werte anzuzeigen. Jeder eingegebene Buchstabe verkleinert die Liste, bis der Benutzer eine Auswahl trifft oder einen benutzerdefinierten Wert eingibt.

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

Validierung

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

Telefonnummern als erforderlich festlegen

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 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 einfügen, um gültige Eingaben mit einem Häkchen und ungültige Eingaben mit einem Kreuz zu kennzeichnen:

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 so aus:

Muster-Validierung

Wenn Sie eingegebene Nummern weiter einschränken möchten, so dass sie auch einem bestimmten Muster entsprechen müssen, können Sie das pattern-Attribut verwenden, das als Wert einen regulären Ausdruck annimmt, den eingetragene Werte erfüllen müssen.

In diesem Beispiel verwenden wir denselben CSS wie zuvor, aber unser HTML sieht nun 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: 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 eingehalten; zum Beispiel wird 41-323-421 nicht akzeptiert. Auch 800-MDN-ROCKS wird nicht akzeptiert. 865-555-6502 hingegen wird akzeptiert. Dieses spezielle 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.

Beispiele

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

Jede Eingabe hat ein placeholder-Attribut, das sehenden Benutzern einen Hinweis darauf gibt, was sie eingeben sollen, ein pattern, um eine bestimmte Anzahl von Zeichen für den gewünschten Abschnitt durchzusetzen, und ein aria-label-Attribut, das einen Hinweis für die Vorlesegeräte-Nutzer enthält, was sie eingeben müssen.

<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, den placeholder und das aria-label des <input>-Elements aktualisiert, um dem Format der Telefonnummern in diesem Land/Territorium 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 potenzielle Lösung für das Problem der Handhabung internationaler 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 gäbe immer noch keine narrensichere Garantie, dass die Benutzer ihre Nummern korrekt eingeben würden.

Es lässt einen darüber nachdenken, ob es sich lohnt, all diesen Aufwand auf der Client-Seite zu betreiben, wenn man dem Benutzer einfach erlauben könnte, seine Nummer in jedem gewünschten Format auf der Client-Seite einzugeben und dann die Validierung und Bereinigung auf dem Server vorzunehmen. 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">