Zum Hauptinhalt springen

Input Password

Synonyme: Passwort-Eingabefeld, Passwortfeld, Password input field
Ähnliche Komponenten: Input Date, Input E-Mail, Input Text

Kurzbeschreibung​

Input Password ermöglicht die Eingabe oder Erstellung eines Passworts.

Beispiele​

Default Password​

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

Readonly Password​

Code anzeigen
<div class="kern-form-input">
<label class="kern-form-input__label" for="password3">Password</label>
<input class="kern-form-input__input" id="password3" name="password3" type="password" readonly>
</div>

Disabled Password​

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="password4">Password</label>
<input class="kern-form-input__input" id="password4" name="password4" type="password" disabled>
</div>

Hint Error Password​

Code anzeigen
<div class="kern-form-input kern-form-input--error">
<label class="kern-form-input__label" for="password6">Password</label>
<div class="kern-form-input__hint" id="password-hint">Hint Password</div>
<input class="kern-form-input__input kern-form-input__input--error" id="password6" name="password6" type="password" aria-describedby="password-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-text">Das Passwort darf nicht leer sein</span>
</p>
</div>

Beschreibung​

Hinweis

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

Input Password stellt die Zeichen bei der Eingabe durch den Benutzer maskiert dar. Unterhalb des Feldes gibt es einen Link „Passwort vergessen“, der Nutzende zu einem Formular zur Beantragung eines neuen Passwortes führen soll. Im Gegensatz zu regulären Textfeldern werden die eingegebenen Zeichen in einem Passwortfeld durch Punkte ersetzt. Dies schützt die eingegebenen Daten vor neugierigen Blicken und erhöht die Sicherheit. Nutzende können die Sichtbarkeit der Zeichen ein- oder ausblenden, indem sie auf das Ansichtssymbol rechts im Eingabefeld klicken. Das Einblenden hilft Nutzenden, Tippfehler zu vermeiden. Die „autocomplete“-Funktion ist in Passwortfeldern deaktiviert, um den Datenschutz zu gewährleisten. Dies verhindert, dass Passwörter automatisch von Webbrowsern gespeichert und wiederverwendet werden. Input Password kann die fünf Zustände default, hover, focus, error und error focus annehmen. Ausgeschlossen sind die Zustände disabled und readonly.

Verwendungsregeln​

Input Password wird im Anmelde- oder Registrierungsprozess eines Dienstes zur Eingabe des Passwortes genutzt. Verwende Input Password nicht für andere Texteingaben.

Dos und Don’ts​

  • Erläutere in der Hilfe die Regeln und Restriktionen zur Erstellung eines Passwortes im Falle der Registrierung.
  • Die „autocomplete“-Funktion sollte deaktiviert sein.

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