<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 ist oder eine korrekt formatierte URL darstellt, bevor das Formular gesendet werden kann. Die CSS-Pseudoklassen :valid und :invalid werden automatisch angewendet, um visuell zu kennzeichnen, ob der aktuelle Wert des Feldes eine gültige URL ist oder nicht.

Das value Attribut des <input> Elements enthält einen String, der automatisch als konform zur 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 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, auch wenn das eingegebene 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 angewendet werden, unterstützen url-Eingaben die folgenden Attribute.

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

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 Einschränkungsvalidierung fehlschlagen, wenn die Länge des Textwerts des Feldes länger als maxlength UTF-16-Codeeinheiten ist. Die Einschränkungsvalidierung wird nur angewendet, wenn der Wert vom Benutzer geändert wird.

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 minlength nicht angegeben ist oder ein ungültiger Wert angegeben ist, hat die URL-Eingabe keine Mindestlänge.

Die Eingabe wird Einschränkungsvalidierung fehlschlagen, 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, wenn angegeben, ist ein regulärer Ausdruck, mit dem der value der Eingabe übereinstimmen muss, damit der Wert die Einschränkungsvalidierung besteht. Es muss ein gültiger JavaScript-Regulärer Ausdruck sein, wie von der RegExp Type verwendet und wie in unserem Leitfaden zu regulären Ausdrücken dokumentiert; das 'u'-Flag ist angegeben, wenn der reguläre Ausdruck kompiliert wird, sodass das Muster als Sequenz von Unicode-Codepunkten behandelt wird, anstatt als ASCII. Es sollten keine Schrägstriche 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.

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 in das Feld erwartet werden. Es sollte ein Wort oder eine kurze Phrase sein, die den erwarteten Datentyp zeigt, anstatt eine erklärende Nachricht. Der Text darf keine Wagenrückläufe oder Zeilenumbrüche enthalten.

Wenn der Inhalt der Steuerung eine Richtung (LTR oder RTL) hat, aber der Platzhalter in der entgegengesetzten Richtung angezeigt werden muss, können Sie Unicode-Bidi-Algorithmusformatierungszeichen verwenden, um die Richtung innerhalb des Platzhalters zu überschreiben; siehe Wie man Unicode-Steuerungen für bidi-Text verwendet für weitere Informationen.

Das readonly Boolean-Attribut, falls vorhanden, bedeutet, dass dieses Feld nicht vom Benutzer bearbeitet werden kann. Sein value kann jedoch weiterhin direkt durch das Setzen der HTMLInputElement value-Eigenschaft durch JavaScript geändert werden.

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 Zeichenbreiten variieren, kann dies mehr oder weniger genau sein und sollte nicht darauf verlassen werden; die resultierende Eingabe kann schmaler oder breiter als die angegebene Anzahl von Zeichen sein, abhängig von den Zeichen und der (font) Schriftart-Einstellungen, die in Gebrauch sind.

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

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

Befolgt das 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 hat und nicht deaktiviert ist.

Der Wert, der durch das Lesen von spellcheck zurückgegeben wird, spiegelt möglicherweise nicht den tatsächlichen Status der Rechtschreibprüfung innerhalb eines Steuerelements wider, wenn die Einstellungen des Benutzeragenten die Einstellungen überschreiben.

Wenn Sie ein URL-Eingabefeld mit dem richtigen type Wert, url, erstellen, erhalten Sie eine automatische Validierung, dass der eingegebene Text zumindest die richtige Form hat, 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 tatsächlich existierende URL ist, die dem Benutzer der Website entspricht oder in irgendeiner anderen Weise akzeptabel ist. Es stellt sicher, dass der Wert des Feldes korrekt formatiert ist, um eine URL zu sein.

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

Hier passiert nichts Magisches. 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.

Manchmal ist es hilfreich, einen kontextbezogenen Hinweis darauf zu geben, in welcher Form die Eingabedaten sein sollten. Dies kann besonders wichtig sein, wenn das Seitendesign keine beschreibenden Beschriftungen für jedes <input> bietet. Hier kommen Platzhalter ins Spiel. Ein Platzhalter ist ein Wert, der die Form zeigt, die der value annehmen sollte, indem ein Beispiel für einen gültigen Wert angezeigt wird, der im Bearbeitungsfeld angezeigt wird, wenn der value des Elements „“ ist. Sobald Daten in das Feld eingegeben wurden, verschwindet der Platzhalter; wenn das Feld geleert ist, erscheint der Platzhalter erneut.

Hier haben wir ein url-Eingabefeld mit dem Platzhalter http://www.example.com. Beachten Sie, wie der Platzhalter verschwindet und wieder erscheint, wenn Sie den Inhalt des Bearbeitungsfelds 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 zulässige Länge des eingegebenen Textes steuern.

Physische Eingabeelementgröße

