<input type="url">

<form> <label for="url">Enter an https:// URL:</label> <input type="url" name="url" id="url" placeholder="https://example.com" pattern="https://.*" size="30" required /> </form> 

label { display: block; font: 1rem "Fira Sans", sans-serif; } input, label { margin: 0.4rem 0; } 

Der Eingabewert wird automatisch validiert, um sicherzustellen, dass er entweder leer oder eine korrekt formatierte URL ist, bevor das Formular abgesendet werden kann. Die CSS-Pseudoklassen :valid und :invalid werden automatisch angewendet, um visuell anzuzeigen, ob der aktuelle Wert des Feldes eine gültige URL ist oder nicht.

Das value-Attribut des <input>-Elements enthält einen String, der automatisch auf Konformität mit der URL-Syntax geprüft wird. Spezieller gibt es zwei mögliche Wertformate, die die Validierung bestehen:

1. Ein leerer String („“) zeigt an, dass der Benutzer keinen Wert eingegeben hat oder der Wert entfernt wurde.
2. Eine einzelne korrekt geformte absolute URL. Das bedeutet nicht unbedingt, dass die URL-Adresse existiert, aber sie ist zumindest korrekt formatiert. Ein Eintrag, der dem Muster urlscheme://rest-of-url entspricht, kann gültig sein, auch wenn das eingegebene urlscheme nicht existiert.

Details zur Validierung von URLs, um sicherzustellen, dass sie korrekt formatiert sind, finden Sie unter Validierung.

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

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

Die maximale String-Länge (gemessen in UTF-16-Code-Einheiten), die der Benutzer in die url-Eingabe 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 die url-Eingabe keine maximale Länge. Dieser Wert muss auch größer oder gleich dem Wert von minlength sein.

Die Eingabe schlägt fehl Einschränkungsvalidierung, wenn die Länge des Textwertes des Feldes größer als maxlength UTF-16-Code-Einheiten ist. Die Einschränkungsvalidierung wird nur angewendet, wenn der Wert vom Benutzer geändert wird.

Die minimale String-Länge (gemessen in UTF-16-Code-Einheiten), die der Benutzer in die url-Eingabe eingeben kann. Dies muss ein nicht-negativer, ganzzahliger Wert sein, der kleiner oder gleich dem von maxlength angegebenen Wert ist. Wenn kein minlength angegeben ist oder ein ungültiger Wert angegeben wird, hat die url-Eingabe keine Mindestlänge.

Die Eingabe schlägt fehl Einschränkungsvalidierung, 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.

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 sich um einen gültigen JavaScript-Regulären Ausdruck handeln, der vom RegExp-Typ verwendet wird und wie in unserem Leitfaden zu Regulären Ausdrücken dokumentiert ist; das 'u'-Flag ist beim Kompilieren des regulären Ausdrucks festgelegt, damit das Muster als Sequenz von Unicode-Codepunkten behandelt wird, anstatt als ASCII. Vorwärtsschrägstriche sollten nicht um den Mustertext angegeben werden.

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

Weitere Details und ein Beispiel finden Sie im Abschnitt Muster-Validierung.

Das placeholder-Attribut ist ein String, der dem Benutzer einen kurzen Hinweis darauf gibt, welche Art von Informationen im Feld erwartet werden. Es sollte ein Wort oder eine kurze Phrase sein, die die erwartete Art der Daten demonstriert, anstatt eine erklärende Nachricht. Der Text darf keine Wagenrückläufe oder Zeilenvorschübe enthalten.

Wenn der Inhalt des Steuerungselements eine Richtung (LTR oder RTL) hat, der Platzhalter jedoch in der entgegengesetzten Richtung angezeigt werden muss, können Sie Unicode-Bidi-Algorithmus-Formatierungszeichen verwenden, um die Richtung innerhalb des Platzhalters zu überschreiben. Weitere Informationen finden Sie unter Anleitung zur Verwendung von Unicode-Steuerelementen für bidi-Text.

