<input type="password">

Das genaue Verhalten des Eingabeprozesses kann von Browser zu Browser unterschiedlich sein. Einige Browser zeigen das getippte Zeichen für einen kurzen Moment an, bevor es verdeckt wird, während andere dem Benutzer erlauben, die Anzeige des Klartexts ein- und auszuschalten. Beide Ansätze helfen einem Benutzer zu überprüfen, ob er das beabsichtigte Passwort eingegeben hat, was besonders auf mobilen Geräten schwierig sein kann.

Das value-Attribut enthält eine Zeichenfolge, deren Wert der aktuelle Inhalt der zur Eingabe des Passworts verwendeten Textbearbeitungskontrolle ist. Wenn der Benutzer noch nichts eingegeben hat, ist dieser Wert eine leere Zeichenkette (""). Wenn die required-Eigenschaft festgelegt ist, muss das Passwort-Eingabefeld einen Wert enthalten, der nicht leer ist, um gültig zu sein.

Wenn das pattern-Attribut angegeben ist, wird der Inhalt einer Passwortkontrolle nur dann als gültig betrachtet, wenn der Wert die Validierung besteht; siehe Validierung für weitere Informationen.

Zusätzlich zu den globalen Attributen und den Attributen, die auf alle <input>-Elemente unabhängig von ihrem Typ wirken, unterstützen Passwort-Feldeinträge die folgenden Attribute.

Die maximale Zeichenlänge (gemessen in UTF-16-Code-Einheiten), die der Benutzer in das Passwortfeld eingeben kann. Dies muss ein ganzzahliger Wert von 0 oder höher sein. Wenn kein maxlength angegeben ist oder ein ungültiger Wert angegeben wird, hat das Passwortfeld keine maximale Länge. Dieser Wert muss auch größer oder gleich dem Wert von minlength sein.

Die Eingabe schlägt bei Constraints-Validierung fehl, wenn die Länge des in das Feld eingegebenen Textes länger als maxlength UTF-16-Code-Einheiten ist. Constraints-Validierung wird nur angewendet, wenn der Wert vom Benutzer geändert wird.

Die minimale Zeichenlänge (gemessen in UTF-16-Code-Einheiten), die der Benutzer in das Passwort-Eingabefeld eingeben kann. Dies muss ein nicht-negativer ganzzahliger Wert sein, der kleiner oder gleich dem durch maxlength angegebenen Wert ist. Wenn kein minlength angegeben ist oder ein ungültiger Wert angegeben wird, hat das Passwortfeld keine Mindestlänge.

Die Eingabe scheitert bei Constraints-Validierung, wenn die Länge des in das Feld eingegebenen Textes kürzer als minlength UTF-16-Code-Einheiten ist. Constraints-Validierung wird nur angewendet, wenn der Wert vom Benutzer geändert wird.

Das pattern-Attribut, wenn angegeben, ist ein regulärer Ausdruck, den der value der Eingabe erfüllen muss, um die Constraints-Validierung zu bestehen. Es muss ein gültiger JavaScript- regulärer Ausdruck sein, wie er vom RegExp-Typ verwendet wird und in unserem Leitfaden zu regulären Ausdrücken dokumentiert ist; das 'u'-Flag wird beim Kompilieren des regulären Ausdrucks festgelegt, so dass das Muster als eine Folge von Unicode-Codepunkten behandelt wird, anstatt als ASCII. Um das Muster herum sollten keine Schrägstriche angegeben werden.

Wenn das angegebene Muster nicht angegeben ist oder ungültig ist, wird kein regulärer Ausdruck angewendet und dieses Attribut vollständig ignoriert.

Der Einsatz eines Musters wird für Passworteingaben dringend empfohlen, um sicherzustellen, dass gültige Passwörter mit einer breiten Auswahl an Zeichenklassen von Ihren Benutzern ausgewählt und verwendet werden. Mit einem Muster können Sie Groß- und Kleinschreibung regeln, die Verwendung einer bestimmten Anzahl von Ziffern und/oder Satzzeichen verlangen und so weiter. Siehe den Abschnitt Validierung für Details und ein Beispiel.

Das placeholder-Attribut ist eine Zeichenkette, die einen kurzen Hinweis darauf gibt, welche Art von Informationen erwartet werden. Es sollte ein Wort oder ein kurzer Satz sein, der den erwarteten Datentyp demonstriert, anstatt eine erklärende Nachricht zu liefern. Der Text darf keine Wagenrückläufe oder Zeilenumbrüche enthalten.

Wenn der Inhalt des Steuerelements eine Richtung hat (LTR oder RTL), der Platzhalter jedoch in der entgegengesetzten Richtung angezeigt werden muss, können Sie Unicode-Bidi-Algorithmus-Formatierungszeichen verwenden, um die Richtung innerhalb des Platzhalters zu überschreiben; siehe Anleitung zur Verwendung von Unicode-Steuerelementen für bidirektionalen Text für weitere Informationen.

