HTML-Attributwert <input type="url">

Probieren Sie es aus

<label for="url">Enter an https:// URL:</label>
<input
  type="url"
  name="url"
  id="url"
  placeholder="https://example.com"
  pattern="https://.*"
  size="30"
  required />

label {
  display: block;
  font:
    1rem "Fira Sans",
    sans-serif;
}

input,
label {
  margin: 0.4rem 0;
}

Wert

Das Attribut value des <input>-Elements enthält eine Zeichenfolge, die automatisch auf Übereinstimmung mit der URL-Syntax geprüft wird. Genauer gesagt bestehen zwei mögliche Wertformate die Validierung:

1. Eine leere Zeichenfolge ("") 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. Eine Eingabe nach dem Muster urlscheme://rest-of-url kann gültig sein, selbst wenn das eingegebene urlscheme nicht existiert.

Weitere Informationen dazu, wie URLs auf korrekte Formatierung geprüft werden, finden Sie unter Validierung.

Zusätzliche Attribute

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

list

Der Wert des Attributs list ist die id eines <datalist>-Elements im selben Dokument. Das <datalist>-Element stellt eine Liste vordefinierter Werte bereit, die dem Benutzer für dieses Eingabefeld vorgeschlagen werden. Werte in der Liste, die nicht mit dem type kompatibel sind, werden nicht in die Vorschläge aufgenommen. Die bereitgestellten Werte sind Vorschläge, keine Vorgaben: Benutzer können einen Wert aus der vordefinierten Liste auswählen oder einen anderen Wert eingeben.

maxlength

Die maximale Länge der Zeichenfolge (gemessen in UTF-16-Codeeinheiten), die der Benutzer in das url-Eingabefeld eingeben kann. Der Wert muss eine ganze Zahl ab 0 sein. Wenn maxlength nicht angegeben ist oder einen ungültigen Wert hat, hat das url-Eingabefeld keine maximale Länge. Der Wert muss außerdem größer oder gleich dem Wert von minlength sein.

Das Eingabefeld besteht die Constraint-Validierung nicht, wenn der Textwert des Feldes länger als maxlength UTF-16-Codeeinheiten ist. Die Constraint-Validierung wird nur angewendet, wenn der Benutzer den Wert ändert.

minlength

Die minimale Länge der Zeichenfolge (gemessen in UTF-16-Codeeinheiten), die der Benutzer in das url-Eingabefeld eingeben kann. Der Wert muss eine nicht negative ganze Zahl sein, die kleiner oder gleich dem durch maxlength angegebenen Wert ist. Wenn minlength nicht angegeben ist oder einen ungültigen Wert hat, hat das url-Eingabefeld keine minimale Länge.

Das Eingabefeld besteht die Constraint-Validierung nicht, wenn der in das Feld eingegebene Text kürzer als minlength UTF-16-Codeeinheiten ist. Die Constraint-Validierung wird nur angewendet, wenn der Benutzer den Wert ändert.

pattern

Das Attribut pattern gibt, falls vorhanden, einen regulären Ausdruck an, mit dem der value des Eingabefelds übereinstimmen muss, um die Constraint-Validierung zu bestehen. Es muss sich um einen gültigen regulären JavaScript-Ausdruck handeln, wie er vom Typ RegExp verwendet und in unserem Leitfaden zu regulären Ausdrücken beschrieben wird. Beim Kompilieren des regulären Ausdrucks wird das Flag 'u' gesetzt, damit das Muster als Folge von Unicode-Codepunkten und nicht als ASCII behandelt wird. Der Mustertext darf nicht von Schrägstrichen umschlossen sein.

Wenn das Muster nicht angegeben oder ungültig ist, wird kein regulärer Ausdruck angewendet und das Attribut vollständig ignoriert.

Einzelheiten und ein Beispiel finden Sie im Abschnitt Validierung anhand eines Musters.

placeholder

