Figma
OpenCodeInput E-Mail
Synonyme: E-Mail-Eingabefeld, E-mail input field, Email input field
Ähnliche Komponenten: Input Date, Input Password, Input Text
Kurzbeschreibung
Input E-Mail unterstützt Nutzende bei der Eingabe einer E-Mail-Adresse.
Beispiele
Default
Code anzeigen
<div class="kern-form-input">
<label class="kern-label" for="email">E-Mail-Adresse</label>
<input class="kern-form-input__input" id="email" name="email" type="email" autocomplete="email">
</div>Readonly
Code anzeigen
<div class="kern-form-input">
<label class="kern-label" for="email3">E-Mail-Adresse</label>
<input class="kern-form-input__input" id="email3" name="email3" type="email" autocomplete="email" value="kim@musterperson.de" readonly>
</div>Disabled
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="email4">E-Mail-Adresse</label>
<input class="kern-form-input__input" id="email4" name="email4" type="email" autocomplete="email" value="kim@musterperson.de" disabled>
</div>Optional
Code anzeigen
<div class="kern-form-input">
<label class="kern-label" for="email6">Email
<span class="kern-label__optional">- Optional</span>
</label>
<input class="kern-form-input__input" id="email" name="email" type="email" autocomplete="email">
</div>Hinweistext und Fehlermeldung
Code anzeigen
<div class="kern-form-input kern-form-input--error">
<label class="kern-label" for="email6">E-Mail-Adresse</label>
<div class="kern-hint" id="email-hint">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="email6" name="email6" type="email" autocomplete="email" aria-describedby="email-hint kern-input-error">
<p class="kern-error" id="kern-input-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
Für Input E-Mail gelten die allgemein beschriebenen Eigenschaften eines Inputs, wie z. B. Zustände (states) oder Dos and Don’ts.
Input E-Mail akzeptiert die Eingabe einer E-Mail-Adresse.
Das E-Mail-Feld validiert automatisch das Format der eingegebenen E-Mail-Adresse. Es überprüft, ob die Eingabe die grundlegende Struktur einer E-Mail-Adresse (z. B. Benutzername@domain.tld) erfüllt. Bei ungültigen Eingaben wird eine Fehlermeldung angezeigt.
Es kann alle unter Input beschriebenen Zustände annehmen.
Verwendungsregeln
Verwende ein Input E-Mail nur zur Eingabe von E-Mail-Adressen. Gebe Hilfestellung zum erwarteten Format.
Dos und Don’ts
- Erlaube die autocomplete-Funktion, so dass die E-Mail-Adresse vervollständigt wird, wenn Nutzende diese bereits einmal eingegeben hatten.
Weitere Hinweise
- Siehe auch allgemeine Dos und Don'ts für Input
Barrierefreiheit
Die Barrierefreiheit unserer Komponenten wird nach der Barrierefreie-Informationstechnik-Verordnung (BITV 2.0) geprüft, die auf der europäischen Norm EN 301 549 basiert. Diese legt Anforderungen an die Zugänglichkeit von Informations- und Kommunikationstechnologien (IKT) fest und orientiert sich an den WCAG 2.1. Die für Webinhalte relevanten Kriterien sind in Kapitel 9 der EN 301 549 beschrieben und übernehmen die Nummerierung der WCAG-Kriterien, ergänzt um eine führende 9 – z. B. wird aus WCAG 2.4.3 „Focus Order“ das Kriterium 9.2.4.3.
Da bereits an einer Aktualisierung der EN 301 549 gearbeitet wird, haben wir uns entschieden, alle dort referenzierten Kriterien schon jetzt anhand der WCAG 2.2 zu prüfen und zu dokumentieren. So stellen wir sicher, dass unser Design-System den kommenden europäischen Standards voraus ist und langfristig barrierefrei bleibt.
Implementierungsabhängig
Unsere Komponenten wurden einzeln auf Barrierefreiheit geprüft und sind für sich genommen barrierefrei. Bei der Nutzung bzw. Kombination mehrerer Komponenten müssen jedoch bestimmte Aspekte beachtet werden, um die Barrierefreiheit im Gesamtkontext sicherzustellen:
WCAG 1.3.5
E-Mail-Input hat ein passendes autocomplete-Attribut
WCAG 3.3.2
E-Mail-Input hat aussagekräftige Beschriftung
Bestanden
Folgendes ist bereits geprüft und erfüllt, vorausgesetzt die Komponente wird wie in den Code-Beispielen gezeigt verwendet:
WCAG 1.3.1
E-Mail-Input ist programmatisch mit Label verknüpft
WCAG 1.3.1
Fehlermeldung ist programmatisch mit E-Mail-Input verknüpft
WCAG 1.3.5
E-Mail-Input-Zweck ist programmatisch erkennbar
WCAG 1.4.6
E-Mail-Input-Text erfüllt das minimale Kontrastverhältnis von 7:1
WCAG 1.4.11
E-Mail-Input-Rahmen hebt sich mit mindestens 3:1 Kontrast ab
WCAG 2.1.1
E-Mail-Input ist vollständig per Tastatur bedienbar
WCAG 2.4.13
E-Mail-Input hat sichtbare Fokuszustände
WCAG 3.3.1
E-Mail-Validierungsfehler werden klar identifiziert
WCAG 4.1.3
Fehlermeldung wird als Status-Nachricht gekennzeichnet
Siehe auch: BFIT Handreichungen