<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 ist oder eine korrekt formatierte URL darstellt, bevor das Formular gesendet 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 eine Zeichenfolge, die automatisch darauf überprüft wird, ob sie der URL-Syntax entspricht. Genauer gesagt, gibt es zwei mögliche Wertformate, die die Validierung bestehen:

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

Unter Validierung finden Sie Einzelheiten, wie URLs validiert werden, um sicherzustellen, dass sie korrekt formatiert sind.

Zusätzliche Attribute

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

list

Der Wert des list-Attributs ist die id eines <datalist>-Elements, das sich im selben Dokument befindet. Das <datalist> bietet eine Liste von vordefinierten Werten, die dem Benutzer für diese Eingabe vorgeschlagen werden. Alle Werte in der Liste, die nicht mit dem type 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 angeben.

maxlength

Die maximale Zeichenfolgenlänge (gemessen in UTF-16-Codeeinheiten), 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 wird die Einschränkungsvalidierung nicht bestehen, wenn die Länge des Textwerts des Feldes länger als maxlength- UTF-16-Codeeinheiten ist. Die Einschränkungsvalidierung wird nur angewendet, wenn der Wert vom Benutzer geändert wird.

minlength

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

Die Eingabe wird die Einschränkungsvalidierung nicht bestehen, wenn die Länge des in das Feld eingegebenen Textes weniger als minlength- UTF-16-Codeeinheiten lang ist. Die Einschränkungsvalidierung wird nur angewendet, wenn der Wert vom Benutzer geändert wird.

pattern

Das pattern-Attribut, wenn es angegeben ist, ist ein regulärer Ausdruck, dem der value der Eingabe entsprechen muss, um die Einschränkungsvalidierung zu bestehen. Es muss ein gültiger regulärer JavaScript-Ausdruck sein, wie er vom RegExp-Typ verwendet wird und wie in unserem Leitfaden zu regulären Ausdrücken dokumentiert; das 'u'-Flag wird beim Kompilieren des regulären Ausdrucks angegeben, damit das Muster als Folge von Unicode-Codepunkten behandelt wird, anstelle von ASCII. 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.

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

placeholder

Das placeholder-Attribut ist eine Zeichenfolge, die dem Benutzer einen kurzen Hinweis darauf gibt, welche Art von Informationen im Feld erwartet werden. Es sollte ein Wort oder ein kurzer Satz sein, der die erwartete Art von Daten zeigt, anstatt einer erläuternden Nachricht. Der Text darf keine Wagenrückläufe oder Zeilenumbrüche 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-Algorithmusformatierungszeichen verwenden, um die Richtung innerhalb des Platzhalters zu überschreiben. Weitere Informationen finden Sie unter Anleitung zur Verwendung von Unicode-Steuerelementen für bidi-Text.

readonly

Das readonly-Boolesche Attribut, falls vorhanden, bedeutet, dass dieses Feld vom Benutzer nicht bearbeitet werden kann. Sein value kann jedoch weiterhin durch direktes Setzen des HTMLInputElement- value-Eigenschaft durch JavaScript-Code geändert werden.

size

Das size-Attribut ist ein numerischer Wert, der angibt, wie viele Zeichen breit das Eingabefeld sein sollte. Der Wert muss eine Zahl größer als null sein, und der Standardwert ist 20. Da Zeichenbreiten variieren, ist dies möglicherweise nicht exakt und sollte nicht als solche angesehen werden; die resultierende Eingabe kann schmaler oder breiter sein als die angegebene Anzahl von Zeichen, abhängig von den Zeichen und der Schriftart (font-Einstellungen, die verwendet werden).

Dies setzt keine Grenze dafür, wie viele Zeichen der Benutzer in das Feld eingeben kann. Es gibt nur an, 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.

spellcheck

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 Beziehungen zur Verwendung von spellcheck auf <input>-Elementen. Die erlaubten Werte für spellcheck sind:

false

Deaktivieren der Rechtschreibprüfung für dieses Element.

true

Aktivieren der Rechtschreibprüfung für dieses Element.

"" (leere Zeichenfolge) oder kein Wert

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

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

Der durch das Lesen von spellcheck zurückgegebene Wert spiegelt möglicherweise nicht den tatsächlichen Zustand der Rechtschreibprüfung innerhalb eines Steuerelements wider, wenn die Einstellungen des Benutzeragenten die Einstellung überschreiben.

Verwendung von URL-Eingaben

Wenn Sie eine URL-Eingabe mit dem richtigen type-Wert, url, erstellen, erhalten Sie automatische Validierung, dass der eingegebene Text mindestens im richtigen Format ist, um möglicherweise 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 URL ist, die tatsächlich existiert, dem Benutzer der Website entspricht oder in irgendeiner Weise akzeptabel ist. Es stellt lediglich sicher, dass der Wert des Feldes korrekt formatiert ist, um eine URL zu sein.

Eine grundlegende URL-Eingabe

Dieses Element wird als normales Texteingabefeld mit grundlegenden Validierungsfunktionen implementiert. In seiner grundlegendsten 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 einzelne korrekt formatierte URL-Adresse eingegeben wird. Andernfalls wird es nicht als gültig angesehen. Durch Hinzufügen des required-Attributs sind nur korrekt formatierte URLs zulässig; die Eingabe wird nicht mehr als gültig angesehen, wenn sie leer ist.

