<input type="url">

<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 abgesendet werden kann. Die CSS-Pseudoklassen :valid und :invalid werden je nach Bedarf automatisch angewendet, um visuell anzuzeigen, ob der aktuelle Wert des Felds eine gültige URL ist oder nicht.

Das value-Attribut des <input>-Elements enthält einen String, der automatisch auf die Konformität mit der URL-Syntax überprüft wird. Genauer gesagt, gibt es zwei mögliche Wertformate, die die Validierung bestehen:

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

Siehe Validierung für Details dazu, wie URLs validiert werden, um sicherzustellen, dass sie korrekt formatiert sind.

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.

Der Wert des list-Attributs ist die id eines im selben Dokument befindlichen <datalist>-Elements. Die <datalist> bietet eine Liste vordefinierter Werte, die dem Benutzer für diese Eingabe vorgeschlagen werden. Alle Werte in der Liste, die mit dem type inkompatibel sind, werden nicht in den vorgeschlagenen Optionen enthalten. Die angegebenen Werte sind Vorschläge, keine Anforderungen: Benutzer können aus dieser vordefinierten Liste wählen oder einen anderen Wert eingeben.

Die maximale Stringlä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 ist, hat die url-Eingabe keine maximale Länge. Dieser Wert muss auch größer oder gleich dem Wert von minlength sein.

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

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

Die Eingabe schlägt bei der Einschränkungsvalidierung fehl, wenn die Länge des in das Feld eingegebenen Textes kürzer als minlength UTF-16-Codeeinheiten ist. Die Einschränkungsvalidierung wird nur angewendet, wenn der Wert vom Benutzer geändert wird.

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

Das placeholder-Attribut ist ein String, der 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. Der Text darf keine Wagenrückläufe oder Zeilenumbrüche enthalten.

Wenn der Inhalt des Steuerungselements eine Richtung (LTR oder RTL) hat, aber der Platzhalter in der entgegengesetzten Richtung angezeigt werden muss, können Sie die Unicode-bidirektionale Algorithmus-Formatierungszeichen verwenden, um die Richtung im Platzhalter zu überschreiben; siehe Wie man Unicode-Steuerzeichen für bidirektionalen Text verwendet für weitere Informationen.

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

Das size-Attribut ist ein numerischer Wert, der angibt, wie viele Zeichen das Eingabefeld breit sein soll. Der Wert muss eine Zahl größer als null sein, und der Standardwert ist 20. Da sich Zeichenbreiten unterscheiden, kann dies mehr oder weniger genau sein und sollte nicht darauf verlassen werden, genau zu sein; das resultierende Eingabefeld kann schmaler oder breiter sein als die angegebene Anzahl von Zeichen, abhängig von den Zeichen und der verwendeten Schriftart (font-Einstellungen).

Dies setzt keine Begrenzung darauf, wie viele Zeichen der Benutzer in das Feld eingeben kann. Es gibt nur ungefähr an, wie viele gleichzeitig sichtbar sein können. Um ein oberes Limit für die Länge der Eingabedaten festzulegen, verwenden Sie das maxlength-Attribut.

Das globale Attribut spellcheck wird verwendet, um anzugeben, ob die Rechtschreibprüfung für ein Element aktiviert werden soll. Es kann auf jedem editierbaren Inhalt verwendet werden, aber hier betrachten wir die spezifische 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.

"" (leerer String) oder kein Wert

Folgt dem Standardverhalten des Elements für die Rechtschreibprüfung. Dies kann auf der Einstellung spellcheck eines Elternteils 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 Lesen von spellcheck zurückgegebene Wert kann nicht den tatsächlichen Status der Rechtschreibprüfung in einem Steuerungselement widerspiegeln, wenn die Präferenzen des Benutzeragenten die Einstellung überschreiben.

Wenn Sie eine URL-Eingabe mit dem richtigen type-Wert url erstellen, erhalten Sie eine automatische Validierung, die sicherstellt, dass der eingegebene Text zumindest im richtigen Format vorliegt, um potenziell eine gültige URL zu sein. Dies kann helfen, Fälle zu vermeiden, in denen der Benutzer die Adresse seiner Website falsch eingibt oder eine ungültige eingibt.

Es ist jedoch wichtig zu beachten, dass dies nicht ausreicht, um sicherzustellen, dass der angegebene Text eine tatsächlich existierende URL ist, die zum Benutzer der Website gehört oder in irgendeiner anderen Weise akzeptabel ist. Es stellt sicher, dass der Wert des Felds korrekt formatiert ist, um eine URL zu sein.

