Zum Hauptinhalt springen
Version: 2.1.1
FigmaOpenCode

Input Url

Synonyme: URL-Eingabefeld, Internetadresse, Link-Eingabefeld, Web-Adresse
Ähnliche Komponenten: Input Text, Input E-Mail

Kurzbeschreibung​

Ein Input Url unterstützt Nutzende bei der Eingabe einer einer Internetadresse (URL).

Beispiele​

Default​

Code anzeigen
<div class="kern-form-input">
<label class="kern-label" for="url">Internetadresse (URL)</label>
<input class="kern-form-input__input" id="url" name="url" type="url">
</div>

Readonly​

Code anzeigen
<div class="kern-form-input">
<label class="kern-label" for="url3">Internetadresse (URL)</label>
<input class="kern-form-input__input" id="url3" name="url3" type="url" value="www.kern-ux.de" readonly>
</div>

Disabled​

Achtung

Vermeide disabled, da es die Zugänglichkeit einschränkt. Weitere Informationen zur Barrierefreiheit

Code anzeigen
<div class="kern-form-input">
<label class="kern-label" for="url4">Internetadresse (URL)</label>
<input class="kern-form-input__input" id="url4" name="url4" type="url" value="www.kern-ux.de" disabled>
</div>

Optional​

Code anzeigen
<div class="kern-form-input">
<label class="kern-label" for="url">Internetadresse (URL) <span class="kern-label__optional">- Optional</span></label>
<input class="kern-form-input__input" id="url" name="url" type="url">
</div>

Hinweistext und Fehlermeldung​

Code anzeigen
<div class="kern-form-input kern-form-input--error">
<label class="kern-label" for="url6">Internetadresse (URL)</label>
<div class="kern-hint" id="url-hint2">Ein Hinweis gibt Hilfestellung zum Format oder eine Begründung, warum diese Information benötigt wird.</div>
<input class="kern-form-input__input kern-form-input__input--error" id="url6" name="url6" type="url" aria-describedby="url-hint2 Url-error">
<p class="kern-error" id="url-error" role="alert">
  <span class="kern-icon kern-icon--danger kern-icon--md" aria-hidden="true"></span>
  <span class="kern-body">Eine konstruktive Fehlermeldung vermittelt, was Nutzende tun können, um das Problem zu lösen.</span>
</p>
</div>

Beschreibung​

Hinweis

Für Input Url gelten die allgemein beschriebenen Eigenschaften eines Inputs, wie z. B. Zustände (states) oder Dos and Don’ts.

Ein URL-Feld (input type="url") ist eine spezialisierte Komponente, die es Nutzenden ermöglicht, gültige Webadressen in ein Formular einzugeben. Das URL-Feld ist darauf ausgelegt, alphanumerische Daten wie Buchstaben, Zahlen und bestimmte Sonderzeichen zu unterstützen, die in einer URL zulässig sind. Es bietet automatische Eingabevalidierung, um sicherzustellen, dass die eingegebene URL korrekt formatiert ist.
Neben dem Label „Internetadresse (URL)“ kann bei Bedarf eine Kennzeichnung als „optional“ erfolgen. Ein ergänzender Hinweistext (Hint) kann zusätzlich Informationen zum Format, zur Bedeutung oder zum Hintergrund der Eingabe geben und unterstützt so die Nutzerfreundlichkeit. Bei einer ungültigen Eingabe wird eine Fehlermeldung unterhalb des Feldes angezeigt. Hinsichtlich der Breite kann Input URL angepasst werden, um sich in das Gesamtdesign der Anwendung einzufügen. Weitere Hinweise findest du unter Breite und Höhe der Eingabefelder. Input URL kann alle unter Input beschriebenen Zustände annehmen.

Verwendungsregeln​

Input Url wird in Formularen zur Eingabe einer Internetadresse genutzt. Aus der Beschriftung des Feldes sollte klar ersichtlich sein, dass hier nur Internetadressen eingegeben werden dürfen – beispielsweise Internetadresse (Url). Ist dies nicht der Fall oder wird ein bestimmtes Format erwartet (z. B. www.beispielseite.de), so muss ein Eingabehinweis im Hinweistext die zulässigen Zeichen und das Format erläutern.

Beispiel:

  • Eingabe einer Internetadresse, die die Dienstleistung oder den Service beschreibt.

Dos and Don’ts​

  • Nutze Input Url nur zur Abfrage von Internetadressen.
  • Gib Nutzenden einen Hinweis auf das erwartete Format.
  • Siehe auch allgemeine Dos und Don'ts für Input

Barrierefreiheit​

Diese Komponente erfüllt die formalen Eigenschaften – Schriftgröße, Kontrastverhältnis – für barrierefreie Dienste.

  • Die Eingabefelder für Internetadressen sind weder visuell noch mit Assistenztechnologie als solche zu erkennen – sie werden als normale Eingabefelder angezeigt bzw. vom Screenreader ausgegeben. Deshalb müssen sie aussagekräftig beschriftet werden und sollten zusätzlich Bedienhinweise zum erforderlichen Eingabeformat erhalten.

Siehe auch: Hinweise zur Barrierefreiheit für Input und BFIT Handreichungen.

Inhaltsverzeichnis