<input type="url"> HTML-Attributwert

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 abgeschickt werden kann. Die CSS-Pseudoklassen :valid und :invalid werden automatisch angewendet, um visuell anzuzeigen, ob der aktuelle Feldwert eine gültige URL ist oder nicht.

Wert

Das value-Attribut des <input>-Elements enthält einen String, der automatisch als URL-Syntax validiert wird. 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 einzelne korrekt gebildete absolute URL. Dies bedeutet nicht unbedingt, dass die URL-Adresse existiert, aber sie ist zumindest korrekt formatiert. Ein Eintrag, der urlscheme://rest-of-url entspricht, kann gültig sein, auch wenn das eingegebene urlscheme nicht existiert.

Siehe Validierung für Details, 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

Die Werte des list-Attributs sind die id eines <datalist>-Elements im selben Dokument. Die <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 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 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 kein maxlength angegeben ist oder ein ungültiger Wert angegeben ist, hat die url-Eingabe keine maximale Länge. Dieser Wert muss auch größer oder gleich dem Wert von minlength sein.

Die Eingabe wird bei der Einschränkungsvalidierung fehlschlagen, wenn die Länge des Textwerts des Feldes größer als maxlength UTF-16-Codeeinheiten lang ist. Die Einschränkungsvalidierung 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 durch maxlength angegebenen Wert ist. Wenn kein minlength angegeben ist oder ein ungültiger Wert angegeben ist, hat die url-Eingabe keine Mindestlänge.

Die Eingabe wird bei der Einschränkungsvalidierung fehlschlagen, wenn die Länge des in das Feld eingegebenen Textes kürzer 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, den der value der Eingabe erfüllen muss, um die Einschränkungsvalidierung zu bestehen. Es muss ein gültiger JavaScript-Regulärer Ausdruck sein, wie er durch den 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, so dass das Muster als Folge von Unicode-Codepunkten behandelt wird, anstatt als ASCII. Keine Schrägstriche sollten um den Mustertext angegeben werden.

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

Siehe den Abschnitt Mustervalidierung 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 im Feld erwartet wird. Es sollte ein Wort oder kurzer Ausdruck sein, der die erwartete Art von Daten demonstriert, anstatt eine erklärende Nachricht. Der Text darf keine Wagenrückläufe oder Zeilenumbrüche enthalten.

Wenn die Richtung des Inhalts der Steuerung (LTR oder RTL) in einer entgegengesetzten Ausrichtung präsentiert werden muss, können Sie Unicode-Bidi-Algorithmus-Formatierungszeichen verwenden, um die Ausrichtung innerhalb des Platzhalters zu überschreiben; siehe Wie man Unicode-Steuerungen für Bidi-Text verwendet für weitere Informationen.

readonly

Das readonly Boolesche Attribut, wenn es vorhanden ist, bedeutet, dass dieses Feld nicht vom Benutzer bearbeitet werden kann. Sein value kann jedoch immer noch durch direktes Setzen der value-Eigenschaft des HTMLInputElement durch JavaScript-Code 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 ist 20. Da Zeichenbreiten variieren, kann dies mehr oder weniger präzise sein und sollte nicht darauf verlassen werden; die resultierende Eingabe kann schmaler oder breiter sein als die angegebene Anzahl von Zeichen, abhängig von den Zeichen und den (font-Einstellungen in Verwendung).

Dies setzt keine Grenze dafür, wie viele Zeichen der Benutzer in das Feld eingeben kann. Es gibt nur an, wie viele ungefähr gleichzeitig angezeigt werden 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, aber hier betrachten wir die Besonderheiten im Zusammenhang mit der 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 Standardverhalten des Elements für die Rechtschreibprüfung. Dies kann auf der spellcheck-Einstellung 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 Wert, der durch das Lesen von spellcheck zurückgegeben wird, spiegelt möglicherweise nicht den tatsächlichen Zustand 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 entsprechenden type-Wert, url, erstellen, erhalten Sie eine automatische Validierung, dass der eingegebene Text mindestens 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 der angegebene Text eine URL ist, die tatsächlich existiert, dem Benutzer der Seite entspricht oder in irgendeiner anderen Weise akzeptabel ist. Es stellt sicher, dass der Wert des Feldes korrekt formatiert ist, um eine URL zu sein.

Ein einfaches URL-Eingabefeld

Dieses Element wird als Standard-Text-Eingabefeld 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 einzige gültig formatiert URL-Adresse eingegeben wird, aber ansonsten nicht als gültig angesehen wird. Durch Hinzufügen des required-Attributs sind nur korrekt formatierte URLs erlaubt; die Eingabe wird nicht mehr als gültig angesehen, wenn sie leer ist.

