HTML-Attributwert <input type="tel">

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

Wert

Das Attribut value des <input>-Elements enthält eine Zeichenfolge, die entweder eine Telefonnummer darstellt oder leer 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 Eingabefelder für Telefonnummern die folgenden Attribute.

list

Der Wert des Attributs list ist die id eines <datalist>-Elements im selben Dokument. Das <datalist>-Element enthält eine Liste vordefinierter Werte, die Benutzern für dieses Eingabefeld vorgeschlagen werden. Werte in der Liste, die nicht mit dem type kompatibel sind, werden nicht als Optionen vorgeschlagen. Die Werte sind Vorschläge, keine Vorgaben: Benutzer können einen Wert aus der Liste auswählen oder einen anderen Wert eingeben.

maxlength

Die maximale Länge der Zeichenfolge (gemessen in UTF-16-Codeeinheiten), die Benutzer in das Telefonnummernfeld eingeben können. Der Wert muss eine ganze Zahl größer oder gleich 0 sein. Wenn maxlength nicht angegeben oder ein ungültiger Wert angegeben wird, hat das Telefonnummernfeld keine maximale Länge. Dieser Wert muss außerdem größer oder gleich dem Wert von minlength sein.

Die Eingabe besteht die Constraint Validation nicht, wenn der eingegebene Text länger als maxlength UTF-16-Codeeinheiten ist. Die Constraint Validation wird nur durchgeführt, wenn der Wert durch Benutzer geändert wird.

minlength

Die minimale Länge der Zeichenfolge (gemessen in UTF-16-Codeeinheiten), die Benutzer in das Telefonnummernfeld eingeben können. Der Wert muss eine nicht negative ganze Zahl sein, die kleiner oder gleich dem für maxlength angegebenen Wert ist. Wenn minlength nicht angegeben oder ein ungültiger Wert angegeben wird, hat das Telefonnummernfeld keine minimale Länge.

Das Telefonnummernfeld besteht die Constraint Validation nicht, wenn der eingegebene Text kürzer als minlength UTF-16-Codeeinheiten ist. Die Constraint Validation wird nur durchgeführt, wenn der Wert durch Benutzer geändert wird.

pattern

Wenn das Attribut pattern angegeben ist, enthält es einen regulären Ausdruck, mit dem der value des Eingabefelds übereinstimmen muss, damit er die Constraint Validation besteht. Es muss sich um einen gültigen regulären JavaScript-Ausdruck handeln, wie er vom Typ RegExp verwendet und in unserem Leitfaden zu regulären Ausdrücken beschrieben wird. Beim Kompilieren des regulären Ausdrucks wird das Flag 'u' gesetzt, sodass das Muster als Folge von Unicode-Codepunkten statt als ASCII behandelt wird. Der Mustertext darf nicht von Schrägstrichen umgeben sein.

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

Weitere Informationen und ein Beispiel finden Sie unten unter Validierung anhand eines Musters.

placeholder

Das Attribut placeholder enthält eine Zeichenfolge, die Benutzern einen kurzen Hinweis darauf gibt, welche Informationen im Feld erwartet werden. Statt einer erklärenden Nachricht sollte sie ein Wort oder eine kurze Wortgruppe sein, die die erwartete Art der Daten veranschaulicht. Der Text darf keine Wagenrückläufe oder Zeilenvorschübe enthalten.

Wenn der Inhalt des Steuerelements eine Schreibrichtung (LTR oder RTL) hat, der Platzhalter aber in der entgegengesetzten Richtung angezeigt werden soll, können Sie Formatierungszeichen des bidirektionalen Unicode-Algorithmus verwenden, um die Schreibrichtung innerhalb des Platzhalters zu ändern. Weitere Informationen finden Sie unter How to use Unicode controls for bidi text.

readonly

Ein boolesches Attribut, das angibt, dass Benutzer dieses Feld nicht bearbeiten können. Sein value kann jedoch weiterhin durch JavaScript-Code geändert werden, der die Eigenschaft value von HTMLInputElement direkt setzt.

size

Das Attribut size ist ein numerischer Wert, der angibt, wie viele Zeichen breit das Eingabefeld sein soll. Der Wert muss größer als null sein; der Standardwert ist 20. Da die Breite einzelner Zeichen variiert, ist diese Angabe möglicherweise nicht exakt. Je nach Zeichen und Schriftart (den verwendeten font-Einstellungen) kann das resultierende Eingabefeld schmaler oder breiter als die angegebene Zeichenanzahl sein.

