<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 eingegebene Wert 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.

Wert

Das value-Attribut des <input>-Elements enthält eine Zeichenfolge, die automatisch als der URL-Syntax entsprechend validiert wird. Genauer gesagt gibt es zwei mögliche Wertformate, die die Validierung bestehen:

1. Eine leere Zeichenfolge ("") bedeutet, dass der Benutzer keinen Wert eingegeben hat oder dass der Wert entfernt wurde.
2. Eine einzelne, korrekt formatierte 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, selbst 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 wirken, unterstützen url-Eingaben die folgenden Attribute.

list

Die Werte des list-Attributs sind die id eines <datalist>-Elements, das sich im selben Dokument befindet. Das <datalist> bietet eine Liste vordefinierter Werte an, die dem Benutzer als Vorschläge für diese Eingabe dienen. Alle Werte in der Liste, die nicht mit dem type kompatibel sind, werden nicht in den vorgeschlagenen Optionen enthalten. Die bereitgestellten Werte sind Vorschläge, keine Anforderungen: Benutzer können aus dieser vordefinierten Liste auswählen oder einen anderen Wert eingeben.

maxlength

Die maximale Zeichenfolgenlä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 wird, gibt es keine maximale Länge für die url-Eingabe. Dieser Wert muss auch größer oder gleich dem Wert von minlength sein.

Die Eingabe wird die Einschränkungsüberprüfung nicht bestehen, wenn die Länge des Textwertes des Feldes maxlength UTF-16-Codeeinheiten überschreitet. Die Einschränkungsüberprüfung 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 Ganzzahlwert sein, der kleiner oder gleich dem durch 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 wird die Einschränkungsüberprüfung nicht bestehen, wenn die Länge des in das Feld eingegebenen Textes weniger als minlength UTF-16-Codeeinheiten beträgt. Die Einschränkungsüberprüfung 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 des Eingabefelds erfüllen muss, um die Einschränkungsüberprüfung zu bestehen. 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, sodass das Muster als Folge von Unicode-Codepunkten behandelt wird, anstatt als ASCII. Es sollten keine Schrägstriche um den Mustertext angegeben werden.

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

Siehe den Abschnitt Musterüberprüfung 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 eine kurze Phrase sein, die den erwarteten Datentyp demonstriert, anstatt eine erklärende Nachricht zu sein. Der Text darf keine Wagenrückläufe oder Zeilenumbrüche enthalten.

Wenn der Inhalt der Steuerung eine Richtung (LTR oder RTL) hat, der Platzhalter jedoch in der entgegengesetzten Richtung dargestellt werden muss, können Sie Unicode-Bidirektionalitätsalgorithmus-Formatierungszeichen verwenden, um die Richtung innerhalb des Platzhalters zu überschreiben; siehe Wie man Unicode-Steuerelemente für bidi-Text verwendet für weitere Informationen.

readonly

Das readonly Boolesche Attribut bedeutet, wenn vorhanden, dass dieses Feld vom Benutzer nicht bearbeitet werden kann. Sein value kann jedoch weiterhin durch das direkte 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 sollte. Der Wert muss eine Zahl größer als null sein, und der Standardwert ist 20. Da sich Zeichenbreiten unterscheiden, kann dies genau zutreffen oder nicht und sollte nicht darauf vertraut werden; das resultierende Eingabefeld kann schmaler oder breiter sein als die angegebene Anzahl von Zeichen, abhängig von den Zeichen und der Schriftart (font Einstellungen in Verwendung).

Dies setzt keinen Grenzwert für die Anzahl von Zeichen, die der Benutzer in das Feld eingeben kann. Es gibt nur ungefähr an, wie viele gleichzeitig sichtbar sein können. Um eine Obergrenze 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 für jeden bearbeitbaren Inhalt verwendet werden, aber hier betrachten wir die spezifischen Anwendungsfälle im Zusammenhang mit der Verwendung von spellcheck auf <input>-Elementen. Die erlaubten Werte für spellcheck sind:

false

Deaktiviert die Rechtschreibprüfung für dieses Element.

true

Aktiviert die Rechtschreibprüfung für dieses Element.

"" (leere Zeichenfolge) oder kein Wert

Befolgen Sie das Standarverhalten des Elements für die Rechtschreibprüfung. Dies kann auf den spellcheck-Einstellungen eines Elternteils oder anderen Faktoren beruhen.

Ein Eingabefeld kann die Rechtschreibprüfung aktiviert haben, wenn es nicht das readonly-Attribut gesetzt 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 Kontrolle wider, wenn die Einstellungen des Benutzeragenten diese Einstellung überschreiben.

Verwenden 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 vorliegt, um potenziell eine legitime URL zu sein. Dies kann dazu beitragen, 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, zum Benutzer der Website gehört oder in irgendeiner Weise akzeptabel ist. Es wird lediglich sichergestellt, 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 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 einzelne gültig formatierte URL-Adresse eingegeben wird, ansonsten jedoch nicht als gültig gilt. Indem Sie das required-Attribut hinzufügen, sind nur korrekt formatierte URLs erlaubt; die Eingabe wird nicht mehr als gültig angesehen, wenn sie leer ist.

