<input>-Elemente vom Typpassword bieten eine Möglichkeit, für den Benutzer ein Passwort sicher einzugeben.

Das Element wird als einzeilige einfache Texteditor-Steuerung angezeigt, in der der Text verdeckt wird, sodass er nicht lesbar ist, in der Regel durch Ersetzen jedes Zeichens durch ein Symbol wie das Sternchen ("*") oder einen Punkt ("•"). Dieses Zeichen variiert je nachBenutzeragent und Betriebssystem.

Probieren Sie es aus

<div>  <label for="username">Username:</label>  <input type="text" name="username" /></div><div>  <label for="pass">Password (8 characters minimum):</label>  <input type="password" name="password" minlength="8" required /></div><input type="submit" value="Sign in" />

label {  display: block;}input[type="submit"],label {  margin-top: 1rem;}

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

Wert

Dasvalue-Attribut enthält einen String, dessen Wert der aktuelle Inhalt des zum Eingeben des Passworts verwendeten Texteingabebereichs ist. Wenn der Benutzer noch nichts eingegeben hat, ist dieser Wert eine leere Zeichenkette (""). Wenn dierequired-Eigenschaft angegeben ist, muss das Passwortfeld einen anderen Wert als eine leere Zeichenkette enthalten, um gültig zu sein.

Wenn daspattern-Attribut angegeben ist, wird der Inhalt einespassword-Feldes nur als gültig betrachtet, wenn der Wert die Validierung besteht; sieheValidierung für weitere Informationen.

Zusätzliche Attribute

Zusätzlich zu denglobalen Attributen und den Attributen, die auf alle<input>-Elemente unabhängig von ihrem Typ anwendbar sind, unterstützen Passwort-Feld-Eingaben die folgenden Attribute.

maxlength

Die maximale Zeichenfolgenlänge (gemessen inUTF-16-Codeeinheiten), die der Benutzer in das Passwortfeld eingeben kann. Dies muss ein ganzzahliger Wert von 0 oder höher sein. Wenn keinmaxlength 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 vonminlength sein.

Die Eingabe wird dieConstraint-Validierung nicht bestehen, wenn die Länge des in das Feld eingegebenen Textes größer alsmaxlengthUTF-16-Codeeinheiten ist. Constraint-Validierung wird nur angewendet, wenn der Wert vom Benutzer geändert wird.

minlength

Die minimale Zeichenfolgenlänge (gemessen inUTF-16-Codeeinheiten), die der Benutzer in das Passwort-Eingabefeld eingeben kann. Dies muss ein nicht-negativer ganzzahliger Wert sein, der kleiner oder gleich dem vonmaxlength angegebenen Wert ist. Wenn keinminlength angegeben ist oder ein ungültiger Wert angegeben wird, hat die Passwort-Eingabe keine Mindestlänge.

Die Eingabe wird dieConstraint-Validierung nicht bestehen, wenn die Länge des in das Feld eingegebenen Textes kleiner alsminlengthUTF-16-Codeeinheiten ist. Constraint-Validierung wird nur angewendet, wenn der Wert vom Benutzer geändert wird.

pattern

Daspattern-Attribut ist, wenn angegeben, ein regulärer Ausdruck, den dervalue der Eingabe erfüllen muss, um dieConstraint-Validierung zu bestehen. Es muss ein gültiger regulärer JavaScript-Ausdruck sein, wie er durch denRegExp-Typ verwendet wird und wie er in unseremLeitfaden zu regulären Ausdrücken dokumentiert ist; das'u'-Flag wird beim Kompilieren des regulären Ausdrucks angegeben, sodass das Muster als eine Reihe von Unicode-Codepunkten behandelt wird, anstatt alsASCII. Es dürfen keine Schrägstriche um den Mustertext angegeben werden.

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

Die Verwendung eines Musters wird für Passwort-Eingaben dringend empfohlen, um sicherzustellen, dass gültige Passwörter mit einer Vielzahl von Zeichenklassen von Ihren Benutzern ausgewählt und verwendet werden. Mit einem Muster können Sie Regeln für Groß- und Kleinschreibung vorschreiben, die Verwendung einer bestimmten Anzahl von Ziffern und/oder Satzzeichen fordern und so weiter. Siehe den AbschnittValidierung für Details und ein Beispiel.

placeholder