Das readonly-Boolesche Attribut bedeutet, dass dieses Feld, falls vorhanden, nicht vom Benutzer bearbeitet werden kann. Sein value kann jedoch direkt vom JavaScript-Code geändert werden, indem die HTMLInputElement value-Eigenschaft gesetzt wird.

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 Zeichenbreiten variieren, kann dies genau sein oder auch nicht und darauf sollte nicht vertraut werden; das resultierende Eingabefeld kann je nach den Zeichen und den Einstellungen (font) schmaler oder breiter sein als die angegebenen Anzahl von Zeichen.

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

Das spellcheck-Globale-Attribut wird verwendet, um anzugeben, ob die Rechtschreibprüfung für ein Element aktiviert werden soll. Es kann auf jeden bearbeitbaren Inhalt angewendet werden, aber hier betrachten wir spezifische Details zur Verwendung von spellcheck auf <input>-Elementen. Die zulässigen Werte für spellcheck sind:

false

Deaktivieren Sie die Rechtschreibprüfung für dieses Element.

true

Aktivieren Sie die Rechtschreibprüfung für dieses Element.

"" (leerer String) oder kein Wert

Folgen Sie dem Standardsverhalten des Elements für die Rechtschreibprüfung. Dies kann auf den spellcheck-Einstellungen eines übergeordneten Elements oder anderen Faktoren basieren.

Ein Eingabefeld kann die Rechtschreibprüfung aktivieren, wenn es nicht das readonly-Attribut gesetzt hat und nicht deaktiviert ist.

Der durch das Lesen von spellcheck zurückgegebene Wert entspricht möglicherweise nicht dem tatsächlichen Zustand des Textprüfung innerhalb eines Steuerelements, wenn die Einstellungen des User-Agent die Einstellung außer Kraft setzen.

Wenn Sie eine URL-Eingabe mit dem richtigen type-Wert, url, erstellen, erhalten Sie automatisch eine Validierung, dass der eingegebene Text zumindest die richtige Form hat, um potenziell eine legitime URL zu sein. Dies kann helfen, Fälle zu vermeiden, in denen der Benutzer die Adresse seiner Website falsch eingibt, oder eine ungültige angibt.

Es ist jedoch wichtig, zu beachten, dass dies nicht ausreicht, um sicherzustellen, dass der angegebene Text eine tatsächlich existierende URL ist, die dem Benutzer der Seite gehört, oder in irgendeiner anderen Weise akzeptabel ist. Es stellt sicher, dass der Wert des Feldes korrekt formatiert ist, um eine URL zu sein.

Dieses Element wird als standardmäßiges Texteinabefeld mit grundlegenden Validierungsfunktionen implementiert. In seiner einfachsten Form kann eine URL-Eingabe wie folgt implementiert werden:

<input id="myURL" name="myURL" type="url" /> 

Beachten Sie, dass es als gültig angesehen wird, wenn es leer ist und wenn eine einzige gültig formatierte URL-Adresse eingegeben wird, ansonsten jedoch nicht als gültig betrachtet wird. Durch das Hinzufügen des required-Attributs sind nur korrekt geformte URLs erlaubt; die Eingabe wird bei leerem Zustand nicht mehr als gültig angesehen.

Es passiert nichts Magisches hier. Wenn dieses Formular übermittelt würde, würden folgende Daten an den Server gesendet: myURL=http%3A%2F%2Fwww.example.com. Beachten Sie, wie Zeichen bei Bedarf maskiert werden.

Manchmal ist es hilfreich, einen kontextualen Hinweis zu geben, welche Form die eingegebenen Daten haben sollten. Dies kann besonders wichtig sein, wenn das Design der Seite keine beschreibenden Labels für jedes <input> bietet. Hier kommen Platzhalter ins Spiel. Ein Platzhalter ist ein Wert, der zeigt, welche Form der value haben sollte, indem ein Beispiel für einen gültigen Wert präsentiert wird, der innerhalb des Eingabefelds angezeigt wird, wenn der value-Wert 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 eine url-Eingabe mit dem Platzhalter http://www.example.com. Beachten Sie, wie der Platzhalter verschwindet und wieder erscheint, wenn Sie die Inhalte des Eingabefelds bearbeiten.

