Zum Hauptinhalt springen
Version: 2.1.1
FigmaOpenCode

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

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="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​

Hinweis

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​

Barrierefreiheit​

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

Inhaltsverzeichnis