Ein boolesches Attribut, das, wenn es vorhanden ist, bedeutet, dass dieses Feld vom Benutzer nicht bearbeitet werden kann. Sein value kann jedoch weiterhin von JavaScript-Code geändert werden, der den Wert der HTMLInputElement.value-Eigenschaft direkt setzt.

Das size-Attribut ist ein numerischer Wert, der angibt, wie viele Zeichen breit das Eingabefeld sein soll. Der Wert muss eine Zahl größer als Null sein, und der Standardwert ist 20. Da Zeichenbreiten variieren, könnte dies ungenau sein und sollte nicht darauf verlassen werden; das resultierende Eingabefeld kann je nach Zeichen und Schriftart (font-Einstellungen, die verwendet werden) schmaler oder breiter als die angegebene Anzahl von Zeichen sein.

Dies setzt keine Begrenzung, wie viele Zeichen der Benutzer in das Feld eingeben kann. Es gibt nur an, wie viele ungefähr gleichzeitig gesehen werden können. Um eine obere Grenze für die Länge der Eingabedaten festzulegen, verwenden Sie das maxlength-Attribut.

Passwort-Eingabefelder funktionieren im Allgemeinen genauso wie andere textuelle Eingabefelder; der Hauptunterschied besteht darin, den Inhalt so zu verdecken, dass Personen in der Nähe des Benutzers das Passwort nicht lesen können.

Hier sehen wir die grundlegendste Passwort-Eingabe mit einem Label, das mithilfe des <label>-Elements erstellt wurde.

<label for="userPassword">Password: </label>
<input id="userPassword" type="password" />

Um dem Passworteingangsmanager des Benutzers zu erlauben, das Passwort automatisch einzugeben, geben Sie das autocomplete-Attribut an. Für Passwörter sollte dies typischerweise einer der folgenden Werte sein:

on

Erlaubt dem Browser oder einem Passwort-Manager, das Passwortfeld automatisch auszufüllen. Dies ist nicht so informativ wie die Verwendung entweder current-password oder new-password.

off

Erlaubt dem Browser oder einem Passwort-Manager nicht, das Passwortfeld automatisch auszufüllen. Beachten Sie, dass einige Software dieses Wert ignoriert, da er typischerweise die Fähigkeit der Nutzer, sichere Passwortpraktiken beizubehalten, beeinträchtigt.

current-password

Erlaubt dem Browser oder einem Passwort-Manager, das aktuelle Passwort für die Website einzugeben. Dies bietet mehr Informationen als on, da es dem Browser oder Passwort-Manager ermöglicht, das momentan bekannte Passwort für die Website automatisch in das Feld einzugeben, es jedoch nicht erlaubt, ein neues vorzuschlagen.

new-password

Erlaubt dem Browser oder einem Passwort-Manager, ein neues Passwort für die Website automatisch zu erzeugen; dies wird auf Passwortänderungs- und New User-Formularen in dem Feld verwendet, in dem der Benutzer nach einem neuen Passwort gefragt wird. Das neue Passwort kann je nach dem verwendeten Passwort-Manager auf verschiedene Weise generiert werden. Es könnte ein neues vorgeschlagenes Passwort ausfüllen oder dem Benutzer eine Schnittstelle zur Erstellung eines solchen anbieten.

<label for="userPassword">Password:</label>
<input id="userPassword" type="password" autocomplete="current-password" />

Um dem Browser des Benutzers mitzuteilen, dass das Passwortfeld einen gültigen Wert haben muss, bevor das Formular abgeschickt werden kann, geben Sie das boolesche required-Attribut an.

<label for="userPassword">Password: </label>
<input id="userPassword" type="password" required />
<input type="submit" value="Submit" />

Wenn Ihre empfohlenen (oder erforderlichen) Passwortsyntax-Regeln von einer alternativen Texteingabeschnittstelle als der Standardtastatur profitieren würden, können Sie das inputmode-Attribut verwenden, um eine bestimmte anzufordern. Der offensichtlichste Anwendungsfall hierfür ist, wenn das Passwort numerisch sein muss (z. B. eine PIN). Mobile Geräte mit virtuellen Tastaturen könnten zum Beispiel auf ein numerisches Tastaturdesign anstelle einer vollständigen Tastatur umschalten, um das Eingeben des Passworts zu erleichtern. Wenn die PIN für die einmalige Verwendung gedacht ist, setzen Sie das autocomplete-Attribut entweder auf off oder one-time-code, um vorzuschlagen, dass es nicht gespeichert wird.

<label for="pin">PIN: </label>
<input id="pin" type="password" inputmode="numeric" />