Das Attribut placeholder enthält eine Zeichenfolge, die dem Benutzer einen kurzen Hinweis darauf gibt, welche Informationen im Feld erwartet werden. Es sollte ein Wort oder eine kurze Wortgruppe sein, die den erwarteten Datentyp veranschaulicht, und keine ausführliche Erklärung. Der Text darf keine Wagenrückläufe oder Zeilenumbrüche enthalten.

Wenn der Inhalt des Steuerelements eine Schreibrichtung hat (LTR oder RTL), der Platzhalter aber in der entgegengesetzten Schreibrichtung dargestellt werden soll, können Sie Formatierungszeichen des bidirektionalen Unicode-Algorithmus verwenden, um die Schreibrichtung innerhalb des Platzhalters zu ändern. Weitere Informationen finden Sie unter Unicode-Steuerzeichen für bidirektionalen Text verwenden.

readonly

Wenn das boolesche Attribut readonly vorhanden ist, kann der Benutzer dieses Feld nicht bearbeiten. Sein value kann jedoch weiterhin durch JavaScript-Code geändert werden, der die value-Eigenschaft von HTMLInputElement direkt setzt.

size

Das Attribut size ist ein numerischer Wert, der angibt, wie viele Zeichen breit das Eingabefeld sein soll. Der Wert muss größer als null sein; der Standardwert ist 20. Da Zeichen unterschiedlich breit sind, ist diese Angabe möglicherweise nicht exakt und sollte nicht als exakte Breitenangabe betrachtet werden. Je nach Zeichen und verwendeter Schriftart (den font-Einstellungen) kann das resultierende Eingabefeld schmaler oder breiter als die angegebene Zeichenanzahl sein.

Dadurch wird nicht begrenzt, wie viele Zeichen der Benutzer in das Feld eingeben kann. Es wird nur ungefähr festgelegt, wie viele Zeichen gleichzeitig sichtbar sind. Um die Länge der Eingabedaten nach oben zu begrenzen, verwenden Sie das Attribut maxlength.

spellcheck

Das globale Attribut spellcheck gibt an, ob die Rechtschreibprüfung für ein Element aktiviert werden soll. Es kann für jeden bearbeitbaren Inhalt verwendet werden; hier betrachten wir die Besonderheiten bei der Verwendung von spellcheck für <input>-Elemente. Zulässige Werte für spellcheck sind:

false

Deaktiviert die Rechtschreibprüfung für dieses Element.

true

Aktiviert die Rechtschreibprüfung für dieses Element.

"" (leere Zeichenfolge) oder kein Wert

Übernimmt das Standardverhalten des Elements für die Rechtschreibprüfung. Dieses kann von der spellcheck-Einstellung eines übergeordneten Elements oder von anderen Faktoren abhängen.

Für ein Eingabefeld kann die Rechtschreibprüfung aktiviert werden, wenn das Attribut readonly nicht gesetzt und das Feld nicht deaktiviert ist.

Der beim Lesen von spellcheck zurückgegebene Wert spiegelt möglicherweise nicht den tatsächlichen Zustand der Rechtschreibprüfung in einem Steuerelement wider, wenn die Einstellungen des User Agents die Einstellung überschreiben.

URL-Eingabefelder verwenden

Wenn Sie ein URL-Eingabefeld mit dem passenden type-Wert url erstellen, wird automatisch geprüft, ob der eingegebene Text zumindest so formatiert ist, dass er eine gültige URL sein könnte. So lässt sich vermeiden, dass Benutzer die Adresse ihrer Website falsch eingeben oder eine ungültige Adresse angeben.

Beachten Sie jedoch, dass dies nicht ausreicht, um sicherzustellen, dass die angegebene URL tatsächlich existiert, dem Benutzer der Website zugeordnet ist oder anderweitig akzeptabel ist. Es stellt lediglich sicher, dass der Feldwert als URL korrekt formatiert ist.

Ein einfaches URL-Eingabefeld

