<input type="url">

Der Eingabewert wird automatisch validiert, um sicherzustellen, dass er entweder leer oder eine korrekt formatierte URL ist, bevor das Formular gesendet werden kann. Die CSS-Pseudoklassen :valid und :invalid werden 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 die Übereinstimmung 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 hat oder der Wert entfernt wurde.
2. Eine einzelne korrekt formatierte absolute URL. Dies bedeutet nicht unbedingt, dass die URL-Adresse existiert, aber sie ist zumindest korrekt formatiert. Ein Eintrag, der mit urlscheme://rest-of-url übereinstimmt, 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 angewendet werden, unterstützen url-Eingaben die folgenden Attribute.

Die Werte des list-Attributs sind die id eines <datalist>-Elements, das sich im gleichen 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, sind 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-Codeeinheiten), die der Benutzer in das url-Eingabefeld eingeben kann. Dies muss ein ganzzahliger Wert von 0 oder größer sein. Wenn kein maxlength angegeben ist oder ein ungültiger Wert angegeben wird, 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 Textwertes 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 Zeichenlänge (gemessen in UTF-16-Codeeinheiten), die der Benutzer in die url-Eingabe eingeben kann. Dies muss ein nichtnegativer ganzzahliger Wert sein, der kleiner oder gleich dem durch maxlength angegebenen Wert ist. Wenn kein minlength angegeben ist oder ein ungültiger Wert angegeben wird, 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 Texts 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 es angegeben ist, ist ein regulärer Ausdruck, den der value der Eingabe erfüllen 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 ist; das 'u'-Flag wird 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 komplett ignoriert.

Siehe den Abschnitt Mustervalidierung für Details und ein Beispiel.

Das placeholder-Attribut ist eine Zeichenkette, die dem Benutzer einen kurzen Hinweis darauf gibt, welche Art von Informationen in dem Feld erwartet werden. Es sollte ein Wort oder eine kurze Phrase sein, die die erwartete Art von Daten demonstriert, anstatt eine erklärende Nachricht. Der Text darf nicht Wagenrückläufe oder Zeilenumbrüche enthalten.

Wenn der Inhalt des Steuerungselements eine Richtung (LTR oder RTL) hat, der Platzhalter jedoch in der entgegengesetzten Richtung dargestellt werden muss, können Sie Unicode-Zeichen zur bidirektionalen Textformatierung verwenden, um die Richtung im Platzhalter zu überschreiben; siehe Anleitung zum Verwenden von Unicode für bidirektionalen Text für weitere Informationen.

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

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 die Breite von Zeichen variiert, kann dies exakt sein oder auch nicht und es sollte nicht darauf vertraut werden; das resultierende Eingabefeld kann je nach Zeichen und Schriftartseinstellungen (font) schmaler oder breiter als die angegebene Anzahl von Zeichen sein.

Dies setzt keine Grenze dafür, wie viele Zeichen der Benutzer in das Feld eingeben kann. Es gibt nur an, wie viele Zeichen ungefähr gleichzeitig zu sehen sein können. Um eine Obergrenze für die Länge der eingegebenen Daten 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 spezifische Aspekte der 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

Befolgen Sie das Standardverhalten des Elements für die Rechtschreibprüfung. Dies kann auf die spellcheck-Einstellung eines übergeordneten Elements oder andere 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, spiegelt möglicherweise nicht den tatsächlichen Zustand der Rechtschreibprüfung innerhalb eines Steuerelements wider, wenn die Benutzeragenten-Einstellungen 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 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 URL ist, die tatsächlich existiert, dem Benutzer der Seite 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 ein 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 einzelne korrekt formatierte URL-Adresse eingegeben wird, aber anderweitig nicht als gültig angesehen wird. Durch Hinzufügen des required-Attributs sind nur korrekt formatierte URLs erlaubt; die Eingabe ist nicht mehr als gültig zu betrachten, wenn sie leer ist.

Es passiert hier nichts Magisches. Das Absenden 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 werden.

Manchmal ist es hilfreich, einen kontextbezogenen Hinweis darauf zu geben, welche Form die Eingabedaten haben 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 des value demonstriert, indem er ein Beispiel für einen gültigen Wert zeigt, das im Bearbeitungsfeld angezeigt wird, wenn der value des Elements "". 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 die Inhalte 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 minimal und maximal erlaubte Länge für den Eingabetext steuern.

Physische Größe des Eingabeelements

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

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

Länge des Elementwertes

Die size ist getrennt von der Längenbeschränkung für die tatsächlich eingegebene URL. Sie können eine Mindestlänge in Zeichen für die eingegebene URL mithilfe des minlength-Attributs angeben; verwenden Sie ähnlich maxlength, um die maximale Länge der eingegebenen URL festzulegen. Wenn maxLength die size überschreitet, scrollt der Inhalt der Eingabebox bei Bedarf, um die aktuelle Auswahl oder Einfügestelle anzuzeigen, während der Inhalt manipuliert wird.