Die physische Größe des Eingabefeldes kann mit dem size Attribut gesteuert werden. Damit können Sie angeben, wie viele Zeichen das Eingabefeld gleichzeitig anzeigen kann. In diesem Beispiel ist zum Beispiel das url-Bearbeitungsfeld 30 Zeichen breit:

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

Elementwertlänge

Die size ist unabhängig von der Längenbegrenzung der tatsächlich eingegebenen URL. 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 übersteigt, scrollen die Inhalte des Eingabefeldes bei Bedarf, um die aktuelle Auswahl oder Einfügemarke anzuzeigen, während der Inhalt bearbeitet wird.

Das folgende Beispiel erstellt ein 30 Zeichen breites URL-Adressen-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 eines einzigen Standards über das value-Attribut

Wie immer können Sie für ein url-Eingabefeld eine Standardeinstellung angeben, indem Sie das value Attribut setzen:

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

Anbieten vorgeschlagener Werte

Einen Schritt weiter können Sie eine Liste von Standardoptionen angeben, aus denen der Benutzer auswählen kann, indem Sie das list Attribut spezifizieren. Dies schränkt den Benutzer nicht auf diese Optionen ein, ermöglicht es ihm jedoch, gängige URLs schneller auszuwählen. Dies bietet auch Hinweise für autocomplete. Das list Attribut spezifiziert die ID eines <datalist>, das seinerseits ein <option> Element pro vorgeschlagenem Wert enthält; jeder option Wert 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 dessen <option>s wird der Browser die angegebenen Werte als potenzielle Werte für die URL anbieten; dies wird typischerweise als Popup oder Dropdown-Menü mit den Vorschlägen angezeigt. Während die spezielle Benutzererfahrung je nach Browser variieren kann, wird durch Klicken in das Bearbeitungsfeld typischerweise ein Dropdown mit den vorgeschlagenen URLs angezeigt. Während der Benutzer tippt, wird die Liste angepasst, um nur passende Werte anzuzeigen. Jedes eingegebene Zeichen schränkt die Liste ein, bis der Benutzer eine Auswahl trifft oder einen eigenen Wert eingibt.

Verwendung von Labels für vorgeschlagene Werte

Sie können sich entscheiden, das label Attribut auf eines oder alle Ihrer <option> Elemente zu setzen, um Textbeschriftungen 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>

Für url Eingaben stehen zwei Ebenen der Inhaltsvalidierung zur Verfügung. Erstens gibt es das auf allen <input>-Elementen standardmäßig angebotene Validierungsniveau, 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 sind, falls es welche gibt.

Browser, die den url Eingabetyp unterstützen, bieten automatisch eine 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 WHATWG URL Living Standard definiert und in unserem Artikel Was ist eine URL? für Anfänger beschrieben.

Wie bereits erwähnt, um sicherzustellen, dass eine URL-Eingabe erforderlich ist, bevor das Formular übermittelt werden kann (das Feld darf nicht leer gelassen werden), müssen Sie lediglich das required Attribut zur 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 verlangen, dass die eingegebene URL strenger ist als nur "beliebiger Text, der wie eine URL aussieht", können Sie das pattern Attribut verwenden, um einen regulären Ausdruck anzugeben, dem der Wert entsprechen muss, damit der Wert gültig ist.

Angenommen, Sie erstellen eine Supportseite für Mitarbeiter der Firma Myco, Inc., die es ihnen ermöglicht, sich an ihre IT-Abteilung zu wenden, wenn eine ihrer Seiten ein Problem hat. In unserem vereinfachten Formular muss der Benutzer die URL der problematischen Seite eingeben und eine Nachricht beschreiben, was nicht stimmt. Aber wir wollen, dass die URL nur erfolgreich validiert wird, wenn die eingegebene URL in einer Myco-Domain liegt.

Da Eingaben vom Typ 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 das funktioniert:

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, das required Attribut ist angegeben, wodurch es obligatorisch wird, dass eine gültige URL bereitgestellt wird.

Zweitens setzen wir im url Eingabefeld pattern auf ".*\.myco\..*". Dieser reguläre Ausdruck verlangt einen String, der eine beliebige Anzahl von Zeichen, gefolgt von einem Punkt, gefolgt von "myco", gefolgt von einem Punkt, gefolgt von einer beliebigen Anzahl von Zeichen enthält. 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 sich auch in einer Myco-Domain befindet."

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

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

Deshalb geben wir stattdessen den String "Die URL muss aus einer Myco-Domain stammen" an. Dadurch könnte die resultierende vollständige Fehlermeldung etwa so lauten: „Der eingegebene Text entspricht nicht dem erforderlichen Muster. Die URL sollte aus einer Myco-Domain stammen.“

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

Sie finden auch unser Muster-Validierungsbeispiel auf GitHub (siehe es live in Aktion).

• HTML Formulare Leitfaden
• <input>
• <input type="tel">
• <input type="email">