Dieses Element wird als Standardtext-Eingabefeld mit grundlegenden Validierungsfunktionen implementiert. In seiner grundlegendsten Form kann ein URL-Eingabefeld wie folgt 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, ansonsten jedoch nicht als gültig gilt. Durch Hinzufügen des required-Attributs sind nur korrekt geformte URLs zulässig; die Eingabe wird nicht mehr als gültig betrachtet, wenn sie leer ist.

Hier passiert nichts Magisches. Die Übermittlung dieses Formulars würde die folgenden Daten an den Server senden: myURL=http%3A%2F%2Fwww.example.com. Beachten Sie, wie Zeichen bei Bedarf maskiert (escaped) werden.

Manchmal ist es hilfreich, einen kontextualen Hinweis zu geben, welche Form die Eingabedaten annehmen sollten. Dies kann besonders wichtig sein, wenn das Seitendesign keine beschreibenden Etiketten für jedes <input> bietet. Hier kommen Platzhalter ins Spiel. Ein Platzhalter ist ein Wert, der demonstriert, welche Form der value annehmen sollte, indem er ein Beispiel für einen gültigen Wert angibt, 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 die Inhalte des Bearbeitungsfelds manipulieren.

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

Sie können sowohl die physische Länge des Eingabefelds als auch die minimalen und maximalen Längen der erlaubten Eingabetexte kontrollieren.

Physische Eingabeelementgröße

Die physische Größe des Eingabefelds 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 die url-Eingabe zum Beispiel 30 Zeichen breit:

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

Elementwertlänge

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 festlegen; ähnlich verwenden Sie maxlength, um die maximale Länge der eingegebenen URL festzulegen. Wenn maxLength size überschreitet, scrollen die Inhalte der Eingabe, um die aktuelle Auswahl oder den Einfügepunkt anzuzeigen, während Inhalte manipuliert werden.

Das folgende Beispiel stellt ein 30 Zeichen breites URL-Adresseingabefeld bereit, 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" />

Einen einzelnen Standardwert mit dem value-Attribut bereitstellen

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

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

Vorgeschlagene Werte anbieten

Noch einen Schritt weiter können Sie eine Liste von Standardoptionen anbieten, aus denen der Benutzer auswählen kann, indem Sie das list-Attribut angeben. Dies beschränkt den Benutzer nicht auf diese Optionen, erlaubt ihm jedoch, häufig verwendete URLs schneller auszuwählen. Dies bietet auch Hinweise für autocomplete. Das list-Attribut gibt die ID einer <datalist> an, die wiederum ein <option>-Element pro vorgeschlagenem Wert enthält; der value jeder option ist der entsprechende vorgeschlagene Wert für die URL-Eingabe.

<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>-Elementen an Ort und Stelle bietet der Browser die angegebenen Werte als potenzielle Werte für die URL an; dies wird typischerweise als Popup- oder Dropdown-Menü mit den Vorschlägen präsentiert. Während die spezifische Benutzererfahrung je nach Browser variieren kann, wird normalerweise ein Dropdown mit den URL-Vorschlägen angezeigt, wenn Sie in das Bearbeitungsfeld klicken. Dann wird die Liste beim Tippen des Benutzers angepasst, um nur passende Werte anzuzeigen. Jeder eingegebene Buchstabe reduziert die Liste der Vorschläge, bis der Benutzer eine Auswahl trifft oder einen benutzerdefinierten Wert eingibt.

Labels für vorgeschlagene Werte verwenden

Sie können sich entscheiden, das label-Attribut bei einem oder allen Ihrer <option>-Elemente einzuschließen, um textuelle Labels bereitzustellen. Einige Browser können nur die Labels anzeigen, während andere möglicherweise 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>

Für url-Eingaben stehen zwei Ebenen der Inhaltsvalidierung zur Verfügung. Erstens gibt es die Standard-Validierungsebene, die allen <input>-Elementen geboten wird und automatisch sicherstellt, dass die Inhalte die Anforderungen an eine gültige URL erfüllen. Aber es gibt auch die Möglichkeit, zusätzliche Filter hinzuzufügen, um sicherzustellen, dass Ihre eigenen spezialisierten Anforderungen erfüllt werden, falls vorhanden.

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 recht kompliziert. Sie wird durch den URL Living Standard des WHATWG definiert und für Einsteiger in unserem Artikel Was ist eine URL? beschrieben.

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

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, um gültig zu sein.

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

HTML

In der url-Eingabe setzen wir pattern auf ".*\.mozilla\.org.*". Dieser reguläre Ausdruck validiert eine Zeichenkette, die aus einer beliebigen Anzahl von Zeichen, gefolgt von ".mozilla.org", 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 und auch .mozilla.org enthält."

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

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 zu zeigen, ob der Inhalt :valid oder :invalid ist, indem eine passende content-Eigenschaft hinzugefügt wird, und schließt alternativen Text für Benutzer mit unterstützenden Technologien ein.

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

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

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