<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 eingegebene Wert wird automatisch validiert, um sicherzustellen, dass er entweder leer oder eine korrekt formatierte URL ist, bevor das Formular abgeschickt werden kann. Die CSS-Pseudoklassen :valid und :invalid werden automatisch entsprechend angewendet, um visuell anzuzeigen, ob der aktuelle Wert des Feldes eine gültige URL ist oder nicht.

Das value-Attribut eines <input> Elements enthält einen String, der automatisch validiert wird, um sicherzustellen, dass er der URL-Syntax entspricht. Es gibt speziell 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 formatierte absolute URL. Das 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.

Details zur Validierung von URLs, um sicherzustellen, dass sie korrekt formatiert sind, finden Sie unter Validierung.

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

Der Wert des list-Attributs ist die id eines <datalist> Elements, das sich im selben Dokument befindet. Der <datalist> bietet eine Liste vordefinierter Werte an, 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 enthalten. Die bereitgestellten Werte sind Vorschläge, keine Anforderungen: Benutzer können aus dieser vordefinierten Liste auswählen oder einen anderen Wert angeben.

Die maximale Zeichenlänge (gemessen in UTF-16 Code-Einheiten), 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 festgelegt ist, hat das url-Feld keine maximale Länge. Dieser Wert muss auch größer oder gleich dem Wert von minlength sein.

Die Eingabe wird Einschränkungsvalidierung fehlschlagen, wenn die Länge des Textwertes des Feldes mehr als maxlength UTF-16 Code-Einheiten beträgt. Die Einschränkungsvalidierung wird nur angewendet, wenn der Wert durch den Benutzer geändert wird.

Die minimale Zeichenlänge (gemessen in UTF-16 Code-Einheiten), die der Benutzer in das url-Eingabefeld eingeben kann. Dies muss ein nicht-negativer Ganzzahlwert sein, der gleich oder kleiner als der durch maxlength angegebene Wert ist. Wenn kein minlength angegeben ist oder ein ungültiger Wert festgelegt ist, hat das url-Feld keine minimale Länge.

Die Eingabe wird Einschränkungsvalidierung fehlschlagen, 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 durch den Benutzer geändert wird.

Das pattern-Attribut ist, wenn angegeben, ein regulärer Ausdruck, den der value-Wert des Eingabefelds bestehen muss, um die Einschränkungsvalidierung zu bestehen. Es muss ein gültiger JavaScript-Regulärer Ausdruck sein, wie er von dem 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 Unicode-Codepunksequenz und nicht als ASCII behandelt wird. Keine Schrägstriche sollten 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.

Einzelheiten und ein Beispiel finden Sie im Abschnitt Muster-Validierung.

Das placeholder-Attribut ist ein String, der dem Benutzer einen kurzen Hinweis darauf gibt, welche Art von Information in dem Feld erwartet wird. Es sollte ein Wort oder eine kurze Phrase sein, die den erwarteten Datentyp demonstriert, anstelle einer erklärenden Nachricht. Der Text darf keine Zeilenumbrüche oder -sprünge enthalten.

Wenn der Inhalt der Steuerung eine andere Richtung (LTR oder RTL) hat, aber den Platzhalter in der entgegengesetzten Richtung darstellen muss, können Sie Unicode-Bidi-Algorithmus-Formatierungscode verwenden, um die Richtung innerhalb des Platzhalters außer Kraft zu setzen; siehe Wie man Unicode-Kontrollen für bidi Text verwendet für weitere Informationen.

Das readonly Boolean-Attribut bedeutet, falls vorhanden, dass dieses Feld nicht vom Benutzer bearbeitet werden kann. Sein value kann jedoch weiterhin von JavaScript-Code direkt eingestellt werden, indem die HTMLInputElement value-Eigenschaft gesetzt wird.

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 möglicherweise nicht exakt sein und sollte nicht darauf vertraut werden, dass es so ist; die resultierende Eingabe kann schmaler oder breiter als die angegebene Anzahl von Zeichen sein, abhängig von den Zeichen und dem (font-Einstellungen verwendeten) Schriftart.