Dieses Element wird als normales Texteingabefeld mit grundlegenden Validierungsfunktionen umgesetzt. In seiner einfachsten Form kann ein URL-Eingabefeld so implementiert werden:

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

Beachten Sie, dass das Feld sowohl leer als auch mit einer einzelnen korrekt formatierten URL-Adresse als gültig gilt, andernfalls jedoch nicht. Wenn Sie das Attribut required hinzufügen, sind nur korrekt formatierte URLs zulässig; ein leeres Eingabefeld gilt dann nicht mehr als gültig.

Hier geschieht nichts Besonderes. Beim Absenden dieses Formulars würden die folgenden Daten an den Server gesendet: myURL=http%3A%2F%2Fwww.example.com. Beachten Sie, wie Zeichen bei Bedarf maskiert werden.

Platzhalter

Manchmal ist es hilfreich, direkt im Eingabefeld einen Hinweis darauf zu geben, welches Format die Eingabedaten haben sollen. Das kann besonders wichtig sein, wenn das Seitendesign keine aussagekräftigen Beschriftungen für jedes <input>-Element vorsieht. Hier kommen Platzhalter ins Spiel. Ein Platzhalter veranschaulicht anhand eines gültigen Beispielwerts, welches Format der value haben soll. Er wird im Eingabefeld angezeigt, wenn der value des Elements "" ist. Sobald Daten in das Feld eingegeben werden, verschwindet der Platzhalter; wird das Feld geleert, erscheint er erneut.

Hier verwenden wir ein url-Eingabefeld mit dem Platzhalter http://www.example.com. Beachten Sie, wie der Platzhalter beim Bearbeiten des Feldinhalts verschwindet und wieder erscheint.

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

Größe und Länge der Eingabe steuern

Sie können sowohl die sichtbare Breite des Eingabefelds als auch die zulässige Mindest- und Höchstlänge des eingegebenen Textes steuern.

Sichtbare Größe des Eingabeelements

Die sichtbare Größe des Eingabefelds lässt sich mit dem Attribut size steuern. Damit können Sie angeben, wie viele Zeichen das Eingabefeld gleichzeitig anzeigen kann. In diesem Beispiel ist das url-Eingabefeld beispielsweise 30 Zeichen breit:

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

Länge des Elementwerts

size ist unabhängig von der Längenbeschränkung der eingegebenen URL. Mit dem Attribut minlength können Sie eine Mindestlänge in Zeichen für die eingegebene URL festlegen; mit maxlength legen Sie entsprechend die Höchstlänge fest. Wenn maxLength größer als size ist, wird der Inhalt des Eingabefelds bei Bedarf gescrollt, damit die aktuelle Auswahl oder Einfügeposition während der Bearbeitung sichtbar bleibt.

Das folgende Beispiel erstellt ein 30 Zeichen breites Eingabefeld für eine URL-Adresse. Sein Inhalt muss mindestens 10 und darf höchstens 80 Zeichen lang sein.

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

Standardoptionen bereitstellen

Einen einzelnen Standardwert mit dem Attribut value bereitstellen

Wie üblich können Sie einen Standardwert für ein url-Eingabefeld festlegen, indem Sie sein Attribut value setzen:

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

Werte vorschlagen

Darüber hinaus können Sie mit dem Attribut list eine Liste vordefinierter Optionen bereitstellen, aus denen Benutzer auswählen können. Die Auswahl ist nicht auf diese Optionen beschränkt, aber häufig verwendete URLs lassen sich so schneller auswählen. Die Liste liefert auch Hinweise für autocomplete. Das Attribut list gibt die ID eines <datalist>-Elements an, das wiederum für jeden vorgeschlagenen Wert ein <option>-Element enthält. Der value jedes option-Elements ist der entsprechende Vorschlagswert 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>-Elementen bietet der Browser die angegebenen Werte als mögliche URLs an. Üblicherweise erscheinen die Vorschläge in einem Popup- oder Dropdown-Menü. Die genaue Bedienung kann sich je nach Browser unterscheiden. In der Regel wird beim Klicken in das Eingabefeld eine Dropdown-Liste mit vorgeschlagenen URLs angezeigt. Während der Benutzer tippt, wird die Liste auf passende Werte eingegrenzt. Jedes eingegebene Zeichen schränkt die Liste weiter ein, bis der Benutzer einen Vorschlag auswählt oder einen eigenen Wert eingibt.