Hier geschieht nichts Magisches. Wenn Sie dieses Formular absenden würden, würden die folgenden Daten an den Server gesendet: myURL=http%3A%2F%2Fwww.example.com. Beachten Sie, wie Zeichen bei Bedarf maskiert werden.

Platzhalter

Manchmal ist es hilfreich, einen kontextbezogenen 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> bietet. Hier kommen Platzhalter ins Spiel. Ein Platzhalter ist ein Wert, der die Form des value demonstriert, indem er ein Beispiel für einen gültigen Wert präsentiert, der im Bearbeitungsfeld angezeigt wird, wenn der value 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, während Sie den Inhalt des Bearbeitungsfelds 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 Eingabefelds als auch die minimal und maximal zulässigen 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 beispielsweise 30 Zeichen breit:

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

Wertlänge des Elements

Die size ist getrennt von der Längenbeschränkung der eingegebenen URL selbst. Sie können eine Mindestlänge in Zeichen für die eingegebene URL mit dem minlength-Attribut angeben; ebenso verwenden Sie maxlength, um die maximale Länge der eingegebenen URL festzulegen. Wenn maxLength die size überschreitet, wird der Inhalt des Eingabefeldes bei Bedarf gescrollt, um den aktuellen Auswahl- oder Einfügepunkt anzuzeigen, während der Inhalt bearbeitet wird.

Das unten stehende Beispiel erstellt ein 30 Zeichen breites URL-Adresseneingabefeld, 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" />

Vorgabeoptionen bereitstellen

Einzelne Vorgabe mit dem Value-Attribut bereitstellen

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

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

Vorgeschlagene Werte anbieten

Einen Schritt weiter können Sie eine Liste von Standardoptionen bereitstellen, aus denen der Benutzer auswählen kann, indem Sie das list-Attribut festlegen. Dies beschränkt den Benutzer nicht auf diese Optionen, ermöglicht es ihm jedoch, gebräuchlich verwendete URLs schneller auszuwählen. Dies bietet auch Hinweise für autocomplete. Das list-Attribut gibt die ID eines <datalist>, an, das seinerseits ein <option>-Element pro Vorschlagswert enthält; jeder option-value ist der entsprechende Vorschlag 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>en an Ort und Stelle, bietet der Browser die angegebenen Werte als mögliche Werte für die URL an; dies wird meist als Pop-up oder Dropdown-Menü präsentiert, welches die Vorschläge enthält. Während die spezifische Benutzererfahrung je nach Browser variieren kann, wird normalerweise durch Klicken in das Bearbeitungsfeld ein Dropdown der vorgeschlagenen URLs angezeigt. Dann wird die Liste beim Tippen des Benutzers so angepasst, dass nur übereinstimmende Werte angezeigt werden. Jedes getippte Zeichen schränkt die Liste weiter ein, bis der Benutzer eine Auswahl trifft oder einen benutzerdefinierten Wert eingibt.

Labels für vorgeschlagene Werte verwenden

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

<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

Für url-Eingaben stehen zwei Ebenen der Inhaltsvalidierung zur Verfügung. Erstens gibt es die Standardvalidierungsebene, die allen <input>-Elementen angeboten wird und automatisch sicherstellt, dass die Inhalte die Anforderungen erfüllen, um eine gültige URL zu sein. Aber es gibt auch die Option, zusätzliche Filter hinzuzufügen, um sicherzustellen, dass Ihre eigenen speziellen Anforderungen erfüllt sind, falls vorhanden.

Grundlegende Validierung

Browser, die den url-Eingabetyp unterstützen, bieten automatisch eine Validierung, 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 URL Living Standard des WHATWG definiert und für Neueinsteiger in unserem Artikel Was ist eine URL? beschrieben.

Eine URL erforderlich machen

Wie bereits erwähnt, können Sie einen URL-Eintrag erforderlich machen, bevor das Formular gesendet werden kann (d.h. Sie können das Feld nicht leer lassen), indem Sie einfach das required-Attribut in der Eingabe einschließen.

Musterprüfung

Wenn Sie die eingegebene URL weiter als nur "jede Zeichenfolge, die wie eine URL aussieht" einschränken müssen, 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 ausgefüllt wird und dass die URL auf mozilla.org liegt, indem wir das pattern-Attribut zur Veranschaulichung verwenden.

HTML

In der url-Eingabe setzen wir pattern auf ".*\.mozilla\.org.*". Dieser reguläre Ausdruck validiert eine Zeichenfolge, die eine beliebige Anzahl von Zeichen, gefolgt von ".mozilla.org", gefolgt von einer beliebigen Anzahl von Zeichen enthält. Da der Browser sowohl den Standard-URL-Filter als auch unser benutzerdefiniertes Muster auf den angegebenen Text anwendet, erhalten wir eine Validierung, die sagt: "Stellen Sie sicher, dass dies eine gültige URL ist, und enthält außerdem .mozilla.org."

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

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 anzuzeigen, ob der Inhalt :valid oder :invalid ist, indem eine entsprechende content-Eigenschaft hinzugefügt wird und alternativer Text für Benutzer mit unterstützenden Technologien bereitgestellt 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 werden einen grünen Umriss und ein grünes Häkchen sehen. Geben Sie eine 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 Pattern-Validierung und Verwenden von URL-Eingaben für andere Beispiele.

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

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