Dasplaceholder-Attribut ist ein String, der dem Benutzer einen kurzen Hinweis darauf gibt, welche Art von Informationen im Feld erwartet werden. Es sollte ein Wort oder eine kurze Phrase sein, die die erwartete Art von Daten veranschaulicht, anstatt eine erklärende Nachricht zu sein. Der Textdarf keine Wagenrücklauf- oder Zeilenumbruchzeichen enthalten.

Wenn der Inhalt der Steuerung eine Richtung (LTR oderRTL) hat, aber der Platzhalter in der entgegengesetzten Richtung angezeigt werden muss, können Sie Unicode-Bidirektional-Algorithmus-Formatierungszeichen verwenden, um die Richtung im Platzhalter zu überschreiben; sieheWie man Unicode-Steuerungen für bidi-Text verwendet für weitere Informationen.

readonly

Ein Boolesches Attribut, das, wenn es vorhanden ist, bedeutet, dass dieses Feld nicht vom Benutzer bearbeitet werden kann. SeinWert kann jedoch immer noch durch JavaScript-Code, der den Wert derHTMLInputElement.value-Eigenschaft direkt setzt, geändert werden.

size

Dassize-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, kann dies genau zutreffen oder nicht und sollte nicht als genau angenommen werden; die resultierende Eingabe kann je nach Zeichen und dem verwendeten Schriftart-(font)-Einstellungen schmaler oder breiter als die angegebene Anzahl von Zeichen sein.

Dies setztnicht eine Grenze dafür, wie viele Zeichen der Benutzer in das Feld eingeben kann. Es legt nur ungefähr fest, wie viele gleichzeitig sichtbar sein können. Um eine Obergrenze für die Länge der Eingabedaten festzulegen, verwenden Sie dasmaxlength-Attribut.

Verwendung von Passwort-Eingaben

Passwort-Eingabeboxen funktionieren im Allgemeinen genauso wie andere Text-Eingabeboxen; der Hauptunterschied besteht darin, dass der Beitrag verdeckt wird, um zu verhindern, dass Personen in der Nähe des Benutzers das Passwort lesen.

Eine grundlegende Passwort-Eingabe

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

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

Automatisches Ausfüllen ermöglichen

Um dem Passwort-Manager des Benutzers zu ermöglichen, das Passwort automatisch einzugeben, geben Sie dasautocomplete-Attribut an. Für Passwörter sollte dies in der Regel einer der folgenden Werte sein:

on

Zulassen, dass der Browser oder ein Passwort-Manager das Passwortfeld automatisch ausfüllt. Dies ist nicht so informativ wie die Verwendung von entwedercurrent-password odernew-password.

off

Nicht zulassen, dass der Browser oder ein Passwort-Manager das Passwortfeld automatisch ausfüllt. Beachten Sie, dass einige Software dies ignoriert, da es in der Regel schädlich für die Fähigkeit der Benutzersicherheit im Umgang mit sicheren Passwortpraktiken ist.

current-password

Zulassen, dass der Browser oder ein Passwort-Manager das aktuelle Passwort für die Seite eingibt. Dies bietet mehr Informationen alson, da es dem Browser oder Passwort-Manager ermöglicht, das derzeit bekannte Passwort für die Seite im Feld automatisch einzugeben, aber nicht, um ein neues vorzuschlagen.

new-password

Zulassen, dass der Browser oder Passwort-Manager ein neues Passwort für die Seite automatisch eingibt; dies wird auf "Ändern Sie Ihr Passwort" und "Neuer Benutzer"-Formularen verwendet, im Feld, in dem der Benutzer nach einem neuen Passwort gefragt wird. Das neue Passwort kann je nach verwendetem Passwort-Manager auf verschiedene Weisen generiert werden. Es kann ein neues vorgeschlagenes Passwort einfügen oder dem Benutzer eine Schnittstelle zur Erstellung eines neuen anzeigen.

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

Das Passwort zwingend erforderlich machen

Um dem Browser des Benutzers mitzuteilen, dass das Passwortfeld einen gültigen Wert haben muss, bevor das Formular gesendet werden kann, geben Sie das Boolesche Attributrequired an.

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

Einen Eingabemodus angeben

Wenn Ihre empfohlenen (oder erforderlichen) Passwort-Syntaxregeln von einem anderen Texteintragsinterface als dem Standardtastatur profitieren würden, können Sie dasinputmode-Attribut verwenden, um eine spezifische anzufordern. Der offensichtlichste Anwendungsfall hierfür ist, wenn das Passwort numerisch sein muss (wie ein PIN). Mobile Geräte mit virtuellen Tastaturen können beispielsweise zu einem Ziffernblocklayout wechseln, anstelle einer vollständigen Tastatur, um das Passwort leichter einzugeben. Wenn der PIN nur einmal verwendet werden soll, stellen Sie dasautocomplete-Attribut auf entwederoff oderone-time-code ein, um anzugeben, dass es nicht gespeichert werden soll.

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