Das folgende Beispiel erstellt ein 30 Zeichen breites Eingabefeld für URL-Adressen, 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 einzelnen Standards mit dem value-Attribut

Wie üblich können Sie einen Standardwert für eine url-Eingabebox bereitstellen, indem Sie ihr value-Attribut setzen:

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

Anbieten vorgeschlagener Werte

Wenn man noch einen Schritt weitergeht, kann man eine Liste von Standardoptionen bereitstellen, aus denen der Benutzer auswählen kann, indem man das list-Attribut angibt. Dies schränkt den Benutzer nicht auf diese Optionen ein, ermöglicht ihm aber, gebräuchliche 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 eines jeden option 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 bietet der Browser die angegebenen Werte als mögliche URL-Werte an; dies wird typischerweise als Popup- oder Dropdown-Menü mit den Vorschlägen präsentiert. Während die spezifische Benutzererfahrung von einem Browser zum anderen variieren kann, präsentiert das Klicken in das Bearbeitungsfeld typischerweise ein Dropdown-Menü mit den vorgeschlagenen URLs. Dann, während der Benutzer tippt, wird die Liste so angepasst, dass nur passende Werte angezeigt werden. Jeder getippte Buchstabe schränkt die Liste weiter ein, bis der Benutzer eine Auswahl trifft oder einen benutzerdefinierten Wert eingibt.

Verwendung von Bezeichnungen für vorgeschlagene Werte

Sie können wählen, das label-Attribut an einem oder allen Ihrer <option>-Elemente einzuschließen, um Textetiketten bereitzustellen. Einige Browser können nur die Etiketten anzeigen, während andere sowohl das Etikett 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, die für url-Eingaben verfügbar sind. Erstens gibt es das Standardniveau der Validierung, das allen <input>s angeboten wird, welches automatisch sicherstellt, dass die Inhalte die Anforderungen für eine gültige URL erfüllen. Aber es gibt auch die Möglichkeit, zusätzliche Filter hinzuzufügen, um sicherzustellen, dass Ihre eigenen speziellen Anforderungen erfüllt werden, falls vorhanden.

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

Wie bereits erwähnt, um sicherzustellen, dass eine URL-Eingabe erforderlich ist, bevor das Formular gesendet werden kann (Sie können das Feld nicht leer lassen), müssen Sie lediglich das required-Attribut in der Eingabe enthalten.

<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 "eine 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, damit er gültig ist.

Angenommen, Sie entwickeln eine Supportseite für die Mitarbeiter von Myco, Inc., die es ihnen ermöglichen soll, ihre IT-Abteilung um Hilfe zu bitten, 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 falsch ist. Aber wir wollen, dass die URL nur dann erfolgreich validiert wird, wenn die eingegebene URL in einer Myco-Domäne liegt.

Da Eingaben vom Typ url sowohl gegen den Standard-URL-Filter 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 einmal wird das required-Attribut angegeben, was es zwingend macht, dass eine gültige URL bereitgestellt wird.

Zweitens setzen wir in der url-Eingabe pattern auf ".*\.myco\..*". Dieser reguläre Ausdruck erfordert eine Zeichenkette, die aus einer beliebigen Anzahl von Zeichen besteht, gefolgt von einem Punkt, gefolgt von "myco", gefolgt von einem Punkt und einer beliebigen Anzahl von Zeichen. Da der Browser sowohl den Standard-URL-Filter als auch unser benutzerdefiniertes Muster gegen den angegebenen Text prüft, erhalten wir eine Validierung, die sagt: "Stellen Sie sicher, dass dies eine gültige URL ist und sich auch in einer Myco-Domäne befindet."

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 das title das Muster beschreiben; es sollte erklären, welches Format die Daten haben sollten, anstatt andere Informationen. Das liegt daran, dass das title als Teil einer Validierungsmeldung angezeigt oder gesprochen werden kann. Beispielsweise könnte der Browser die Meldung "Der eingegebene Text entspricht nicht dem erforderlichen Muster." gefolgt von Ihrem angegebenen title anzeigen. Wenn Ihr title solch etwas wie "URL" ist, würde das Ergebnis die Meldung "Der eingegebene Text entspricht nicht dem erforderlichen Muster. URL" sein, was keine gute Benutzererfahrung darstellt.

Deshalb geben wir stattdessen die Zeichenkette "Die URL muss in einer Myco-Domäne sein" an. Auf diese Weise könnte die vollständige Fehlermeldung etwas wie "Der eingegebene Text entspricht nicht dem erforderlichen Muster. Die URL sollte in einer Myco-Domäne sein." lauten.

Es gibt nicht viel mehr über url-Eingabetypen zu sagen; siehe die Abschnitte Musterprüfung und Verwendung von URL-Eingaben für zahlreiche Beispiele.

Sie können auch unser Beispiel zur Musterprüfung auf GitHub finden (sehen Sie es sich auch live an).

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