<input type="url">

Probieren Sie es aus

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

Wert

Das value-Attribut des <input> Elements enthält einen String, der automatisch so validiert wird, dass er der URL-Syntax entspricht. Genauer gesagt, gibt es zwei mögliche Wertformate, die die Validierung bestehen:

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

Siehe Validierung für Details zur Validierung von URLs, um sicherzustellen, dass sie korrekt formatiert sind.

Zusätzliche Attribute

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

list

Der Wert des list Attributs ist die id eines <datalist> Elements, das im gleichen Dokument enthalten ist. Das <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 nicht in die vorgeschlagenen Optionen aufgenommen. Die bereitgestellten Werte sind Vorschläge und keine Anforderungen: Benutzer können aus dieser vordefinierten Liste auswählen oder einen anderen Wert angeben.

maxlength

Die maximale Zeichenlänge (gemessen in UTF-16-Codeeinheiten), die der Benutzer in das url Eingabefeld eingeben kann. Dies muss ein ganzzahliger Wert von 0 oder höher sein. Wenn keine maxlength angegeben ist oder ein ungültiger Wert angegeben wird, hat die url Eingabe keine maximale Länge. Dieser Wert muss außerdem größer oder gleich dem Wert von minlength sein.

Die Eingabe schlägt die Constraint-Validierung fehl, wenn die Länge des Textwerts des Feldes größer als maxlength UTF-16-Codeeinheiten ist. Constraint-Validierung wird nur angewendet, wenn der Wert vom Benutzer geändert wird.

minlength

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

Die Eingabe schlägt die Constraint-Validierung fehl, wenn die Länge des in das Feld eingegebenen Textes kürzer als minlength UTF-16-Codeeinheiten ist. Constraint-Validierung 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 der Eingabe übereinstimmen muss, damit der Wert die Constraint-Validierung besteht. 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-Codepunkten behandelt wird, anstatt als ASCII. Vorwärtsschrägstriche sollten nicht um den Mustertest 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.

Siehe den Abschnitt Muster-Validierung für Details und ein Beispiel.

placeholder

Das placeholder Attribut ist ein String, der dem Benutzer einen kurzen Hinweis darauf gibt, welche Art von Informationen in dem Feld erwartet werden. Es sollte ein Wort oder eine kurze Phrase sein, die den erwarteten Datentyp demonstriert, anstatt eine erklärende 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 soll, können Sie die Formatierungszeichen der bidirektionalen Unicode-Algorithmus verwenden, um die Richtung innerhalb des Platzhalters zu überschreiben; siehe Wie man Unicode-Steuerzeichen für bidi-Text verwendet für weitere Informationen.

readonly

Das readonly Boolean-Attribut, falls vorhanden, bedeutet, dass dieses Feld vom Benutzer nicht bearbeitet werden kann. Sein value kann jedoch immer noch durch JavaScript-Code direkt durch Einstellen der HTMLInputElement value Eigenschaft geändert werden.

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 beträgt 20. Da sich Zeichenbreiten unterscheiden, kann dies möglicherweise nicht genau sein und sollte nicht darauf verlassen werden; das resultierende Eingabefeld kann je nach Zeichen und Schriftart (font Einstellungen in Verwendung) schmaler oder breiter als die angegebene Anzahl von Zeichen sein.

Dies setzt kein Limit auf die Anzahl der Zeichen, die 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.

spellcheck

Das spellcheck globale Attribut wird verwendet, um anzugeben, ob die Rechtschreibprüfung für ein Element aktiviert werden soll. Es kann auf jedem bearbeitbaren Inhalt verwendet werden, hier betrachten wir jedoch die Spezifika im Zusammenhang mit der Verwendung von spellcheck auf <input> Elementen. Die zulässigen Werte für spellcheck sind:

false

Deaktiviert die Rechtschreibprüfung für dieses Element.

true

Aktiviert die Rechtschreibprüfung für dieses Element.

"" (leer) oder kein Wert

Folgt dem Standardverhalten 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 aktiviert haben, wenn es nicht das readonly Attribut gesetzt hat und nicht deaktiviert ist.

Der durch das Lesen von spellcheck zurückgegebene Wert spiegelt möglicherweise nicht den tatsächlichen Status der Rechtschreibprüfung innerhalb einer Steuerung wider, wenn die Präferenzen des Benutzeragenten die Einstellung überschreiben.

Verwendung von URL-Eingaben

Wenn Sie eine URL-Eingabe mit dem richtigen type Wert url erstellen, erhalten Sie eine automatische Validierung, dass der eingegebene Text zumindest in der richtigen Form ist, 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 es sich bei dem angegebenen Text um eine URL handelt, die tatsächlich existiert, dem Benutzer der Site entspricht oder auf andere Weise akzeptabel ist. Es stellt sicher, dass der Wert des Feldes korrekt formatiert ist, um eine URL zu sein.

Eine grundlegende URL-Eingabe

Dieses Element wird als Standard-Text-Eingabefeld mit grundlegenden Validierungsfunktionen implementiert. In seiner grundlegendsten Form kann eine URL-Eingabe so implementiert werden:

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

Beachten Sie, dass es als gültig betrachtet wird, wenn es leer ist und wenn eine einzelne gültig formatierte URL-Adresse eingegeben wird, aber ansonsten nicht als gültig angesehen wird. Durch Hinzufügen des required Attributs sind nur korrekt gebildete URLs erlaubt; die Eingabe wird nicht mehr als gültig angesehen, wenn sie leer ist.

