<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 abgeschickt werden kann. Die CSS-Pseudoklassen :valid und :invalid werden bei 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 einen String, der automatisch validiert wird, um der URL-Syntax zu entsprechen. Genauer gesagt, gibt es zwei mögliche Wertformate, die die Validierung bestehen:

1. Ein leerer String ("") zeigt an, dass der Benutzer keinen Wert eingegeben hat oder der Wert entfernt wurde.
2. Eine einzelne korrekt geformte absolute URL. Dies bedeutet nicht zwingend, 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 zur Validierung von URLs, 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 <datalist> Elements, das im selben Dokument enthalten ist. Das <datalist> bietet eine Liste vordefinierter Werte, die dem Benutzer für diese Eingabe vorgeschlagen werden. Alle Werte in der Liste, die nicht kompatibel mit dem type sind, werden nicht in den vorgeschlagenen Optionen aufgenommen. 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 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 spezifiziert wird, 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änkungsvalidierung nicht bestehen, wenn die Länge des Textwertes des Feldes länger ist als maxlength UTF-16 Code-Einheiten. Die Einschränkungsvalidierung wird nur angewendet, wenn der Wert vom Benutzer geändert wird.

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

Die Eingabe wird die Einschränkungsvalidierung nicht bestehen, 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 vom Benutzer geändert wird.

Das pattern-Attribut, wenn angegeben, ist ein regulärer Ausdruck, den der value der Eingabe einhalten 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 wird beim Kompilieren des regulären Ausdrucks angegeben, damit das Muster als eine Sequenz von Unicode-Codepunkten behandelt wird, anstatt als ASCII. Keine Schrägstriche sollten um den Mustertest angegeben werden.

Wenn das angegebene Muster nicht angegeben ist 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 Information im Feld erwartet wird. 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 hat (LTR oder RTL), der Platzhalter jedoch in der entgegengesetzten Richtung angezeigt werden muss, können Sie Unicode-Bidirektional-Algorithmus-Formatierungszeichen verwenden, um die Richtung im Platzhalter zu überschreiben; siehe Wie man Unicode-Steuerelemente für bidi-Text verwendet für weitere Informationen.

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

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

Dies begrenzt nicht die Anzahl der Zeichen, die 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 globale Attribut spellcheck wird verwendet, um anzuzeigen, ob das Rechtschreibprüfung für ein Element aktiviert werden soll. Es kann auf jedem bearbeitbaren Inhalt verwendet werden, aber hier betrachten wir spezielle Aspekte in Bezug auf die Verwendung von spellcheck bei <input> Elementen. Die zulässigen Werte für spellcheck sind:

false

Deaktivieren der Rechtschreibprüfung für dieses Element.

true

Aktivieren der Rechtschreibprüfung für dieses Element.

"" (leerer String) oder kein Wert

Das Standardverhalten der Rechtschreibprüfung für das Element befolgen. Dies kann auf den spellcheck-Einstellungen eines Elternteils oder anderen Faktoren basieren.

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, kann möglicherweise nicht den tatsächlichen Zustand der Rechtschreibprüfung innerhalb eines Steuerelements widerspiegeln, wenn die [Benutzer-Agent]-Einstellungen(/de/docs/Glossary/user_agent) 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 in der richtigen Form ist, um potenziell eine legitime URL zu sein. Dies kann helfen, Fälle zu vermeiden, in denen der Benutzer seine Website-Adresse 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 auf irgendeine andere Weise akzeptabel ist. Es stellt sicher, dass der Wert des Feldes korrekt formatiert ist, um eine URL zu sein.

Dieses Element wird als Standard-Textfeld 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 betrachtet wird, wenn es leer ist und wenn eine einzelne gültig formatierte URL-Adresse eingegeben wurde, aber andernfalls nicht als gültig betrachtet wird. 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 ist nichts Magisches im Gange. Das Absenden dieses Formulars würde die folgenden Daten an den Server senden: myURL = http%3A%2F%2Fwww.example.com. Beachten Sie, wie notwendige Zeichen escapet werden.

Manchmal ist es hilfreich, einen kontextbezogenen 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 angibt, die der value annehmen sollte, indem er ein Beispiel für einen gültigen Wert anzeigt, der im Bearbeitungsfeld angezeigt wird, wenn der value des Elements "" ist. Sobald Daten in die Box eingegeben wurden, verschwindet der Platzhalter; wenn die Box 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 auftaucht, während 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 Eingabefelds als auch die minimale und maximale Länge der erfassten Eingabetext steuern.

Physische Größe des Eingabeelements

Die physische Größe des Eingabefelds 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 das url Bearbeitungsfeld 30 Zeichen breit:

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

Länge des Elementwerts

Das size ist getrennt von der Längenbegrenzung der tatsächlich eingegebenen URL selbst. Sie können eine minimale Länge in Zeichen für die eingegebene URL mit dem Attribut minlength spezifizieren; ebenso können Sie maxlength verwenden, um die maximale Länge der eingegebenen URL festzulegen. Wenn maxLength größer als size ist, werden die Inhalte des Eingabefelds bei Bedarf gescrollt, um die aktuelle Auswahl oder den Einfügepunkt anzuzeigen, während der Inhalt bearbeitet wird.

