HTML-Attributwert <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;
}

Wert

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

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

Weitere Informationen darüber, wie URLs validiert werden, um sicherzustellen, dass sie korrekt formatiert sind, finden Sie unter Validierung.

Zusätzliche Attribute

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

list

Der Wert des Attributs list ist die id eines <datalist>-Elements, das sich im selben Dokument befindet. Das <datalist> stellt eine Liste vordefinierter Werte bereit, die dem Benutzer für diese Eingabe vorgeschlagen werden. Werte in der Liste, die nicht mit 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 Stringlä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 wird 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 besteht die Einschränkungsvalidierung nicht, wenn die Länge des Textwerts 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.

minlength

Die minimale Stringlä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 durch maxlength angegebenen Wert ist. Wenn kein minlength angegeben wird oder ein ungültiger Wert angegeben wird, hat die url-Eingabe keine Mindestlänge.

Die Eingabe besteht die Einschränkungsvalidierung nicht, 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 Attribut pattern ist, falls angegeben, ein regulärer Ausdruck, dem der value der Eingabe entsprechen muss, damit der Wert die Einschränkungsvalidierung besteht. Er muss ein gültiger JavaScript-regulärer Ausdruck sein, wie er vom Typ RegExp verwendet wird und wie in unserem Leitfaden zu regulären Ausdrücken dokumentiert; beim Kompilieren des regulären Ausdrucks wird das Flag 'u' angegeben, damit das Muster als Folge von Unicode-Codepunkten und nicht als ASCII behandelt wird. Um den Mustertext herum dürfen keine Schrägstriche angegeben werden.

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

Weitere Informationen und ein Beispiel finden Sie im Abschnitt Musterprüfung.

placeholder

Das Attribut placeholder ist ein String, der dem Benutzer einen kurzen Hinweis darauf gibt, welche Art von Informationen im Feld erwartet wird. Es sollte ein Wort oder eine kurze Phrase sein, die den erwarteten Datentyp veranschaulicht, und keine erläuternde Nachricht. Der Text darf keine Wagenrückläufe oder Zeilenvorschübe enthalten.

Wenn der Inhalt des Steuerelements eine Schreibrichtung (LTR oder RTL) besitzt, der Platzhalter jedoch in der entgegengesetzten Schreibrichtung dargestellt werden muss, können Sie Unicode-Formatierungszeichen des bidirektionalen Algorithmus verwenden, um die Schreibrichtung innerhalb des Platzhalters zu überschreiben. Weitere Informationen finden Sie unter How to use Unicode controls for bidi text.

readonly

Das boolesche Attribut readonly bedeutet, falls vorhanden, dass dieses Feld nicht vom Benutzer bearbeitet werden kann. Sein value kann jedoch weiterhin durch JavaScript-Code geändert werden, der die Eigenschaft value von HTMLInputElement direkt setzt.

size

Das Attribut size ist ein numerischer Wert, der angibt, wie viele Zeichen breit das Eingabefeld sein soll. Der Wert muss eine Zahl größer als null sein; der Standardwert ist 20. Da Zeichenbreiten variieren, kann dies exakt sein oder auch nicht und sollte nicht als exakt angenommen werden; die resultierende Eingabe kann je nach Zeichen und verwendeter Schriftart (font-Einstellungen) schmaler oder breiter als die angegebene Anzahl von Zeichen sein.

Dadurch wird keine Begrenzung dafür festgelegt, wie viele Zeichen der Benutzer in das Feld eingeben kann. Es wird nur ungefähr angegeben, wie viele gleichzeitig sichtbar sein können. Um eine Obergrenze für die Länge der Eingabedaten festzulegen, verwenden Sie das Attribut maxlength.

spellcheck

Das globale Attribut spellcheck wird verwendet, um anzugeben, ob die Rechtschreibprüfung für ein Element aktiviert werden soll. Es kann für jeden bearbeitbaren Inhalt verwendet werden, aber hier betrachten wir Besonderheiten im Zusammenhang mit der Verwendung von spellcheck bei <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.

"" (leerer String) oder kein Wert

Folgt dem Standardverhalten des Elements für die Rechtschreibprüfung. Dies kann auf der spellcheck-Einstellung eines Elternelements oder anderen Faktoren basieren.

Für ein Eingabefeld kann die Rechtschreibprüfung aktiviert sein, wenn das Attribut readonly nicht gesetzt und das Feld nicht deaktiviert ist.

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

Verwendung von URL-Eingaben

Wenn Sie eine URL-Eingabe mit dem korrekten type-Wert url erstellen, erhalten Sie eine automatische Validierung, dass der eingegebene Text zumindest die korrekte Form hat, 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 Adresse 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 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-Texteingabefeld 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 sie als gültig gilt, wenn sie leer ist und wenn eine einzelne gültig formatierte URL-Adresse eingegeben wird, ansonsten jedoch nicht. Durch Hinzufügen des Attributs required sind nur korrekt gebildete URLs erlaubt; die Eingabe gilt nicht mehr als gültig, wenn sie leer ist.