Hier passiert nichts Magisches. Das Absenden dieses Formulars würde dazu führen, dass die folgenden Daten an den Server gesendet werden: myURL=http%3A%2F%2Fwww.example.com. Beachten Sie, wie Zeichen bei Bedarf escaped werden.

Platzhalter

Manchmal ist es hilfreich, einen kontextabhängigen Hinweis darauf zu geben, in welchem Format 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 veranschaulicht, indem er ein Beispiel für einen gültigen Wert präsentiert, der innerhalb des Bearbeitungsfeldes angezeigt wird, wenn der value des Elements "". 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 auftaucht, während Sie den Inhalt des Bearbeitungsfeldes manipulieren.

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

Steuerung der Eingabegröße

Sie können sowohl die physische Länge des Eingabefeldes als auch die minimal und maximal erlaubten Längen für den eingegebenen Text steuern.

Physische Eingabeelementgröße

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

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

Elementwertlänge

Das size ist getrennt von der Längenbegrenzung für die eingegebene URL selbst. Sie können eine Mindestlänge in Zeichen für die eingegebene URL mithilfe des minlength Attributs festlegen; verwenden Sie ähnlich maxlength, um die maximale Länge der eingegebenen URL festzulegen. Wenn maxLength size übersteigt, scrollt der Inhalt des Eingabefeldes nach Bedarf, um die aktuelle Auswahl oder den Einfügepunkt anzuzeigen, während der Inhalt manipuliert wird.

Das untenstehende Beispiel erstellt ein 30 Zeichen breites URL-Eingabefeld, das verlangt, 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" />

Standardoptionen bereitstellen

Bereitstellung eines einzigen Standards mit dem value-Attribut

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

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

Vorschlag von Werten

Einen Schritt weiter können Sie eine Liste von Standardoptionen bereitstellen, aus denen der Benutzer auswählen kann, indem Sie das list Attribut spezifizieren. Dies schränkt den Benutzer nicht auf diese Optionen ein, ermöglicht ihm jedoch die schnellere Auswahl häufig benutzter URLs. Dies bietet auch Hinweise für autocomplete. Das list Attribut spezifiziert die ID eines <datalist>, das seinerseits ein <option> Element pro vorgeschlagenem Wert enthält; der value jedes option 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 an Ort und Stelle wird der Browser die angegebenen Werte als mögliche Werte für die URL anbieten; dies wird typischerweise als Popup- oder Dropdown-Menü mit den Vorschlägen präsentiert. Während die spezifische Benutzererfahrung von einem Browser zum anderen variieren kann, wird typischerweise durch Klicken in das Bearbeitungsfeld ein Dropdown-Menü der vorgeschlagenen URLs präsentiert. Dann wird die Liste, während der Benutzer tippt, angepasst, um nur übereinstimmende Werte anzuzeigen. Jede eingetippte Zeichen verringert die Liste, bis der Benutzer eine Auswahl trifft oder einen benutzerdefinierten Wert eingibt.

Verwenden von Labels für vorgeschlagene Werte

Sie können das label Attribut an einem oder allen Ihrer <option> Elemente angeben, um textuelle Labels 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>

Validierung

Es gibt zwei Ebenen der Inhaltsvalidierung für url Eingaben. Erstens gibt es die Standard-Ebene der Validierung, die allen <input> s angeboten wird, die automatisch sicherstellt, dass die Inhalte den Anforderungen entsprechen, um eine gültige URL zu sein. Aber es besteht auch die Möglichkeit, zusätzliche Filter hinzuzufügen, um sicherzustellen, dass Ihre eigenen speziellen Bedürfnisse erfüllt werden, falls Sie welche haben.

Grundlegende Validierung

Browser, die den url Eingabetyp unterstützen, bieten automatisch eine Validierung an, um sicherzustellen, dass nur Text, 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 für Neulinge in unserem Artikel Was ist eine URL? beschrieben.

Eine URL erforderlich machen

Wie vorhin erwähnt, um eine URL-Eingabe erforderlich zu machen, bevor das Formular abgeschickt werden kann (Sie können das Feld nicht leer lassen), müssen Sie einfach das required Attribut angeben.

Muster-Validierung

Wenn Sie möchten, dass die eingegebene URL weiter eingeschränkt wird als nur "jede Zeichenkette, die wie eine URL aussieht", können Sie das pattern Attribut verwenden, um einen regulären Ausdruck anzugeben, dem der Wert entsprechen muss, damit der Wert gültig ist.

Beispiele

URL-Validierung

In diesem Beispiel stellen wir sicher, dass eine URL mit dem required Attribut angegeben wurde und dass die URL eine auf mozilla.org ist, indem das pattern Attribut als Illustration verwendet wird.

HTML

In der url Eingabe setzen wir pattern auf ".*\.mozilla\.org.*". Dieser reguläre Ausdruck validiert eine Zeichenkette, die eine beliebige Anzahl von Zeichen enthält, 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 spezifizierten Text ausführt, erhalten wir eine Validierung, die sagt "stellen Sie sicher, dass dies eine gültige URL ist, und dass sie .mozilla.org enthält."

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

Das title Attribut beschreibt auch das pattern für Nutzer 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 den Benutzer zu zeigen, ob der Inhalt :valid oder :invalid ist, indem eine entsprechende content Eigenschaft hinzugefügt wird und alternativer Text für Nutzer von unterstützenden Technologien enthalten ist.

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 werden einen grünen Umriss und ein grünes Häkchen sehen. Geben Sie eine beliebige andere URL ein, die mozilla.org nicht enthält oder eine ungültige URL, und Sie werden einen roten Umriss und ein rotes Kreuz sehen.

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

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

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