Dies legt keine Begrenzung fest, wie viele Zeichen der Benutzer in das Feld eingeben kann. Es gibt nur an, wie viele man ungefähr auf einmal sehen kann. Um eine Obergrenze für die Länge der Eingabedaten festzulegen, verwenden Sie das maxlength-Attribut.

Das spellcheck globale Attribut wird verwendet, um anzugeben, ob Rechtschreibprüfung für ein Element aktiviert werden soll. Es kann auf allen bearbeitbaren Inhalten verwendet werden, aber hier betrachten wir spezifische Aspekte der Verwendung von spellcheck bei <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.

"" (leerer String) oder kein Wert

Verfolgen des Standardverhaltens des Elements für die Rechtschreibprüfung. Dies kann auf dem spellcheck-Einstellung des 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 Wert, der durch das Lesen von spellcheck zurückgegeben wird, kann möglicherweise nicht den tatsächlichen Zustand der Rechtschreibprüfung innerhalb einer Steuerung widerspiegeln, wenn die Voreinstellungen des Benutzeragenten die Einstellung außer Kraft setzen.

Wenn Sie eine URL-Eingabe mit dem richtigen type-Wert, url, erstellen, erhalten Sie eine automatische Validierung, dass der eingegebene Text mindestens in der richtigen Form ist, um potenziell eine gültige URL zu sein. Dies kann helfen, Fälle zu vermeiden, in denen der Benutzer die Adresse seiner Website falsch eintippt 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 wird sichergestellt, dass der Wert des Feldes korrekt formatiert ist, um eine URL zu sein.

Dieses Element wird als Standardtexteingabefeld mit grundlegenden Validierungsfunktionen implementiert. In seiner einfachsten Form kann eine URL-Eingabe so 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 ist, aber sonst nicht als gültig betrachtet wird. Durch das Hinzufügen des required-Attributs sind nur korrekt formatierte URLs erlaubt; die Eingabe wird nicht mehr als gültig angesehen, wenn sie leer ist.

Hier geschieht nichts Magisches. Das Einreichen dieses Formulars würde folgende Daten an den Server senden: myURL=http%3A%2F%2Fwww.example.com. Beachten Sie, wie Zeichen nach Bedarf maskiert werden.

Manchmal ist es hilfreich, einen kontextuellen 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 zeigt, indem er ein Beispiel für einen gültigen Wert präsentiert, der im Eingabebereich angezeigt wird, wenn der value des Elements "" ist. Sobald Daten in das Feld eingegeben werden, verschwindet der Platzhalter; wenn der Bereich geleert wird, erscheint der Platzhalter erneut.

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 Eingabefeldes manipulieren.

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

Sie können sowohl die physische Länge des Eingabefeldes als auch die minimal und maximal erlaubte Länge für den Eingabetext steuern.

Physische Eingabeelementgröße

Die physische Größe des Eingabefeldes kann durch das size-Attribut gesteuert werden. Damit können Sie die Anzahl der Zeichen angeben, die das Eingabefeld auf einmal anzeigen kann. In diesem Beispiel ist das url-Bearbeitungsfeld 30 Zeichen breit:

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

Elementwertlänge

Die size ist getrennt von der Längenbegrenzung 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 size überschreitet, rollen die Inhalte des Eingabefeldes nach 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-Eingabefeld, bei dem die Inhalte nicht kürzer als 10 Zeichen und nicht länger als 80 Zeichen sein dürfen.

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

Bereitstellung eines einzelnen Standards über das Wertattribut

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

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

Angebot vorgeschlagener Werte

Ein Stück weiter können Sie eine Liste von Standardoptionen bereitstellen, aus der der Benutzer auswählen kann, indem Sie das list-Attribut angeben. Dies beschränkt den Benutzer nicht auf diese Optionen, aber es erlaubt ihm, gängig 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 EACH_option-value 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> entlang werden dem Browser die angegebenen Werte als potenzielle Werte für die URL angeboten; in der Regel wird dies als Popup- oder Dropdown-Menü mit den Vorschlägen präsentiert. Während die spezifische Benutzererfahrung von einem Browser zum anderen variieren kann, wird normalerweise beim Klicken in das Bearbeitungsfeld eine Dropdown-Liste der vorgeschlagenen URLs angezeigt. Dann, während der Benutzer tippt, wird die Liste angepasst, um nur passende Werte anzuzeigen. Jeder getippte Buchstabe reduziert die Liste, bis der Benutzer eine Auswahl trifft oder einen eigenen Wert eingibt.