Damit wird nicht begrenzt, wie viele Zeichen Benutzer in das Feld eingeben können. Es wird lediglich ungefähr festgelegt, wie viele Zeichen gleichzeitig sichtbar sind. Verwenden Sie das Attribut maxlength, um eine Obergrenze für die Länge der eingegebenen Daten festzulegen.

tel-Eingabefelder verwenden

Obwohl Eingabefelder vom Typ tel funktional mit gewöhnlichen text-Eingabefeldern identisch sind, erfüllen sie nützliche Zwecke. Besonders auffällig ist, dass mobile Browser – vor allem auf Mobiltelefonen – eine für die Eingabe von Telefonnummern optimierte Tastatur anzeigen können. Ein eigener Eingabetyp für Telefonnummern erleichtert außerdem das Hinzufügen einer benutzerdefinierten Validierung und die Verarbeitung von Telefonnummern.

Telefonnummern gehören zu den Daten, die im Web sehr häufig erfasst werden. Wenn Sie beispielsweise eine Registrierungs- oder E-Commerce-Website erstellen, müssen Sie Benutzer wahrscheinlich nach einer Telefonnummer fragen – sei es für geschäftliche Zwecke oder als Kontaktmöglichkeit im Notfall. Da Telefonnummern so häufig eingegeben werden, ist es bedauerlich, dass eine universelle Lösung für ihre Validierung nicht praktikabel ist.

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

Benutzerdefinierte Tastaturen

Einer der wichtigsten Vorteile von <input type="tel"> besteht darin, dass mobile Browser eine spezielle Tastatur für die Eingabe von Telefonnummern anzeigen. So sehen die Tastaturen beispielsweise auf zwei Geräten aus:

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

Ein einfaches tel-Eingabefeld

In seiner einfachsten Form lässt sich ein tel-Eingabefeld so implementieren:

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

Hier geschieht nichts Besonderes. Beim Absenden an den Server würden die Daten des obigen Eingabefelds beispielsweise als telNo=+12125553151 dargestellt.

Platzhalter

Manchmal ist ein Hinweis direkt im Eingabefeld hilfreich, der zeigt, in welcher Form die Daten eingegeben werden sollen. Das kann besonders wichtig sein, wenn das Seitendesign keine aussagekräftigen Beschriftungen für jedes <input>-Element vorsieht. Hier kommen Platzhalter ins Spiel. Ein Platzhalter zeigt anhand eines gültigen Beispielwerts, welche Form der value haben soll. Er wird im Eingabefeld angezeigt, solange der value des Elements "" ist. Sobald Daten eingegeben werden, verschwindet der Platzhalter; wird das Feld geleert, erscheint er erneut.

Hier sehen Sie ein tel-Eingabefeld mit dem Platzhalter 123-4567-8901. Beachten Sie, wie der Platzhalter verschwindet und wieder erscheint, wenn Sie den Inhalt des Felds ändern.

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

Größe des Eingabefelds steuern

Sie können sowohl die sichtbare Breite des Eingabefelds als auch die zulässige Mindest- und Höchstlänge des eingegebenen Texts festlegen.

Sichtbare Größe des Eingabeelements

Die sichtbare Größe des Eingabefelds lässt sich mit dem Attribut size steuern. Damit können Sie angeben, wie viele Zeichen das Eingabefeld gleichzeitig anzeigen kann. In diesem Beispiel ist das tel-Eingabefeld 20 Zeichen breit:

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

Länge des Elementwerts

size ist unabhängig von der Längenbegrenzung für die eingegebene Telefonnummer. Mit dem Attribut minlength können Sie eine Mindestlänge in Zeichen für die eingegebene Telefonnummer festlegen. Mit maxlength legen Sie entsprechend die Höchstlänge fest.

Das folgende Beispiel erstellt ein 20 Zeichen breites Eingabefeld für Telefonnummern, dessen Inhalt mindestens 9 und höchstens 14 Zeichen lang sein muss.

<input
  id="telNo"
  name="telNo"
  type="tel"
  size="20"
  minlength="9"
  maxlength="14" />

Standardoptionen bereitstellen

Einen einzelnen Standardwert mit dem Attribut value bereitstellen

Wie üblich können Sie einen Standardwert für ein tel-Eingabefeld festlegen, indem Sie dessen Attribut value setzen:

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

Werte vorschlagen