Es passiert nichts Magisches hier. 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 maskiert werden.

Platzhalter

Manchmal kann es hilfreich sein, einen Hinweis im Kontext zu geben, in welcher Form die Eingabedaten sein 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 eines gültigen Wertes bereitstellt, 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, wenn Sie den Inhalt des Bearbeitungsfeldes ändern.

<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 zulässige Länge für den Eingabetext steuern.

Physische Größe des Eingabeelements

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 zum Beispiel 30 Zeichen breit:

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

Länge des Elementwertes

Das size ist unabhängig 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; verwenden Sie ähnlich maxlength, um die maximale Länge der eingegebenen URL festzulegen. Wenn maxLength size überschreitet, scrollt der Inhalt des Eingabefeldes bei Bedarf, um die aktuelle Auswahl oder den Einfügepunkt anzuzeigen, während der Inhalt bearbeitet wird.

Das folgende Beispiel erstellt ein 30-Zeichen breites URL-Adresse-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 von Standardoptionen

Bereitstellung einer einzigen Standardeinstellung mit dem Wert-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" />

Vorschlagen von Werten

Einen Schritt weitergehend, können Sie eine Liste von Standardoptionen bereitstellen, aus denen der Benutzer auswählen kann, indem Sie das list-Attribut festlegen. Dies schränkt den Benutzer nicht auf diese Optionen ein, ermöglicht es ihm jedoch, häufig verwendete URLs schneller auszuwählen. Dies bietet auch Hinweise für autocomplete. Das list-Attribut gibt die ID eines <datalist> an, das wiederum 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 potenzielle Werte für die URL anbieten; dies wird normalerweise 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 der vorgeschlagenen URLs präsentiert. Dann wird die Liste beim Tippen des Benutzers angepasst, um nur passende Werte anzuzeigen. Jedes getippte Zeichen reduziert die Liste, bis der Benutzer eine Auswahl trifft oder einen benutzerdefinierten Wert eingibt.

Verwendung von Labels für vorgeschlagene Werte

Sie können wählen, das label-Attribut auf einem oder allen Ihrer <option>-Elemente einzuschließen, 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 Standardvalidierungsebene, die alle <input>s bieten, 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 vorhanden.

Grundlegende Validierung

Browser, die den url-Eingabetyp unterstützen, bieten automatisch eine Validierung, um sicherzustellen, dass nur Text eingegeben werden kann, der das Standardformat für URLs erfüllt.

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

Eine URL erforderlich machen

Wie bereits erwähnt, um eine URL-Eingabe erforderlich zu machen, bevor das Formular eingereicht werden kann (Sie können das Feld nicht leer lassen), müssen Sie nur das required-Attribut auf der Eingabe enthalten.

Mustervalidierung

Wenn Sie möchten, dass die eingegebene URL weiter eingeschränkt wird als nur "jeder String, der wie eine URL aussieht", können Sie das pattern-Attribut verwenden, um einen regulären Ausdruck anzugeben, den der Wert erfüllen muss, um gültig zu sein.

Beispiele

URL-Validierung

In diesem Beispiel stellen wir sicher, dass eine URL mit dem required-Attribut ausgefüllt ist und dass die URL etwas auf mozilla.org ist, indem wir das pattern-Attribut verwenden, um das zu veranschaulichen.

HTML

In der url-Eingabe setzen wir pattern auf ".*\.mozilla\.org.*". Dieser reguläre Ausdruck validiert einen String, der aus einer beliebigen Anzahl von Zeichen, gefolgt von ".mozilla.org" und gefolgt von einer beliebigen Anzahl von Zeichen besteht. Da der Browser sowohl den Standard-URL-Filter als auch unser benutzerdefiniertes Muster gegen den angegebenen Text ausführt, erhalten wir eine Validierung, die besagt: "Stellen Sie sicher, dass dies eine gültige URL ist, die auch .mozilla.org enthält."

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

Das title-Attribut beschreibt auch das pattern für Benutzer mit assistierenden 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 durch die Hinzufügung einer entsprechenden content-Eigenschaft :valid oder :invalid ist und beinhaltet Alternativtext für Benutzer mit assistierenden 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, und Sie werden einen grünen Umriss und ein grünes Häkchen sehen. Geben Sie eine andere URL ein, die nicht mozilla.org enthält oder eine ungültige URL ist, und Sie werden einen roten Umriss und ein rotes Kreuz sehen.

Siehe die Abschnitte Mustervalidierung und Verwendung von URL-Eingaben für andere Beispiele.

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• HTML-Formulareitfaden
• <input>
• <input type="tel">
• <input type="email">