Es gibt nichts Magisches dabei. 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 ist es hilfreich, einen kontextbezogenen Hinweis zu geben, in welcher Form die Eingabedaten vorliegen sollten. Dies kann besonders wichtig sein, wenn das Seitendesign keine beschreibenden Labels für jedes <input>-Element bietet. Hier kommen Platzhalter ins Spiel. Ein Platzhalter ist ein Wert, der die Form demonstriert, die der value annehmen sollte, indem er ein Beispiel für einen gültigen Wert zeigt, der innerhalb des Bearbeitungsfelds 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 die Inhalte des Bearbeitungsfelds manipulieren.

<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 minimalen und maximalen Längen für den eingegebenen Text steuern.

Größe des physischen Eingangselements

Die physische Größe des Eingabefelds kann mittels des size-Attributs kontrolliert werden. Damit können Sie die Anzahl der Zeichen angeben, die das Eingabefeld gleichzeitig anzeigen kann. In diesem Beispiel ist beispielsweise das url-Bearbeitungsfeld 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 tatsächlich eingegebenen URL. Sie können mit dem minlength-Attribut eine Mindestlänge in Zeichen für die eingegebene URL angeben; verwenden Sie ebenso maxlength, um die maximale Länge der eingegebenen URL einzustellen. Wenn maxLength größer als size ist, scrollen die Inhalte des Eingabefelds nach Bedarf, um die aktuelle Auswahl oder Einfügestelle anzuzeigen, während der Inhalt bearbeitet wird.

Das folgende Beispiel erstellt ein 30 Zeichen breites Eingabefeld für URL-Adressen, das erfordert, dass die Inhalte nicht kürzer als 10 Zeichen und nicht länger als 80 Zeichen sind.

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

Bereitstellung von Standardoptionen

Einzelstandardwert mit dem Wertattribut bereitstellen

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

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

Angebotsvorschläge

Einen Schritt weiter gehen können Sie, indem Sie eine Liste von Standardoptionen bereitstellen, aus denen der Benutzer wählen kann, indem Sie das list-Attribut angeben. Dies schränkt den Benutzer nicht auf diese Optionen ein, erlaubt ihm jedoch, häufig verwendete URLs schneller auszuwählen. Dies bietet auch Hinweise auf autocomplete. Das list-Attribut gibt die ID einer <datalist> an, die wiederum ein <option>-Element pro vorgeschlagenen 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> wird der Browser die angegebenen Werte als potenzielle Werte für die URL anbieten; dies wird typischerweise als Popup- oder Dropdown-Menü angezeigt, das die Vorschläge enthält. Obwohl die spezifische Benutzererfahrung von einem Browser zum anderen variieren kann, wird typischerweise durch Klicken in das Bearbeitungsfeld ein Dropdown mit den vorgeschlagenen URLs angezeigt. Während der Benutzer tippt, wird die Liste angepasst, um nur übereinstimmende Werte anzuzeigen – jedes getippte Zeichen schränkt die Liste weiter ein, bis der Benutzer eine Auswahl trifft oder einen benutzerdefinierten Wert eingibt.

Verwendung von Labels für vorgeschlagene Werte

Sie können das label-Attribut auf einem oder allen option-Elementen verwenden, 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 das Standard-Level der Validierung, das allen <input>-Elementen angeboten wird, das automatisch sicherstellt, dass die Inhalte die Anforderungen erfüllen, um eine gültige URL zu sein. Es besteht jedoch auch die Möglichkeit, zusätzliche Filter hinzuzufügen, um sicherzustellen, dass Ihre eigenen speziellen Anforderungen erfüllt werden, falls Sie welche haben.

Grundlegende Validierung

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

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

Eine URL erforderlich machen

Wie bereits erwähnt, um sicherzustellen, dass ein URL-Eintrag erforderlich ist, bevor das Formular abgesendet werden kann (das Feld darf nicht leer gelassen werden), müssen Sie nur das required-Attribut auf der Eingabe einfügen.

Musterüberprüfung

Wenn Sie möchten, dass die eingegebene URL weiter eingeschränkt wird als nur "jede Zeichenfolge, die wie eine URL aussieht", können Sie das pattern-Attribut verwenden, um einen regulären Ausdruck zu spezifizieren, 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 Attribut required ausgefüllt wird und dass die URL etwas auf mozilla.org ist, indem wir das Attribut pattern zur Veranschaulichung verwenden.

HTML

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

Beachten Sie, dass ein striktes 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 assistiven 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 bietet visuelle Hinweise, um dem Benutzer anzuzeigen, wenn der Inhalt :valid oder :invalid ist, indem eine entsprechende content-Eigenschaft hinzugefügt wird, und enthält alternativen Text für Benutzer mit assistiven 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 Rahmen 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 Rahmen und ein rotes Kreuz sehen.

Überprüfen Sie die Abschnitte Musterüberprüfung und Verwenden 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">