Das folgende Beispiel erstellt ein 30 Zeichen breites URL-Adressen-Eingabefeld, das erfordert, dass der Inhalt mindestens 10 Zeichen und höchstens 80 Zeichen lang ist.

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

Einen einzelnen Standardwert mithilfe des Wert-Attributs bereitstellen

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" />

Vorgeschlagene Werte anbieten

Einen Schritt weitergehend können Sie eine Liste von Standardoptionen bereitstellen, 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 jedoch eine schnellere Auswahl häufig verwendeter URLs. Dies bietet auch Hinweise für autocomplete. Das list Attribut gibt die ID eines <datalist> an, der wiederum ein <option> Element pro vorgeschlagenem Wert enthält; jedes 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> in Platz 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 präsentiert. Während die spezifische Benutzererfahrung von Browser zu Browser variieren kann, zeigt das Klicken im Bearbeitungsfeld typischerweise ein Dropdown-Menü der vorgeschlagenen URLs an. Dann, während der Benutzer tippt, wird die Liste angepasst, um nur übereinstimmende Werte anzuzeigen. Jedes eingegebene Zeichen verengt die Liste, bis der Benutzer eine Auswahl trifft oder einen benutzerdefinierten Wert eingibt.

Labels für vorgeschlagene Werte verwenden

Sie können das label Attribut auf einem oder allen Ihrer <option> Elemente verwenden, um Textetiketten 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 sind zwei Ebenen der Inhaltsvalidierung verfügbar. Erstens gibt es die Standardvalidierungsebene, die für alle <input>s verfügbar ist, die automatisch sicherstellt, dass die Inhalte die Voraussetzungen für eine gültige URL erfüllen. Es gibt jedoch auch die Möglichkeit, zusätzliche Filter hinzuzufügen, um sicherzustellen, dass Ihre eigenen speziellen Bedürfnisse erfüllt werden, falls Sie welche haben.

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 von dem WHATWG's URL Living Standard definiert und wird für Neulinge in unserem Artikel Was ist eine URL? beschrieben.

Wie bereits erwähnt, um einen URL-Eintrag erforderlich zu machen, bevor das Formular abgeschickt werden kann (Sie können das Feld nicht leer lassen), müssen Sie einfach das required Attribut für das Eingabeelement angeben.

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

Versuchen Sie, das obige Formular abzusenden, ohne einen Wert einzugeben, um zu sehen, was passiert.

Wenn Sie die eingegebene URL weiter einschränken müssen als nur "jede Zeichenfolge, die wie eine URL aussieht", können Sie das pattern Attribut verwenden, um einen regulären Ausdruck zu spezifizieren, den der Wert einhalten muss, um gültig zu sein.

Angenommen, Sie bauen eine Support-Seite für Mitarbeiter von 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 Seite eingeben, die ein Problem hat, und eine Nachricht hinzufügen, die beschreibt, was das Problem ist. Aber wir möchten, dass die URL nur dann erfolgreich validiert wird, wenn die eingegebene URL in einer Myco-Domain ist.

Da Eingaben des Typs url sowohl gegen die Standard-URL-Validierung als auch das angegebene pattern validieren, können Sie dies mit einem regulären Ausdruck implementieren. Schauen 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>

Zunächst ist das required Attribut angegeben, was es obligatorisch macht, dass eine gültige URL bereitgestellt wird.

Zweitens, in der url Eingabe setzen wir pattern auf ".*\.myco\..*" fest. Dieser reguläre Ausdruck fordert eine Zeichenfolge an, die eine beliebige Anzahl von Zeichen hat, gefolgt von einem Punkt, gefolgt von "myco", gefolgt von einem Punkt, 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 besagt: "Stelle sicher, dass dies eine gültige URL ist und auch in einer Myco-Domain."

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

Es wird empfohlen, das title Attribut zusammen mit pattern zu verwenden. Wenn Sie dies tun, muss das title das Muster beschreiben; es sollte erklären, welches Format die Daten haben sollten, anstatt irgendwelche anderen Informationen. Das liegt daran, dass das title als Teil einer Validierungsfehlermeldung angezeigt oder gesprochen werden könnte. Zum Beispiel könnte der Browser die Meldung "Der eingegebene Text entspricht nicht dem erforderlichen Muster." gefolgt von dem angegebenen title präsentieren. Wenn Ihr title lautet beispielsweise "URL", wäre das Ergebnis die Nachricht "Der eingegebene Text entspricht nicht dem erforderlichen Muster. URL", was keine gute Benutzererfahrung ist.

Deshalb spezifizieren wir stattdessen den String "Die URL muss in einer myco-Domain sein". Dadurch könnte die resultierende vollständige Fehlermeldung etwa lauten "Der eingegebene Text entspricht nicht dem erforderlichen Muster. Die URL sollte in einer myco-Domain sein."

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

Sie können auch unser Beispiel zur Pattern-Validierung auf GitHub finden (sehen Sie es sich auch live an).

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