<input>-Elemente des Typstel werden verwendet, um dem Benutzer die Eingabe und Bearbeitung einer Telefonnummer zu ermöglichen. Im Gegensatz zu<input type="email"> und<input type="url"> wird der Eingabewert nicht automatisch auf ein bestimmtes Format geprüft, bevor das Formular abgesendet werden kann, da sich die Formate für Telefonnummern weltweit stark unterscheiden.

Probieren Sie es aus

<label for="phone">  Enter your phone number:<br />  <small>Format: 123-456-7890</small></label><input  type="tel"   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 des Typstel funktional identisch mit Standard-text-Eingaben sind, machen sie dennoch Sinn; der offensichtlichste Nutzen ist, dass mobile Browser - insbesondere auf Mobiltelefonen - möglicherweise eine spezielle Tastatur anzeigen, die für die Eingabe von Telefonnummern optimiert ist. Die Verwendung eines spezifischen Eingabetypus für Telefonnummern erleichtert auch die Implementierung von benutzerdefinierter Validierung und Handhabung von Telefonnummern.

Wert

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

Zusätzliche Attribute

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

list

Der Wert des list-Attributs ist dieid eines<datalist>-Elements, das sich im gleichen Dokument befindet. Das<datalist> bietet eine Liste vordefinierter Werte, die dem Benutzer für diese Eingabe vorgeschlagen werden. Alle Werte in der Liste, die nicht mit demtype kompatibel sind, werden nicht in die vorgeschlagenen Optionen aufgenommen. Die bereitgestellten Werte sind Vorschläge, keine Anforderungen: Benutzer können aus dieser vordefinierten Liste auswählen oder einen anderen Wert eingeben.

maxlength

Die maximale Zeichenlänge (gemessen inUTF-16 Code-Einheiten), die der Benutzer in das Telefonnummernfeld eingeben kann. Dies muss ein ganzzahliger Wert von 0 oder höher sein. Wenn keinmaxlength angegeben ist oder ein ungültiger Wert angegeben wird, hat das Telefonnummernfeld keine maximale Länge. Dieser Wert muss auch größer oder gleich dem Wert vonminlength sein.

Die Eingabe schlägt bei derEinschränkungsvalidierung fehl, wenn die Länge des in das Feld eingegebenen Textes größer ist alsmaxlengthUTF-16 Code-Einheiten lang. Die Einschränkungsvalidierung wird nur angewendet, wenn der Wert vom Benutzer geändert wird.

minlength

Die minimale Zeichenlänge (gemessen inUTF-16 Code-Einheiten), die der Benutzer in das Telefonnummernfeld eingeben kann. Dies muss ein nicht-negativer ganzzahliger Wert sein, der kleiner oder gleich dem vommaxlength angegebenen Wert ist. Wenn keinminlength angegeben ist oder ein ungültiger Wert angegeben wird, hat das Telefonnummerneingabefeld keine Mindestlänge.

Das Telefonnummernfeld schlägt bei derEinschränkungsvalidierung fehl, wenn die Länge des in das Feld eingegebenen Textes kürzer ist alsminlengthUTF-16 Code-Einheiten. Die Einschränkungsvalidierung wird nur angewendet, wenn der Wert vom Benutzer geändert wird.

pattern

Daspattern-Attribut, wenn es angegeben ist, ist ein regulärer Ausdruck, den dervalue des Eingabefelds erfüllen muss, damit der Wert dieEinschränkungsvalidierung besteht. Es muss ein gültiger regulärer Ausdruck in JavaScript sein, wie er durch denRegExp-Typ verwendet wird und in unseremLeitfaden zu regulären Ausdrücken dokumentiert ist; das'u'-Flag wird beim Kompilieren des regulären Ausdrucks angegeben, damit das Muster als eine Folge von Unicode-Codepunkten behandelt wird, anstatt alsASCII. 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.

SieheMuster-Validierung unten für Details und ein Beispiel.

placeholder

Dasplaceholder-Attribut ist eine Zeichenkette, die 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 eine erklärende Nachricht. Der Textdarf keine Wagenrückläufe oder Zeilenumbrüche enthalten.

Wenn der Inhalt des Steuerelements eine Richtung (LTR oderRTL) hat, aber der Platzhalter in der entgegengesetzten Richtung angezeigt werden muss, können Sie Unicode-Formatting-Zeichen der bidirektionalen Algorithmen verwenden, um die Richtung innerhalb des Platzhalters zu überschreiben; sieheWie man Unicode-Steuerzeichen für Bidirektionalen-Text verwendet für weitere Informationen.

readonly