Längenanforderungen festlegen

Wie gewohnt können Sie dieminlength- undmaxlength-Attribute verwenden, um Mindest- und Höchstlängen für das Passwort festzulegen. Dieses Beispiel baut auf dem vorherigen auf, indem es festlegt, dass der PIN des Benutzers mindestens vier und höchstens acht Ziffern lang sein muss. Dassize-Attribut wird verwendet, um sicherzustellen, dass das Passwort-Eingabekontrollfenster acht Zeichen breit ist.

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

Text auswählen

Wie bei anderen Texteingabesteuerungen können Sie dieselect()-Methode verwenden, um den gesamten Text im Passwortfeld auszuwählen.

HTML

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

JavaScript

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

Ergebnis

Sie können auchselectionStart undselectionEnd verwenden, um den Bereich von Zeichen im Steuerelement zu erhalten (oder festzulegen), der derzeit ausgewählt ist, undselectionDirection, um zu wissen, in welche Richtung die Auswahl erfolgt ist (oder sich erweitern wird, abhängig von Ihrer Plattform; siehe die Dokumentation für eine Erklärung). Angesichts der Tatsache, dass der Text verdeckt ist, ist die Nützlichkeit dieser Funktionen jedoch etwas begrenzt.

Validierung

Wenn Ihre Anwendung Zeichensatzbeschränkungen oder andere Anforderungen an den tatsächlichen Inhalt des eingegebenen Passworts hat, können Sie daspattern-Attribut verwenden, um einen regulären Ausdruck festzulegen, der automatisch sicherstellt, dass Ihre Passwörter diesen Anforderungen entsprechen.

In diesem Beispiel sind nur Werte gültig, die mindestens vier und höchstens acht hexadezimale Ziffern enthalten.

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

Beispiele

Anfordern einer Sozialversicherungsnummer

Dieses Beispiel akzeptiert nur Eingaben, die dem Format für einegültige Sozialversicherungsnummer der Vereinigten Staaten entsprechen. Diese Nummern, die in den USA für Steuer- und Identifikationszwecke verwendet werden, haben die Form "123-45-6789". Es gibt auch verschiedene Regeln, welche Werte in jeder Gruppe zulässig sind.

HTML

<label for="ssn">SSN:</label><input  type="password"   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></span>

Dies verwendet einpattern, das den eingegebenen Wert auf Zeichenfolgen beschränkt, die rechtmäßige Sozialversicherungsnummern darstellen. Natürlich garantiert dieser reguläre Ausdruck keine gültige SSN (da wir keinen Zugang zur Datenbank der Sozialversicherungsverwaltung haben), aber es wird sichergestellt, dass die Nummer eine sein könnte; es vermeidet im Allgemeinen Werte, die nicht gültig sein können. Außerdem erlaubt es, dass die drei Zifferngruppen durch Leerzeichen, Bindestriche ("-") oder nichts getrennt werden.

Dasinputmode ist aufnumeric gesetzt, um Geräte mit virtuellen Tastaturen dazu zu ermuntern, zu einem numerischen Tastaturlayout zu wechseln, um die Eingabe zu erleichtern. Dieminlength- undmaxlength-Attribute sind auf 9 und 12 gesetzt, bzw., um zu verlangen, dass der Wert mindestens neun und höchstens zwölf Zeichen lang ist (das erste ohne Trennzeichen zwischen den Zifferngruppen und das letzte mit ihnen). Dasrequired-Attribut wird verwendet, um anzuzeigen, dass dieses Steuerungsfeld einen Wert haben muss. Schließlich wirdautocomplete aufoff gesetzt, um zu verhindern, dass Passwort-Manager und Sitzungswiederherstellungsfunktionen versuchen, seinen Wert einzustellen, da es sich hierbei überhaupt nicht um ein Passwort handelt.

JavaScript

Das JavaScript zeigt die eingegebene SSN auf dem Bildschirm an, sodass Sie sie sehen können. Dies negiert den Zweck eines Passwortfeldes, hilft jedoch dabei, mit dempattern zu experimentieren.

const ssn = document.getElementById("ssn");const current = document.getElementById("current");ssn.oninput = (event) => {  current.textContent = ssn.value;};

Ergebnis

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität