<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 je nach Bedarf automatisch angewendet, um visuell anzuzeigen, ob der aktuelle Wert des Feldes eine gültige URL ist oder nicht.

Das value-Attribut des <input>-Elements enthält eine Zeichenkette, die automatisch auf Konformität mit der URL-Syntax validiert 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 oder den Wert entfernt hat.
2. Eine einzelne, korrekt geformte absolute URL. Dies bedeutet nicht zwangsläufig, 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.

Neben 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. Die <datalist> bietet eine Liste vordefinierter Werte, die dem Benutzer für diese Eingabe vorgeschlagen werden. Alle Werte in der Liste, die nicht mit dem type kompatibel sind, werden nicht in die vorgeschlagenen Optionen aufgenommen. Die bereitgestellten 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 die url-Eingabe eingeben kann. Dies muss ein ganzzahliger Wert von 0 oder höher sein. Wenn maxlength nicht 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 die Einschränkungsüberprüfung nicht bestehen, wenn die Länge des Textwertes des Feldes mehr als maxlength UTF-16 Codeeinheiten beträgt. Die Einschränkungsüberprüfung wird nur angewendet, wenn der Wert vom Benutzer geändert wird.

Die minimale Zeichenlä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 von 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 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.

Das pattern-Attribut, wenn es angegeben ist, ist ein regulärer Ausdruck, den der value der Eingabe 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 wie er in unserem Leitfaden zu regulären Ausdrücken dokumentiert ist; das 'u'-Flag wird angegeben, wenn der reguläre Ausdruck kompiliert wird, damit das Muster als Sequenz von Unicode-Codepunkten behandelt wird, anstelle von ASCII. Um das Muster herum sollten keine Schrägstriche 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überprüfung für Details und ein Beispiel.

Das placeholder-Attribut ist eine Zeichenkette, die dem Benutzer einen kurzen Hinweis darauf gibt, welche Art von Information im Feld erwartet wird. Es sollte ein Wort oder ein kurzer Satz sein, der den erwarteten Datentyp demonstriert und keine erläuternde Nachricht ist. 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-Bidirektionale-Algorithmus-Formatierungszeichen verwenden, um die Richtung innerhalb des Platzhalters zu überschreiben; siehe Verwendung von Unicode-Steuerzeichen für bidi Text für weitere Informationen.

Das readonly-Boolesche Attribut, wenn vorhanden, bedeutet, dass dieses Feld vom Benutzer nicht bearbeitet werden kann. Sein value kann jedoch auch weiterhin durch direktes Festlegen der value-Eigenschaft des API HTMLInputElement über JavaScript 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 Zeichenbreiten variieren, ist dies möglicherweise nicht genau und sollte nicht darauf verlassen werden; das resultierende Eingabefeld kann schmaler oder breiter sein als die angegebene Anzahl von Zeichen, abhängig von den Zeichen und den (font-Einstellungen in Verwendung).

Dies setzt kein Limit, wie viele Zeichen der Benutzer in das Feld eingeben kann. Es wird nur festgelegt, wie viele Zeichen 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 jedem bearbeitbaren Inhalt verwendet werden, aber hier betrachten wir Spezifisches in Bezug auf die 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.

"" (leere Zeichenkette) oder kein Wert

Der Standardwert des Elements für die Rechtschreibprüfung wird befolgt. Dies kann auf der spellcheck-Einstellung des übergeordneten Elements oder anderen Faktoren basieren.

Ein Eingabefeld kann die Rechtschreibprüfung aktivieren, 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 Status der Rechtschreibprüfung innerhalb einer Steuerung wider, wenn die Einstellungen des User Agents die Einstellung überschreiben.

Wenn Sie eine URL-Eingabe 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 Weise akzeptabel ist. Es stellt nur sicher, dass der Wert des Feldes ordnungsgemäß formatiert ist, um eine URL zu sein.

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

Hier passiert nichts Magisches. Das Senden dieses Formulars würde die folgenden Daten an den Server senden: myURL=http%3A%2F%2Fwww.example.com. Beachten Sie, wie Zeichen gegebenenfalls maskiert werden.

Manchmal ist es hilfreich, einen kontextualen 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 demonstriert, indem er ein Beispiel für einen gültigen Wert präsentiert, 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, während Sie den Inhalt des Bearbeitungsfeldes 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 minimalen und maximalen Längen, die für den eingegebenen Text erlaubt sind, steuern.

Physische Größe des Eingabeelements

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

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

Länge des Elementwertes

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; ähnlich verwenden Sie maxlength um die maximale Länge der eingegebenen URL festzulegen. Wenn maxLength größer ist als size, scrollt der Inhalt des Eingabefeldes je nach Bedarf, um die aktuelle Auswahl oder Einfügeposition anzuzeigen, während der Inhalt manipuliert wird.

Das folgende Beispiel erstellt eine 30 Zeichen breite URL-Adresseneingabebox, die 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 einzelnen Standards mit dem value-Attribut

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

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

Anbieten vorgeschlagener Werte

Ein Schritt weiter können 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, ermöglicht ihm jedoch, häufiger 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 vorgeschlagenem Wert enthält; jeder option's 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>s kann der Browser die angegebenen Werte als potenzielle Werte für die URL anbieten; dies wird in der Regel als Popup- oder Dropdown-Menü präsentiert, das die Vorschläge enthält. Während die Erfahrung der Nutzer von Browser zu Browser variieren kann, wird beim Klicken in das Bearbeitungsfeld normalerweise ein Dropdown mit den vorgeschlagenen URLs angezeigt. Dann wird die Liste angepasst, während der Benutzer tippt, 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 bei einem oder allen Ihrer <option>-Elemente verwenden, 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>

Es gibt zwei Ebenen der Inhaltsvalidierung für url-Eingaben. Erstens gibt es die Standardvalidierung, die für alle <input>s angeboten wird und die automatisch sicherstellt, dass die Inhalte die Anforderungen für eine gültige URL erfüllen. Es besteht jedoch auch die Möglichkeit, zusätzliche Filter hinzuzufügen, um sicherzustellen, dass Ihre eigenen spezifischen 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 ziemlich komplex. Sie ist durch die Lebendige Norm „URL“ des WHATWG definiert und wird für Neulinge in unserem Artikel Was ist eine URL? beschrieben.

Wie bereits erwähnt, müssen Sie das required-Attribut zur Eingabe hinzufügen, um das Eingeben einer URL erforderlich zu machen, bevor das Formular gesendet werden kann (das Feld darf nicht leer bleiben).

Wenn Sie die eingegebene URL weiter einschränken müssen als nur auf „jede Zeichenkette, die 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.

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 Veranschaulichung verwenden.

HTML

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

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

Das title-Attribut beschreibt das pattern auch 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 bietet visuelle Hinweise, um dem Benutzer zu zeigen, ob der Inhalt :valid oder :invalid ist, indem eine entsprechende content-Eigenschaft hinzugefügt wird und alternative Texte für Benutzer mit unterstützenden Technologien enthält.

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. Sie sehen einen grünen Umriss 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 werden einen roten Umriss und ein rotes Kreuz sehen.

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

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