Darüber hinaus können Sie eine Liste vorgegebener Telefonnummern bereitstellen, aus denen Benutzer wählen können. Verwenden Sie dazu das Attribut list. Dadurch sind Benutzer nicht auf diese Optionen beschränkt, können häufig verwendete Telefonnummern aber schneller auswählen. Die Liste liefert auch Hinweise für autocomplete. Das Attribut list gibt die ID eines <datalist>-Elements an. Dieses enthält für jeden vorgeschlagenen Wert ein <option>-Element; der value jedes option-Elements ist der entsprechende Vorschlagswert für das Telefonnummernfeld.

<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>-Elementen bietet der Browser die angegebenen Werte als mögliche Telefonnummern an. Üblicherweise erscheinen die Vorschläge in einem Popup- oder Dropdown-Menü. Die genaue Bedienung kann sich je nach Browser unterscheiden. Normalerweise wird beim Klicken in das Eingabefeld eine Dropdown-Liste mit vorgeschlagenen Telefonnummern angezeigt. Während Benutzer tippen, wird die Liste auf passende Werte eingeschränkt. Mit jedem eingegebenen Zeichen wird die Auswahl kleiner, bis ein Vorschlag ausgewählt oder ein eigener Wert eingegeben wird.

So könnte das aussehen:

Validierung

Wie bereits erwähnt, ist eine universelle Lösung für die clientseitige Validierung von Telefonnummern nur schwer umzusetzen. Welche Möglichkeiten gibt es also? Betrachten wir einige Optionen.

Telefonnummern als Pflichtangabe festlegen

Mit dem Attribut required können Sie festlegen, dass ein leeres Eingabefeld ungültig ist und das Formular dann nicht an den Server gesendet wird. Verwenden wir beispielsweise dieses HTML:

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

Ergänzen wir das folgende CSS, 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:

Validierung anhand eines Musters

Wenn Sie die zulässigen Nummern weiter einschränken möchten, sodass sie einem bestimmten Muster entsprechen müssen, können Sie das Attribut pattern verwenden. Sein Wert ist ein regulärer Ausdruck, mit dem eingegebene Werte übereinstimmen müssen.

In diesem Beispiel verwenden wir dasselbe CSS wie zuvor, ändern aber das HTML wie folgt:

<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, dass ein eingegebener Wert als ungültig gilt, wenn er nicht dem Muster xxx-xxx-xxxx entspricht. Beispielsweise wird 41-323-421 nicht akzeptiert, ebenso wenig wie 800-MDN-ROCKS. Dagegen wird 865-555-6502 akzeptiert. Dieses Muster ist offensichtlich nur für bestimmte Regionen sinnvoll. In einer echten Anwendung müssten Sie das verwendete Muster wahrscheinlich an die Region der Benutzer anpassen.

Beispiele

In diesem Beispiel zeigen wir ein <select>-Element, mit dem Benutzer ihr Land auswählen können, sowie mehrere <input type="tel">-Elemente, in die sie die einzelnen Teile ihrer Telefonnummer eingeben können. Es spricht nichts dagegen, mehrere tel-Eingabefelder zu verwenden.

Jedes Eingabefeld besitzt ein Attribut placeholder, das sehenden Benutzern einen Hinweis zur erwarteten Eingabe gibt, ein Attribut pattern, das die Anzahl der Zeichen im jeweiligen Abschnitt festlegt, und ein Attribut aria-label mit einem entsprechenden Hinweis für Benutzer von Screenreadern.

<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 Event-Handler für onchange. Wenn sich der Wert des <select>-Elements ändert, aktualisiert er pattern, placeholder und aria-label der <input>-Elemente entsprechend dem Telefonnummernformat des ausgewählten Landes oder Gebiets.

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:

Dieser interessante Ansatz zeigt eine mögliche Lösung für den Umgang mit internationalen Telefonnummern. Natürlich müssten Sie das Beispiel erweitern, um gegebenenfalls für jedes Land das richtige Muster bereitzustellen. Das wäre viel Arbeit, und eine zuverlässige Garantie für die korrekte Eingabe der Telefonnummern gäbe es trotzdem nicht.

Daher stellt sich die Frage, ob sich dieser Aufwand auf der Clientseite lohnt. Alternativ könnten Sie Benutzern erlauben, ihre Nummer dort in einem beliebigen Format einzugeben, und sie anschließend auf dem Server validieren und bereinigen. 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

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