<input id="myURL" name="myURL" type="url" placeholder="http://www.example.com" /> 

Sie können sowohl die physische Länge des Eingabefelds als auch die minimalen und maximalen Längen, die für den Eingabetext erlaubt sind, steuern.

Physische Eingabeelementgröße

Die physische Größe des Eingabefelds kann mit dem size-Attribut gesteuert werden. Damit können Sie die Anzahl der Zeichen festlegen, die das Eingabefeld gleichzeitig anzeigen kann. In diesem Beispiel ist das url-Eingabefeld 30 Zeichen breit:

<input id="myURL" name="myURL" type="url" size="30" /> 

Länge des Elementwerts

Das size ist von der Längenbeschränkung des eingegebenen URLs selbst getrennt. Sie können mit dem minlength-Attribut die minimale Länge in Zeichen für die eingegebene URL festlegen; verwenden Sie entsprechend maxlength, um die maximale Länge der eingegebenen URL festzulegen. Wenn maxlength den size-Wert übersteigt, scrollen die Inhalte des Eingabefelds bei Bedarf, damit der aktuelle Auswahl- oder Einfügepunkt angezeigt wird, während der Inhalt manipuliert wird.

Das folgende Beispiel erstellt ein 30 Zeichen breites URL-Adress-Eingabefeld, das erfordert, dass der Inhalt nicht kürzer als 10 Zeichen und nicht länger als 80 Zeichen ist.

<input id="myURL" name="myURL" type="url" size="30" minlength="10" maxlength="80" /> 

Bereitstellung eines einzelnen Standards mit dem value-Attribut

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

<input id="myURL" name="myURL" type="url" value="http://www.example.com" /> 

Anbieten vorgeschlagener Werte

Um einen Schritt weiter zu gehen, können Sie eine Liste von Standardoptionen bereitstellen, aus denen der Benutzer auswählen kann, indem Sie das list-Attribut angeben. Dies begrenzt den Benutzer nicht auf diese Optionen, ermöglicht es ihm jedoch, häufiger genutzte URLs schneller auszuwählen. Dies bietet auch Hinweise für die autocomplete. Das list-Attribut gibt die ID eines <datalist> an, der wiederum ein <option>-Element pro vorgeschlagenem Wert enthält; jeder option's value ist der entsprechende vorgeschlagene Wert für das URL-Eingabefeld.

<input id="myURL" name="myURL" type="url" list="defaultURLs" /> <datalist id="defaultURLs"> <option value="https://developer.mozilla.org/"></option> <option value="http://www.google.com/"></option> <option value="http://www.microsoft.com/"></option> <option value="https://www.mozilla.org/"></option> <option value="http://w3.org/"></option> </datalist> 

Mit dem <datalist>-Element und seinen <option>s wird der Browser die angegebenen Werte als potenzielle Werte für die URL anbieten; dies wird typischerweise als Popup oder Dropdown-Menü präsentiert, das die Vorschläge enthält. Während die spezifische Benutzererfahrung von Browser zu Browser variieren kann, wird das Klicken in das Eingabefeld typischerweise ein Dropdown mit den vorgeschlagenen URLs anzeigen. Dann wird die Liste beim Tippen des Benutzers angepasst, um nur passende Werte anzuzeigen. Jeder eingegebene Buchstabe reduziert die Liste, bis der Benutzer eine Auswahl trifft oder einen benutzerdefinierten Wert eingibt.

Verwendung von Labels für vorgeschlagene Werte

Sie können das label-Attribut bei einem oder allen <option>-Elementen hinzufügen, um Textlabels bereitzustellen. Einige Browser zeigen möglicherweise nur die Labels an, während andere sowohl das Label als auch die URL anzeigen.

<input id="myURL" name="myURL" type="url" list="defaultURLs" /> <datalist id="defaultURLs"> <option value="https://developer.mozilla.org/" label="MDN Web Docs"></option> <option value="http://www.google.com/" label="Google"></option> <option value="http://www.microsoft.com/" label="Microsoft"></option> <option value="https://www.mozilla.org/" label="Mozilla"></option> <option value="http://w3.org/" label="W3C"></option> </datalist> 

