<input type="tel">
<input>
-Elemente des Typs tel
werden verwendet, um Benutzern das Eingeben und Bearbeiten von Telefonnummern zu ermöglichen. Im Gegensatz zu <input type="email">
und <input type="url">
wird der Eingabewert nicht automatisch auf ein bestimmtes Format validiert, bevor das Formular gesendet werden kann, da sich Telefonnummernformate weltweit stark unterscheiden.
Probieren Sie es aus
Obwohl Eingaben des Typs tel
funktional identisch mit normalen text
-Eingaben sind, haben sie nützliche Zwecke; der am schnellsten ersichtliche ist, dass mobile Browser – insbesondere auf Mobiltelefonen – möglicherweise ein angepasstes Tastenfeld anzeigen, das für die Eingabe von Telefonnummern optimiert ist. Die Verwendung eines spezifischen Eingabetypes für Telefonnummern erleichtert zudem die Hinzufügung benutzerdefinierter Validierungen und die Handhabung von Telefonnummern.
Hinweis: Browser, die den Typ tel
nicht unterstützen, fallen auf eine standardmäßige text-Eingabe zurück.
Wert
Zusätzliche Attribute
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.
list
Der Wert des list
-Attributes ist die id
eines im selben Dokument befindlichen <datalist>
-Elements. Die <datalist>
bietet eine Liste vordefinierter Werte zur Vorschlagung für diese Eingabe. Werte in der Liste, die nicht mit dem type
kompatibel sind, werden nicht in den 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 Stringlänge (gemessen in UTF-16-Code-Einheiten), die der Benutzer in das Telefonnummernfeld eingeben kann. Dies muss ein ganzzahliger Wert von 0 oder höher sein. Wenn kein maxlength
angegeben wird oder ein ungültiger Wert angegeben wird, hat das Telefonnummernfeld keine maximale Länge. Dieser Wert muss auch größer oder gleich dem Wert von minlength
sein.
Die Eingabe wird die Einschränkungsvalidierung nicht bestehen, wenn die Länge des in das Feld eingegebenen Textes mehr als maxlength
UTF-16-Code-Einheiten beträgt. Die Einschränkungsvalidierung wird nur angewendet, wenn der Wert vom Benutzer geändert wird.
minlength
Die minimale Stringlänge (gemessen in UTF-16-Code-Einheiten), 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 wird oder ein ungültiger Wert angegeben wird, hat die Telefonnummerneingabe keine Mindestlänge.
Das Telefonnummernfeld wird die Einschränkungsvalidierung nicht bestehen, wenn die Länge des in das Feld eingegebenen Textes weniger als minlength
UTF-16-Code-Einheiten beträgt. Die 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
des Eingabefeldes 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, damit das Muster als Folge von Unicode-Code-Punkten behandelt wird, anstatt als ASCII. Es sollten keine Schrägstriche um den Mustertext herum angegeben werden.
Falls das angegebene Muster nicht angegeben oder ungültig ist, wird kein regulärer Ausdruck angewendet und dieses Attribut wird vollständig ignoriert.
Hinweis: Verwenden Sie das title
-Attribut, um einen Text anzugeben, den die meisten Browser als Tooltip anzeigen, um zu erklären, welche Anforderungen erfüllt sein müssen, um das Muster zu entsprechen. Sie sollten auch andere erklärende Texte in der Nähe platzieren.
Siehe Muster-Validierung unten für Details und ein Beispiel.
placeholder
Das placeholder
-Attribut ist ein String, der dem Benutzer einen kurzen Hinweis darauf gibt, welche Art von Information in das Feld eingegeben werden soll. Es sollte ein Wort oder ein kurzer Satz sein, der den erwarteten Datentyp demonstriert, anstatt einer erklärenden Nachricht. Der Text darf keine Wagenrückläufe oder Zeilenumbrüche enthalten.
Wenn der Inhalt der Steuerung eine Richtung (LTR oder RTL) hat und der Platzhalter in der entgegengesetzten Richtung angezeigt werden muss, können Sie Unicode-zweiseitige Algorithmus-Formatierungszeichen verwenden, um die Richtung innerhalb des Platzhalters zu überschreiben; siehe Wie Unicode-Kontrollen für bidirektionalen Text verwendet werden für weitere Informationen.
Hinweis: Vermeiden Sie, soweit möglich, die Verwendung des placeholder
-Attributs. Es ist nicht so semantisch nützlich wie andere Möglichkeiten, Ihr Formular zu erklären, und kann unerwartete technische Probleme mit Ihrem Inhalt verursachen. Siehe <input>
-Etiketten für weitere Informationen.
readonly
Ein boolesches Attribut, dessen Vorhandensein bedeutet, dass dieses Feld vom Benutzer nicht bearbeitet werden kann. Sein Wert
kann jedoch immer noch durch JavaScript-Code direkt durch das Setzen der value
-Eigenschaft von HTMLInputElement
geändert werden.
Hinweis: Da ein schreibgeschütztes Feld keinen Wert haben kann, hat required
keine Auswirkungen auf Eingaben mit dem ebenfalls angegebenen readonly
-Attribut.
size
Das size
-Attribut ist ein Zahlenwert, 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 die Zeichenbreiten variieren, kann dies möglicherweise nicht exakt sein und sollte nicht darauf vertraut werden; das resultierende Eingabefeld kann je nach Zeichen und Schriftart (font
-Einstellungen) schmaler oder breiter sein als die angegebene Anzahl von Zeichen.
Dies setzt keine Begrenzung für die Anzahl der Zeichen fest, die der Benutzer in das Feld eingeben kann. Es wird nur angegeben, wie viele Zeichen gleichzeitig ungefähr sichtbar sein können. 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 abgefragte Art von Daten im Web. Wenn Sie beispielsweise irgendeine Art von Registrierungs- oder E-Commerce-Site erstellen, müssen Sie wahrscheinlich den Benutzer nach einer Telefonnummer fragen, sei es aus geschäftlichen Gründen oder für den Notfallkontakt. Angesichts der Häufigkeit eingegebener Telefonnummern ist es bedauerlich, dass eine "Einheitslösung für alles" zur Validierung von Telefonnummern nicht praktikabel ist.
Glücklicherweise können Sie die Anforderungen Ihrer eigenen Website berücksichtigen und selbst eine geeignete Validierung umsetzen. Siehe Validierung unten für Details.
Benutzerdefinierte Tastaturen
Einer der Hauptvorteile von <input type="tel">
ist, dass er dazu führt, dass mobile Browser eine spezielle Tastatur zur Eingabe von Telefonnummern anzeigen. Hier sind zum Beispiel, wie die Tastaturen auf einigen Geräten aussehen.
Firefox für Android | WebKit iOS (Safari/Chrome/Firefox) |
---|---|
Eine einfache tel-Eingabe
In seiner grundlegendsten 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 oben stehende Eingabefeld an den Server gesendet wird, würde die Eingabedaten beispielsweise als telNo=+12125553151
dargestellt werden.
Platzhalter
Manchmal ist es hilfreich, einen kontextbezogenen Hinweis zu geben, in welcher Form die Eingabedaten vorliegen sollten. Dies kann besonders wichtig sein, wenn das Design der Seite keine beschreibenden Etiketten für jedes <input>
-Element bietet. Hier kommen Platzhalter ins Spiel. Ein Platzhalter ist ein Wert, der die Form demonstriert, die der Wert
haben sollte, indem er ein Beispiel eines gültigen Werts anzeigt, das im Bearbeitungsfeld angezeigt wird, wenn der Wert
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 Bearbeitungsfeldes manipulieren.
<input id="telNo" name="telNo" type="tel" placeholder="123-4567-8901" />
Kontrolle der Eingabegröße
Sie können nicht nur die physische Länge des Eingabefelds, sondern auch die minimal und maximal zulässigen Längen für den Eingabetext selbst steuern.
Physische Größe des Eingabeelements
Die physische Größe des Eingabefeldes kann mit dem size
-Attribut gesteuert werden. Damit können Sie angeben, wie viele Zeichen 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ängenbegrenzung für die eingegebene Telefonnummer. Sie können eine Mindestlänge, in Zeichen, für die eingegebene Telefonnummer mit dem minlength
-Attribut festlegen; ebenso verwenden Sie maxlength
, um die maximale Länge der eingegebenen Telefonnummer festzulegen.
Das folgende Beispiel erstellt ein 20 Zeichen breites Telefonnummerneingabefeld, das 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" />
Hinweis: Die oben genannten Attribute wirken sich auf die Validierung aus – die Eingaben im obigen Beispiel werden als ungültig gewertet, wenn die Länge des Wertes weniger als 9 Zeichen oder mehr als 14 Zeichen beträgt. Die meisten Browser lassen Sie ohnehin keinen Wert über der maximalen Länge eingeben.
Bereitstellung von Standardoptionen
Bereitstellung eines einzelnen Standards mithilfe des Wertattributs
Wie immer können Sie einen Standardwert für ein tel
-Eingabefeld bereitstellen, indem Sie dessen value
-Attribut festlegen:
<input id="telNo" name="telNo" type="tel" value="333-4444-4444" />
Vorschlagen von Werten
Einen Schritt weiter gehend können Sie eine Liste von Standard-Telefonnummernwerten angeben, aus denen der Benutzer auswählen kann. Verwenden Sie hierzu 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 zur autocomplete
. Das list
-Attribut gibt die ID eines <datalist>
-Elements an, das seinerseits ein <option>
-Element für jeden vorgeschlagenen Wert enthält; der value
jedes option
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 an Ort und Stelle bietet der Browser die angegebenen Werte als potenzielle Werte für die Telefonnummer an; dies wird normalerweise als Popup- oder Dropdown-Menü mit den Vorschlägen präsentiert. Während die spezifische Benutzeroberfläche von Browser zu Browser variieren kann, wird normalerweise das Klicken in das Bearbeitungsfeld eine Dropdown-Liste der vorgeschlagenen Telefonnummern anzeigen. Dann wird beim Tippen des Benutzers die Liste angepasst, um nur gefilterte übereinstimmende Werte anzuzeigen. Jedes getippte Zeichen engt 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 universelle clientseitige Validierungslösung für Telefonnummern bereitzustellen. Was können wir also tun? Lassen Sie uns einige Optionen betrachten.
Warnung: Die HTML-Formularvalidierung ist kein Ersatz für serverseitige Skripte, die sicherstellen, dass die eingegebenen Daten das richtige Format haben, bevor sie in die Datenbank gelangen. Es ist viel zu einfach, Änderungen am HTML vorzunehmen, die es ermöglichen, die Validierung zu umgehen oder sie vollständig zu entfernen. Es ist auch möglich, dass jemand Ihr HTML komplett umgeht und die Daten direkt an Ihren Server sendet. Wenn Ihr serverseitiger Code die empfangenen Daten nicht validiert, könnte ein Desaster eintreten, wenn falsch formatierte Daten (oder zu große Daten, falscher Typ usw.) in Ihre Datenbank eingegeben werden.
Telefonnummern erforderlich machen
Sie können dafür sorgen, dass eine leere Eingabe ungültig ist und nicht an den Server gesendet wird, indem Sie das required
-Attribut verwenden. Verwenden wir zum Beispiel 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 wir den folgenden CSS-Code hinzu, um gültige Einträge 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: #8b0000;
}
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 wollen, sodass sie auch einem bestimmten Muster entsprechen müssen, können Sie das pattern
-Attribut verwenden, das als Wert einen regulären Ausdruck nimmt, dem eingegebene Werte entsprechen müssen.
In diesem Beispiel verwenden wir dasselbe CSS wie zuvor, aber unser HTML ist 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>
Beachten Sie, wie der eingegangene Wert als ungültig gemeldet wird, es sei denn, das Muster xxx-xxx-xxxx wird eingehalten; beispielsweise wird 41-323-421 nicht akzeptiert. Auch 800-MDN-ROCKS nicht. Allerdings wird 865-555-6502 akzeptiert. Dieses spezielle Muster ist offensichtlich nur für bestimmte Regionen nützlich – in einer realen Anwendung müssten Sie wahrscheinlich das Muster je nach Region des Benutzers variieren.
Beispiele
In diesem Beispiel präsentieren wir eine einfache Schnittstelle mit einem <select>
-Element, das den Benutzer auswählen lässt, in welchem Land er sich befindet, und einer Reihe von <input type="tel">
-Elementen, die ihm ermöglichen, jeden Teil seiner Telefonnummer einzugeben; es gibt keinen Grund, warum Sie nicht mehrere tel
-Eingaben haben können.
Jede Eingabe besitzt ein placeholder
-Attribut, um den sehenden Benutzern einen Hinweis 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, das einen Hinweis für Screenreader-Benutzer enthält, 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 ist relativ einfach – es enthält einen onchange
-Ereignishandler, der bei der Änderung des <select>
-Werts das pattern
, placeholder
und aria-label
des <input>
-Elements aktualisiert, um das Format der Telefonnummern in diesem Land/Gebiet zu berücksichtigen.
const selectElem = document.querySelector("select");
const inputElems = document.querySelectorAll("input");
selectElem.onchange = () => {
for (let i = 0; i < inputElems.length; i++) {
inputElems[i].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 des Umgangs mit internationalen Telefonnummern zeigt. Sie müssten das Beispiel natürlich erweitern, um das korrekte Muster für potenziell jedes Land bereitzustellen, was viel Arbeit bedeuten würde, und es gäbe trotzdem keine hundertprozentige Garantie dafür, dass die Benutzer ihre Nummern korrekt eingeben.
Es lässt Sie darüber nachdenken, ob es sich lohnt, all diese Mühe auf der Client-Seite auf sich zu nehmen, wenn Sie den Benutzer seine Nummer im beliebigen Format auf der Client-Seite eingeben lassen und sie dann auf dem Server validieren und bereinigen könnten. Aber diese Entscheidung liegt bei Ihnen.
Technische Zusammenfassung
Wert | Ein String, der eine Telefonnummer darstellt, oder leer | |
Ereignisse | [`change`](/de/docs/Web/API/HTMLElement/change_event) und [`input`](/de/docs/Web/API/Element/input_event) | |
Unterstützte allgemeine Attribute |
autocomplete ,
list ,
maxlength ,
minlength ,
pattern ,
placeholder ,
readonly , und
size
|
|
IDL-Attribute |
list , selectionStart ,
selectionEnd , selectionDirection , und
value
|
|
DOM-Schnittstelle |
[`HTMLInputElement`](/de/docs/Web/API/HTMLInputElement) |
|
Methoden | [`select()`](/de/docs/Web/API/HTMLInputElement/select), [`setRangeText()`](/de/docs/Web/API/HTMLInputElement/setRangeText), [`setSelectionRange()`](/de/docs/Web/API/HTMLInputElement/setSelectionRange) | |
Implizierte ARIA-Rolle |
ohne list -Attribut:
textbox
|
mit list -Attribut: combobox |
Spezifikationen
Specification |
---|
HTML Standard # telephone-state-(type=tel) |
Browser-Kompatibilität
BCD tables only load in the browser