Ein Boolean-Attribut, das, wenn vorhanden, bedeutet, dass dieses Feld nicht vom Benutzer bearbeitet werden kann. Seinvalue kann jedoch weiterhin durch direktes Setzen dervalue-Eigenschaft desHTMLInputElement mit JavaScript geändert werden.

size

Dassize-Attribut ist ein numerischer Wert, der angibt, wie viele Zeichen breit das Eingabefeld sein soll. Der Wert muss größer als null sein, und der Standardwert ist 20. Da Zeichenbreiten variieren, kann dies mehr oder weniger genau sein und sollte nicht darauf verlassen werden; das resultierende Eingabeelement kann schmaler oder breiter als die angegebene Zeichenanzahl sein, abhängig von den Zeichen und der Schriftart (font-Einstellungen in Gebrauch).

Dies setztkein Limit darauf, wie viele Zeichen der Benutzer in das Feld eingeben kann. Es gibt nur ungefähr an, wie viele gleichzeitig gesehen werden können. Um ein oberes Limit für die Länge der Eingabedaten festzulegen, verwenden Sie dasmaxlength-Attribut.

Verwendung von tel-Eingaben

Telefonnummern sind eine sehr häufig gesammelte Art von Daten im Web. Bei der Erstellung jeglicher Art von Registrierungs- oder E-Commerce-Sites müssen Sie beispielsweise wahrscheinlich den Benutzer um eine Telefonnummer bitten, sei es für geschäftliche Zwecke oder als Notfallkontakt. Angesichts dessen, wie häufig Telefonnummern eingegeben werden, 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 Seite prüfen und ein angemessenes Validierungsniveau selbst implementieren. Weitere Informationen finden Sie unterValidierung unten.

Benutzerdefinierte Tastaturen

Einer der Hauptvorteile von<input type="tel"> besteht darin, dass es bei mobilen Browsern eine spezielle Tastatur zur Eingabe von Telefonnummern anzeigt. Zum Beispiel sehen die Tastaturen auf einigen Geräten so aus:

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

Ein Basis-tel-Input

In seiner einfachsten Form kann eintel-Input folgendermaßen implementiert werden:

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

Es gibt hier nichts Magisches. Wenn es an den Server gesendet wird, würde der obige Eingabewert beispielsweise alstelNo=+12125553151 dargestellt werden.

Platzhalter

Manchmal ist es hilfreich, einen kontextuellen Hinweis darauf zu geben, welche Form die Eingabedaten annehmen sollten. Dies kann besonders wichtig sein, wenn das Seitendesign keine beschreibenden Labels für jedes<input>-Element bietet. Hier kommenPlatzhalter ins Spiel. Ein Platzhalter ist ein Wert, der die Form darstellt, den dervalue annehmen sollte, indem er ein Beispiel für einen gültigen Wert präsentiert, der im Bearbeitungsfeld angezeigt wird, wenn dervalue 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 einetel-Eingabe mit dem Platzhalter123-4567-8901. Beachten Sie, wie der Platzhalter verschwindet und wieder erscheint, wenn Sie den Inhalt des Bearbeitungsfelds manipulieren.

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

Steuerung der Eingabegröße

Sie können nicht nur die physische Länge des Eingabefelds steuern, sondern auch die minimalen und maximalen zulässigen Längen für den Eingabetext selbst.

Physische Größe des Eingabeelements

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

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

Länge des Elementwertes

Diesize ist unabhängig von der Längenbeschränkung für die eingegebene Telefonnummer. Sie können eine minimale Zeichenlänge für die eingegebene Telefonnummer mithilfe desminlength-Attributs angeben; verwenden Sie in ähnlicher Weisemaxlength, um die maximale Länge der eingegebenen Telefonnummer festzulegen.

Das folgende Beispiel erstellt ein Eingabefeld für Telefonnummern, das 20 Zeichen breit ist und dessen Inhalt nicht kürzer als 9 Zeichen und nicht länger als 14 Zeichen sein darf.

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

Bereitstellen von Standardoptionen

Bereitstellung eines einzelnen Standardwerts mit dem value-Attribut

Wie immer können Sie einen Standardwert für eintel-Eingabefeld bereitstellen, indem Sie seinvalue-Attribut setzen:

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

Angebotsvorschläge

Um noch einen Schritt weiter zu gehen, können Sie eine Liste mit Standard-Telefonnummernwerten bereitstellen, aus denen der Benutzer auswählen kann. Dazu verwenden Sie daslist-Attribut. Dies beschränkt den Benutzer nicht auf diese Optionen, ermöglicht es ihm jedoch, gebräuchliche Telefonnummern schneller auszuwählen. Dies bietet auch Hinweise fürautocomplete. Daslist-Attribut gibt die ID eines<datalist>-Elements an, das wiederum ein<option>-Element pro vorgeschlagenem Wert enthält; jedesoptionvalue ist der entsprechende vorgeschlagene Wert für das Telefonnummerneingabefeld.