Wie üblich können Sie die minlength- und maxlength-Attribute verwenden, um die minimal und maximal akzeptablen Längen für das Passwort festzulegen. Dieses Beispiel erweitert das vorherige, indem es festlegt, dass die PIN des Benutzers mindestens vier und höchstens acht Ziffern lang sein muss. Das size-Attribut wird verwendet, um sicherzustellen, dass die Passwort-Eingabesteuerung acht Zeichen breit ist.

<label for="pin">PIN:</label>
<input
  id="pin"
  type="password"
  inputmode="numeric"
  minlength="4"
  maxlength="8"
  size="8" />

Wie bei anderen textuellen Eingabesteuerungen können Sie die select()-Methode verwenden, um den gesamten Text im Passwortfeld auszuwählen.

HTML

<label for="userPassword">Password: </label>
<input id="userPassword" type="password" size="12" />
<button id="selectAll">Select All</button>

JavaScript

document.getElementById("selectAll").onclick = () => {
  document.getElementById("userPassword").select();
};

Ergebnis

Sie können auch selectionStart und selectionEnd verwenden, um (oder setzen) den aktuell ausgewählten Bereich von Zeichen in der Kontrolle zu erhalten, sowie selectionDirection, um zu wissen, in welche Richtung die Auswahl stattgefunden hat (oder erweitert wird, abhängig von Ihrer Plattform; siehe dessen Dokumentation für eine Erklärung). Allerdings ist der Nutzen dieser Funktionen angesichts des verschleierten Textes etwas eingeschränkt.

Wenn Ihre Anwendung Zeichensatzbeschränkungen oder andere Anforderungen an den tatsächlichen Inhalt des eingegebenen Passworts hat, können Sie das pattern-Attribut verwenden, um einen regulären Ausdruck festzulegen, der verwendet wird, um automatisch sicherzustellen, dass Ihre Passwörter diese Anforderungen erfüllen.

In diesem Beispiel sind nur Werte mit mindestens vier und höchstens acht hexadezimalen Ziffern gültig.

<label for="hexId">Hex ID: </label>
<input
  id="hexId"
  type="password"
  pattern="[0-9a-fA-F]{4,8}"
  title="Enter an ID consisting of 4-8 hexadecimal digits"
  autocomplete="new-password" />

Dieses Beispiel akzeptiert nur Eingaben, die dem Format für eine gültige Sozialversicherungsnummer der Vereinigten Staaten entsprechen. Diese Nummern, die in den USA zu Steuer- und Identifikationszwecken verwendet werden, haben das Format "123-45-6789". Es gibt verschiedene Regeln darüber, welche Werte in jeder Gruppe erlaubt sind.

HTML

<label for="ssn">SSN:</label>
<input
  type="password"
  id="ssn"
  inputmode="numeric"
  minlength="9"
  maxlength="12"
  pattern="(?!000)([0-6]\d{2}|7([0-6]\d|7[012]))([ -])?(?!00)\d\d\3(?!0000)\d{4}"
  required
  autocomplete="off" />
<br />
<label for="ssn">Value:</label>
<span id="current"></span>

Dieses Beispiel verwendet ein pattern, das den eingegebenen Wert auf Zeichenfolgen beschränkt, die gesetzliche Sozialversicherungsnummern darstellen. Natürlich garantiert dieser reguläre Ausdruck keine gültige SSN (da wir keinen Zugang zur Datenbank der Sozialversicherungsverwaltung haben), stellt jedoch sicher, dass die Nummer eine sein könnte; er vermeidet generell Werte, die nicht gültig sein können. Darüber hinaus erlaubt er, dass die drei Gruppen von Ziffern durch ein Leerzeichen, einen Bindestrich ("-") oder nichts getrennt werden.

Der inputmode ist auf numeric gesetzt, um Geräte mit virtuellen Tastaturen zu ermutigen, auf ein numerisches Tastaturlayout zur einfacheren Eingabe zu wechseln. Die minlength- und maxlength-Attribute sind auf 9 bzw. 12 gesetzt, um sicherzustellen, dass der Wert mindestens neun und höchstens 12 Zeichen lang ist (zuerst ohne Trennzeichen zwischen den Gruppen von Ziffern und letzteres mit ihnen). Das required-Attribut wird verwendet, um anzugeben, dass diese Kontrolle einen Wert haben muss. Schließlich ist autocomplete auf off gesetzt, um zu verhindern, dass Passwort-Manager und Sitzungswiederherstellungsfunktionen versuchen, seinen Wert zu setzen, da dies gar kein Passwort ist.

JavaScript

Das JavaScript zeigt die eingegebene SSN auf dem Bildschirm an, damit Sie sie sehen können. Dies unterminiert den Zweck eines Passwortfelds, hilft jedoch, das pattern auszuprobieren.

const ssn = document.getElementById("ssn");
const current = document.getElementById("current");

ssn.oninput = (event) => {
  current.textContent = ssn.value;
};

Ergebnis