Hier geschieht nichts Magisches. Das Übermitteln 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 maskiert werden.

Platzhalter

Manchmal ist es hilfreich, einen kontextbezogenen Hinweis darauf zu geben, welche Form die Eingabedaten haben 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 anhand eines Beispiels für einen gültigen Wert veranschaulicht, welche Form value haben sollte. Er wird im Bearbeitungsfeld angezeigt, wenn der value des Elements "". Sobald Daten in das Feld eingegeben werden, verschwindet der Platzhalter; wird das Feld geleert, 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 den Inhalt des Bearbeitungsfelds ändern.

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

Steuern der Eingabegröße

Sie können sowohl die physische Länge des Eingabefelds als auch die erlaubten Mindest- und Maximallängen für den Eingabetext steuern.

Physische Größe des Eingabeelements

Die physische Größe des Eingabefelds kann über das Attribut size 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" />

Länge des Elementwerts

size ist von der Längenbegrenzung der eingegebenen URL selbst getrennt. Sie können mit dem Attribut minlength eine Mindestlänge der eingegebenen URL in Zeichen angeben; verwenden Sie entsprechend maxlength, um die maximale Länge der eingegebenen URL festzulegen. Wenn maxLength größer als size ist, scrollt der Inhalt des Eingabefelds bei Bedarf, um die aktuelle Auswahl oder Einfügemarke anzuzeigen, während der Inhalt bearbeitet wird.

Das folgende Beispiel erstellt ein 30 Zeichen breites Eingabefeld für URL-Adressen und erfordert, dass der Inhalt mindestens 10 und höchstens 80 Zeichen lang ist.

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

Standardoptionen bereitstellen

Einen einzelnen Standardwert mit dem value-Attribut bereitstellen

Wie immer können Sie einen Standardwert für ein url-Eingabefeld angeben, indem Sie dessen Attribut value setzen:

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

Vorgeschlagene Werte anbieten

Als Erweiterung können Sie durch Angabe des Attributs list eine Liste von Standardoptionen bereitstellen, aus denen der Benutzer auswählen kann. Dies beschränkt den Benutzer nicht auf diese Optionen, ermöglicht ihm jedoch, häufig verwendete URLs schneller auszuwählen. Außerdem bietet dies Hinweise für autocomplete. Das Attribut list gibt die ID eines <datalist> an, das wiederum ein <option>-Element für jeden vorgeschlagenen Wert enthält; der value jeder 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>

Wenn das <datalist>-Element und seine <option>s vorhanden sind, bietet der Browser die angegebenen Werte als mögliche Werte für die URL an; dies wird üblicherweise als Popup- oder Dropdown-Menü mit den Vorschlägen dargestellt. Die konkrete Benutzererfahrung kann zwar von Browser zu Browser variieren, aber typischerweise wird beim Klicken in das Bearbeitungsfeld ein Dropdown mit den vorgeschlagenen URLs angezeigt. Während der Benutzer tippt, wird die Liste angepasst, sodass nur übereinstimmende Werte angezeigt werden. Jedes eingegebene Zeichen grenzt 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 Attribut label bei einem oder allen Ihren <option>-Elementen verwenden, 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>

Validierung

Für url-Eingaben sind zwei Ebenen der Inhaltsvalidierung verfügbar. Erstens gibt es die Standardvalidierung, die für alle <input>s angeboten wird und automatisch sicherstellt, dass der Inhalt die Anforderungen für eine gültige URL erfüllt. Darüber hinaus besteht die Möglichkeit, zusätzliche Filter hinzuzufügen, um eigene spezielle Anforderungen zu erfüllen, falls vorhanden.

Grundlegende Validierung

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

Die Syntax einer URL ist recht komplex. Sie wird durch den URL Living Standard der WHATWG definiert und für Einsteiger in unserem Artikel What is a URL? beschrieben.

Eine URL erforderlich machen

Wie bereits erwähnt, müssen Sie nur das Attribut required zur Eingabe hinzufügen, um die Eingabe einer URL vor dem Übermitteln des Formulars erforderlich zu machen (das Feld darf nicht leer bleiben).

Musterprüfung

Wenn die eingegebene URL stärker eingeschränkt werden soll als auf „jeder String, der wie eine URL aussieht“, können Sie das Attribut pattern verwenden, um einen regulären Ausdruck anzugeben, dem der Wert entsprechen muss, damit er gültig ist.

Beispiele

URL-Validierung

In diesem Beispiel stellen wir mithilfe des Attributs required sicher, dass eine URL eingegeben wird, und veranschaulichen mithilfe des Attributs pattern, dass die URL auf mozilla.org liegt.

HTML

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

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

Das Attribut title beschreibt das pattern auch für Benutzer assistiver 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 durch Hinzufügen einer geeigneten Eigenschaft content anzuzeigen, ob der Inhalt :valid oder :invalid ist, und enthält alternativen Text für Benutzer assistiver Technologien.

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

Weitere Beispiele finden Sie in den Abschnitten Musterprüfung und Verwendung von URL-Eingaben.

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

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