Zum Hauptinhalt springen

Input Url

Synonyme:
Ähnliche Komponenten: Input Date, Input E-Mail, Input Password

Hinweis

Die Komponente ist bereits einsatzbereit, jedoch fehlt noch die Dokumentation. Du kannst sie trotzdem schon verwenden – die Dokumentation wird in Kürze ergänzt.

Kurzbeschreibung​

Ein Input Url ermöglicht Nutzenden, Buchstaben, Zahlen und Sonderzeichen einzugeben.

Beispiele​

Default Url​

Code anzeigen
<div class="kern-form-input">
<label class="kern-form-input__label" for="url">Name</label>
<input class="kern-form-input__input" id="url" name="url" type="url">
</div>

Readonly Url​

Code anzeigen
<div class="kern-form-input">
<label class="kern-form-input__label" for="url3">Name</label>
<input class="kern-form-input__input" id="url3" name="url3" type="url" value="url" readonly>
</div>

Disabled Url​

Achtung

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

Code anzeigen
<div class="kern-form-input">
<label class="kern-form-input__label" for="url4">Name</label>
<input class="kern-form-input__input" id="url4" name="url4" type="url" disabled>
</div>

Hint Error Url​

Code anzeigen
<div class="kern-form-input kern-form-input--error">
<label class="kern-form-input__label" for="url6">Name</label>
<div class="kern-form-input__hint" id="url-hint2">Hint Url</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-text">Der Name darf nicht leer sein</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. Fehlermeldungen und visuelle Hinweise informieren Nutzende über notwendige Korrekturen, falls die Eingabe fehlerhaft ist.

Sie können verschiedene Zustände annehmen, um den Nutzenden ihren aktuellen Status anzuzeigen. Diese sieben Zustände umfassen: default, hover, focus, readonly, disabled, error und error focus.
Hinsichtlich ihrer Größe können Urlfelder angepasst werden, um sich in das Gesamtdesign der Anwendung einzufügen, was zur Einheitlichkeit und Benutzerfreundlichkeit beiträgt. Mehr Informationen zu Breite und Höhe der Eingabefelder.

Weitere Hinweise​

Barrierefreiheit​

Diese Komponente erfüllt die formalen Eigenschaften – Schriftgröße, Kontrastverhältnis – für barrierefreie Dienste. Siehe auch: Hinweise zur Barrierefreiheit für Input und BFIT Handreichungen.

Inhaltsverzeichnis