Verwendung von Labels für vorgeschlagene Werte

Sie können wählen, das label-Attribut auf einen oder alle Ihrer <option>-Elemente hinzuzufügen, 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>

Es gibt zwei Inhaltsvalidierungsstufen für url-Eingaben. Zunächst gibt es das Standard-Validierungsniveau, das allen <input>s angeboten wird, welches 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, sofern Sie welche haben.

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

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

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

<form>
  <input id="myURL" name="myURL" type="url" required />
  <button>Submit</button>
</form>

Versuchen Sie, das obige Formular ohne eingegebenen Wert zu übermitteln, um zu sehen, was passiert.

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.

Angenommen, Sie erstellen eine Support-Seite für Mitarbeiter von Myco, Inc., auf der sie die IT-Abteilung um Hilfe bitten können, wenn auf einer ihrer Seiten ein Problem auftritt. In unserem vereinfachten Formular muss der Benutzer die URL der Seite angeben, die ein Problem hat, und eine Nachricht beschreiben, was falsch ist. Aber wir möchten, dass die URL nur dann erfolgreich validiert wird, wenn die eingegebene URL in einer Myco-Domain liegt.

Da Eingaben des Typs url sowohl gegen die Standard-URL-Validierung als auch gegen das angegebene pattern validieren, können Sie dies mit einem regulären Ausdruck umsetzen. Sehen wir uns an, wie:

div {
  margin-bottom: 10px;
  position: relative;
}

input[type="number"] {
  width: 100px;
}

input + span {
  padding-right: 30px;
}

input:invalid + span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
}

input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
}

<form>
  <div>
    <label for="myURL">Enter the problem website address:</label>
    <input
      id="myURL"
      name="myURL"
      type="url"
      required
      pattern=".*\.myco\..*"
      title="The URL must be in a Myco domain" />
    <span class="validity"></span>
  </div>
  <div>
    <label for="myComment">What is the problem?</label>
    <input id="myComment" name="myComment" type="text" required />
    <span class="validity"></span>
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>

Erstens ist das required-Attribut angegeben, wodurch es zwingend erforderlich ist, dass eine gültige URL angegeben wird.

Zweitens setzen wir in der url-Eingabe pattern auf ".*\.myco\..*". Dieser reguläre Ausdruck fordert einen String an, der beliebig viele Zeichen hat, gefolgt von einem Punkt, gefolgt von "myco", gefolgt von einem Punkt, gefolgt von beliebig vielen Zeichen. 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 in der Myco-Domain liegt".

Das ist nicht perfekt, aber es ist gut genug für die Anforderungen dieses einfachen Demos.

Es ist ratsam, das title-Attribut zusammen mit pattern zu verwenden. Wenn Sie dies tun, muss der title das Muster beschreiben; er sollte erklären, welches Format die Daten haben sollten, anstelle von Informationen anderer Art. Das liegt daran, dass der title möglicherweise als Teil einer Validierungsfehlermeldung angezeigt oder gesprochen wird. Zum Beispiel könnte der Browser die Meldung "Der eingegebene Text stimmt nicht mit dem erforderlichen Muster überein." gefolgt von Ihrem angegebenen title präsentieren. Wenn Ihr title so etwas wie "URL" ist, wäre das Ergebnis die Meldung "Der eingegebene Text stimmt nicht mit dem erforderlichen Muster überein. URL", was keine gute Benutzererfahrung wäre.

Deshalb geben wir stattdessen den String "Die URL muss in einer Myco-Domäne sein" an. Indem wir das tun, könnte die resultierende vollständige Fehlermeldung so etwas sein wie "Der eingegebene Text stimmt nicht mit dem erforderlichen Muster überein. Die URL sollte in einer Myco-Domäne sein."

Es gibt nicht viel mehr über url-Typ-Eingaben zu sagen. Sehen Sie sich die Abschnitte Muster-Validierung und Verwendung von URL-Eingaben für zahlreiche Beispiele an.

Sie können auch unser Muster-Validierungsbeispiel auf GitHub finden (sehen Sie es auch live).

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