Beschriftungen für vorgeschlagene Werte verwenden

Sie können bei einem oder allen <option>-Elementen das Attribut label hinzufügen, um Textbeschriftungen bereitzustellen. Manche Browser zeigen möglicherweise nur die Beschriftungen an, andere sowohl die Beschriftung als auch die URL.

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

Validierung

Für url-Eingabefelder stehen zwei Ebenen der Inhaltsvalidierung zur Verfügung. Zunächst gibt es die Standardvalidierung für alle <input>-Elemente. Sie stellt automatisch sicher, dass der Inhalt die Anforderungen an eine gültige URL erfüllt. Zusätzlich können Sie eine weitere Prüfung hinzufügen, um gegebenenfalls eigene Anforderungen durchzusetzen.

Grundlegende Validierung

Browser, die den Eingabetyp url unterstützen, prüfen automatisch, ob der in das Eingabefeld eingegebene Text dem Standardformat für URLs entspricht.

Die Syntax einer URL ist recht komplex. Sie wird durch den URL Living Standard der WHATWG definiert und für Einsteiger in unserem Artikel Was ist eine URL? beschrieben.

Eine URL zur Pflichtangabe machen

Wie bereits erwähnt, müssen Sie lediglich das Attribut required zum Eingabefeld hinzufügen, wenn vor dem Absenden des Formulars eine URL eingegeben werden muss und das Feld nicht leer bleiben darf.

Validierung anhand eines Musters

Wenn Sie die eingegebene URL stärker einschränken müssen als auf „eine beliebige Zeichenfolge, die wie eine URL aussieht“, können Sie mit dem Attribut pattern einen regulären Ausdruck angeben, mit dem der Wert übereinstimmen muss, um gültig zu sein.

Beispiele

URL-Validierung

In diesem Beispiel stellen wir mit dem Attribut required sicher, dass eine URL eingegeben wird. Zur Veranschaulichung verwenden wir außerdem das Attribut pattern, um die URL auf mozilla.org zu beschränken.

HTML

Im url-Eingabefeld setzen wir pattern auf ".*\.mozilla\.org.*". Dieser reguläre Ausdruck akzeptiert eine Zeichenfolge mit beliebig vielen Zeichen, gefolgt von „.mozilla.org“ und anschließend beliebig vielen weiteren Zeichen. Da der Browser den angegebenen Text sowohl mit dem Standardfilter für URLs als auch mit unserem eigenen Muster prüft, muss der Wert eine gültige URL sein und außerdem .mozilla.org enthalten.

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

Das Attribut title beschreibt das pattern außerdem für Benutzer assistiver 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>

document.querySelectorAll("form").forEach((form) => {
  form.addEventListener("submit", (event) => {
    event.preventDefault();
  });
});

CSS

Das CSS gibt Benutzern durch eine passende content-Eigenschaft visuelle Hinweise darauf, ob der Inhalt :valid oder :invalid ist, und enthält Alternativtext für Benutzer assistiver Technologien.

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. Daraufhin sehen Sie einen grünen Rahmen und ein grünes Häkchen. Geben Sie eine andere URL ein, die mozilla.org nicht enthält, oder eine ungültige URL, sehen Sie einen roten Rahmen und ein rotes Kreuz.

Weitere Beispiele finden Sie in den Abschnitten Validierung anhand eines Musters und URL-Eingabefelder verwenden.

Technische Übersicht

Spezifikationen

Browser-Kompatibilität

Siehe auch

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