Für url-Eingaben stehen zwei Stufen der Inhaltsvalidierung zur Verfügung. Erstens gibt es die Standardvalidierungsstufe, die allen <input>s angeboten wird, die automatisch sicherstellt, dass die Inhalte die Anforderungen erfüllen, um eine gültige URL zu sein. Aber es gibt auch die Möglichkeit, zusätzliche Filter hinzuzufügen, um sicherzustellen, dass Ihre eigenen speziellen Bedürfnisse erfüllt werden, falls Sie welche haben.

Browser, die den url-Eingabetyp unterstützen, bieten automatisch eine Validierung, um sicherzustellen, dass nur Text eingegeben wird, der dem Standardformat für URLs entspricht, in das Eingabefeld eingegeben wird.

Die Syntax einer URL ist ziemlich kompliziert. Sie wird durch den WHATWG's URL Living Standard definiert und wird für Neulinge in unserem Artikel Was ist eine URL? beschrieben.

Wie bereits erwähnt, um eine URL-Eingabe zu erzwingen, bevor das Formular eingereicht werden kann (sie dürfen das Feld nicht leer lassen), müssen Sie nur das required-Attribut auf dem Eingabefeld hinzufügen.

Wenn Sie die eingegebene URL weiter einschränken müssen als nur auf „jede Zeichenfolge, die wie eine URL aussieht“, können Sie das pattern-Attribut verwenden, um einen regulären Ausdruck anzugeben, mit dem der Wert übereinstimmen muss, damit der Wert gültig ist.

In diesem Beispiel stellen wir sicher, dass eine URL mit dem required-Attribut ausgefüllt wird und dass die URL etwas auf mozilla.org ist, indem zur Veranschaulichung das pattern-Attribut verwendet wird.

HTML

Im url-Eingabefeld setzen wir pattern auf ".*\.mozilla\.org.*". Dieser reguläre Ausdruck validiert eine Zeichenfolge, die eine beliebige Anzahl von Zeichen hat, gefolgt von ".mozilla.org", gefolgt von einer beliebigen Anzahl von Zeichen. Da der Browser sowohl den Standard-URL-Filter als auch unser benutzerdefiniertes Muster gegen den angegebenen Text ausführt, enden wir mit einer Validierung, die sagt: „Stellen Sie sicher, dass dies eine gültige URL ist und auch .mozilla.org enthält.“

Beachten Sie, dass ein strenges Muster wie https://developer\.mozilla\.org.* robuster wäre, aber das würde in diesem Fall das type="url"-Attribut redundant machen.

Das title-Attribut beschreibt auch das pattern für Benutzer mit unterstützenden Technologien.

<form> <label for="myURL"> Enter a url from this site: <input id="myURL" name="myURL" type="url" required pattern=".*\.mozilla\.org.*" title="URL should include mozilla.org" /> <span class="validity"></span> </label> <button>Submit</button> </form> 

CSS

Das CSS gibt visuelle Hinweise, um dem Benutzer zu zeigen, ob der Inhalt :valid oder :invalid ist, indem eine entsprechende content-Eigenschaft hinzugefügt und Alternativtext für Benutzer mit unterstützenden Technologien eingeschlossen wird.

input:focus:invalid { outline: 2px solid red; } input:focus:valid { outline: 2px solid green; } input + span { padding: 0 0.3rem; } input:invalid + span::after { content: "✖" / "Content is not valid"; color: red; } input:valid + span::after { content: "✓" / "Content is valid"; color: green; } 

Ergebnis

Kopieren Sie die URL dieser Seite und fügen Sie sie in das Eingabefeld ein und Sie sehen einen grünen Rahmen und ein grünes Häkchen. Geben Sie eine andere URL ein, die nicht mozilla.org enthält, oder eine ungültige URL, und Sie sehen einen roten Rahmen und ein rotes Kreuz.

Überprüfen Sie die Abschnitte Muster-Validierung und Verwendung von URL-Eingaben für weitere Beispiele.

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