<label for="telNo">Phone number: </label><input name="telNo" type="tel" list="defaultTels" /><datalist>  <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, bietet der Browser die angegebenen Werte als potenzielle Werte für die Telefonnummer an; dies wird in der Regel als Popup- oder Dropdown-Menü präsentiert, das die Vorschläge enthält. Während die spezifische Benutzererfahrung von Browser zu Browser unterschiedlich sein kann, präsentiert normalerweise ein Klick in das Bearbeitungsfeld eine Dropdown-Liste der vorgeschlagenen Telefonnummern. Dann wird die Liste beim Eingeben des Benutzers so angepasst, dass nur gefilterte Übereinstimmungen angezeigt werden. Jedes getippte Zeichen 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 bereits erwähnt, ist es ziemlich schwierig, eine Einheitslösung für die clientseitige Validierung von Telefonnummern bereitzustellen. Was können wir also tun? Betrachten wir einige Optionen.

Telefonate erforderlich machen

Sie können es so einstellen, dass eine leere Eingabe ungültig ist und nicht an den Server gesendet wird, indem Sie dasrequired-Attribut verwenden. Zum Beispiel verwenden wir diesen HTML-Code:

<form>  <div>    <label for="telNo">Enter a telephone number (required): </label>    <input name="telNo" type="tel" required />    <span></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 Einträge 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;}

Das Ergebnis sieht folgendermaßen aus:

Muster-Validierung

Wenn Sie die eingegebenen Nummern weiter einschränken möchten, sodass sie auch einem bestimmten Muster entsprechen müssen, können Sie daspattern-Attribut verwenden, das als Wert einenregulären Ausdruck akzeptiert, dem eingegebene Werte entsprechen müssen.

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

<form>  <div>    <label for="telNo">      Enter a telephone number (in the form xxx-xxx-xxxx):    </label>    <input           name="telNo"      type="tel"      required      pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" />    <span></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. Auch 800-MDN-ROCKS wird nicht akzeptiert. 865-555-6502 wird jedoch akzeptiert. Dieses spezielle Muster ist offensichtlich nur für bestimmte Lokationen nützlich - in einer echten Anwendung müssten Sie wahrscheinlich das verwendete Muster abhängig von der Lokation des Benutzers variieren.

Beispiele

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

Jede Eingabe hat einplaceholder-Attribut, um sehbehinderten Benutzern einen Hinweis zu geben, was sie eingeben sollen, einpattern, um eine spezifische Anzahl von Zeichen für den gewünschten Abschnitt zu erzwingen, und einaria-label-Attribut, das einen Hinweis enthalten soll, der Bildschirmlesegerät-Benutzern vorliest, was sie eingeben sollen.

<form>  <div>    <label for="country">Choose your country:</label>    <select name="country">      <option>UK</option>      <option selected>US</option>      <option>Germany</option>    </select>  </div>  <div>    <p>Enter your telephone number:</p>    <span>      <input               name="areaNo"        type="tel"        required        placeholder="Area code"        pattern="[0-9]{3}"        aria-label="Area code" />      <span></span>    </span>    <span>      <input               name="number1"        type="tel"        required        placeholder="First part"        pattern="[0-9]{3}"        aria-label="First part of number" />      <span></span>    </span>    <span>      <input               name="number2"        type="tel"        required        placeholder="Second part"        pattern="[0-9]{4}"        aria-label="Second part of number" />      <span></span>    </span>  </div>  <div>    <button>Submit</button>  </div></form>

Das JavaScript enthält einenonchange-Ereignishandler, der, wenn der<select>-Wert geändert wird, daspattern, denplaceholder und dasaria-label des<input>-Elements aktualisiert, um dem Format der Telefonnummern in diesem Land 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 mögliches Lösungsmuster für das Problem der Handhabung internationaler Telefonnummern zeigt. Sie müssten das Beispiel natürlich erweitern, um das korrekte Muster für potenziell jedes Land bereitzustellen, was viel Arbeit wäre, und es gäbe immer noch keine narrensichere Garantie, dass die Benutzer ihre Nummern korrekt eingeben würden.

Es stellt sich die Frage, ob es sich lohnt, all diesen Aufwand auf der Client-Seite zu betreiben, wenn Sie den Benutzer die Nummer in welchem Format auch immer eingeben lassen und dann auf dem Server validieren und bereinigen könnten. 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">