<input type="password">

Das genaue Verhalten des Eingabeprozesses kann von Browser zu Browser unterschiedlich sein. Einige Browser zeigen das getippte Zeichen einen Moment lang an, bevor es verschleiert wird, während andere es dem Benutzer ermöglichen, die Anzeige von Klartext ein- und auszuschalten. Beide Ansätze helfen einem Benutzer, zu überprüfen, ob das beabsichtigte Passwort eingegeben wurde, was besonders auf mobilen Geräten schwierig sein kann.

Das value-Attribut enthält eine Zeichenfolge, deren Wert den aktuellen Inhalt des Textbearbeitungs-Steuerelements darstellt, das zur Eingabe des Passworts verwendet wird. Wenn der Benutzer noch nichts eingegeben hat, ist dieser Wert eine leere Zeichenfolge (""). Wenn die required-Eigenschaft angegeben ist, muss die Passwort-Bearbeitungsbox einen anderen Wert als eine leere Zeichenfolge enthalten, um gültig zu sein.

Wenn das pattern-Attribut angegeben ist, wird der Inhalt eines password-Steuerelements nur dann als gültig angesehen, 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 Passworteingabefelder 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 der Einschränkungsvalidierung fehl, wenn die Länge des in das Feld eingegebenen Textes mehr als maxlength UTF-16 Code-Einheiten beträgt. Die Einschränkungsvalidierung 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 Passworteingabefeld keine Mindestlänge.

Die Eingabe schlägt bei der Einschränkungsvalidierung fehl, wenn die Länge des in das Feld eingegebenen Textes weniger als minlength UTF-16 Code-Einheiten beträgt. Die Einschränkungsvalidierung wird nur angewendet, wenn der Wert vom Benutzer geändert wird.

Das pattern-Attribut, wenn es angegeben ist, ist ein regulärer Ausdruck, den der value-Wert der Eingabe erfüllen muss, um die Einschränkungsvalidierung zu bestehen. Es muss ein gültiger JavaScript-Regulärer Ausdruck sein, wie er vom RegExp-Typ verwendet wird und wie in unserem Leitfaden zu regulären Ausdrücken dokumentiert; das 'u'-Flag wird beim Kompilieren des regulären Ausdrucks angegeben, sodass das Muster als Sequenz von Unicode-Codepunkten behandelt wird, anstatt als ASCII. Es sollten 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 Passworteingaben dringend empfohlen, um sicherzustellen, dass gültige Passwörter mit einer großen Vielfalt an Zeichenklassen von Ihren Benutzern ausgewählt und verwendet werden. Mit einem Muster können Sie Groß-/Kleinschreibungsregeln vorschreiben, die Verwendung einer bestimmten Anzahl von Ziffern und/oder Satzzeichen erfordern und so weiter. Weitere Informationen und ein Beispiel finden Sie im Abschnitt Validierung.

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

Wenn der Inhalt des Steuerelements eine Richtung (LTR oder RTL) hat, aber der Platzhalter in der entgegengesetzten Richtung dargestellt werden muss, können Sie Formatierungszeichen des Unicode-Bidirektionalen-Algorithmus verwenden, um die Richtung innerhalb des Platzhalters zu überschreiben; siehe Wie man Unicode-Kontrollen für bidi-Text verwendet für weitere Informationen.

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

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 sich die Zeichenbreiten unterscheiden, kann dies mehr oder weniger genau sein und sollte nicht darauf vertraut werden; das resultierende Eingabefeld kann schmaler oder breiter sein als die angegebene Anzahl von Zeichen, abhängig von den Zeichen und der Schriftart (font-Einstellungen in Verwendung).

Dieses setzt keine Begrenzung darauf, wie viele Zeichen der Benutzer in das Feld eingeben kann. Es gibt nur an, wie viele ungefähr auf einmal sichtbar sein können. Um eine obere Grenze für die Eingabedatenlänge zu setzen, verwenden Sie das maxlength-Attribut.

Passwort-Eingabefelder funktionieren im Allgemeinen wie andere Texteingabefelder; der Hauptunterschied ist die Verschleierung des Inhalts, um zu verhindern, dass Personen in der Nähe des Benutzers das Passwort lesen können.

Hier sehen wir die grundlegendste Passworteingabe, mit einem Label, das mit dem <label>-Element erstellt wurde.

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

Um dem Passwort-Manager des Benutzers zu ermöglichen, das Passwort automatisch einzugeben, spezifizieren Sie das autocomplete-Attribut. Für Passwörter sollte dies typischerweise eines der folgenden sein:

on

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

off

Verhindern, dass der Browser oder Passwort-Manager das Passwortfeld automatisch ausfüllt. Beachten Sie, dass einige Software diesen Wert ignoriert, da er typischerweise die Fähigkeit der Benutzer beeinträchtigt, sichere Passwortpraktiken zu befolgen.

current-password

Erlaubt dem Browser oder Passwort-Manager, das aktuelle Passwort für die Seite einzugeben. Dies bietet mehr Informationen als on, da es dem Browser oder Passwort-Manager erlaubt, das derzeit bekannte Passwort für die Seite automatisch in das Feld einzugeben, jedoch kein neues vorzuschlagen.

new-password

Erlaubt dem Browser oder Passwort-Manager, ein neues Passwort für die Seite automatisch einzugeben; dies wird in Passwörter-Ändern- und Neue-Benutzer-Formularen verwendet, im Feld, das den Benutzer um ein neues Passwort bittet. Das neue Passwort kann auf verschiedene Weise generiert werden, abhängig vom verwendeten Passwort-Manager. Es kann ein neues vorgeschlagenes Passwort ausfüllen oder dem Benutzer eine Schnittstelle zum Erstellen eines solchen zeigen.

<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 gesendet werden kann, spezifizieren Sie das Boolean-Attribut required.

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

Falls Ihre empfohlenen (oder vorgeschriebenen) Passwort-Syntaxregeln von einer anderen Texteingabeschnittstelle als der Standard-Tastatur profitieren würden, können Sie das inputmode-Attribut verwenden, um eine spezifische anzufordern. Der offensichtlichste Anwendungsfall dafür ist, wenn das Passwort numerisch sein muss (z.B. eine PIN). Mobile Geräte mit virtuellen Tastaturen könnten beispielsweise dazu übergehen, ein numerisches Tastenfeld-Layout anstelle einer vollständigen Tastatur anzuzeigen, um das Eingeben des Passworts zu erleichtern. Wenn die PIN für den einmaligen Gebrauch bestimmt ist, setzen Sie das autocomplete-Attribut auf off oder one-time-code, um zu suggerieren, dass es nicht gespeichert wird.

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

Wie gewöhnlich können Sie die Attribute minlength und maxlength verwenden, um minimale und maximale zulässige Längen für das Passwort festzulegen. Dieses Beispiel erweitert das vorherige, indem es spezifiziert, dass die Benutzer-PIN mindestens vier und nicht mehr als acht Ziffern lang sein muss. Das size-Attribut wird verwendet, um sicherzustellen, dass die Passwort-Eingabehülle 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 Texteingabesteuerelementen können Sie die Methode select() verwenden, um den gesamten Text im Passworteingabefeld 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 herauszufinden (oder festzulegen), welcher Bereich von Zeichen im Steuerelement derzeit ausgewählt ist, und selectionDirection, um zu wissen, in welche Richtung die Auswahl erfolgt ist (oder erweitert wird, abhängig von Ihrer Plattform; siehe die Dokumentation für eine Erklärung). Da jedoch der Text verschleiert wird, ist der Nutzen hiervon etwas begrenzt.

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, die aus mindestens vier und nicht mehr als acht hexadezimalen Ziffern bestehen, 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 einer gültigen US-amerikanischen Sozialversicherungsnummer entsprechen. Diese Nummern, die in den USA für Steuer- und Identifikationszwecke verwendet werden, haben die Form "123-45-6789". Es gibt verschiedene Regeln, 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>

Dies verwendet ein pattern, das den eingegebenen Wert auf Zeichenfolgen beschränkt, die gültige Sozialversicherungsnummern darstellen. Offensichtlich garantiert dieser reguläre Ausdruck keine gültige SSN (da wir keinen Zugriff auf die Datenbank der Sozialversicherungsverwaltung haben), aber er stellt sicher, dass die Nummer eine sein könnte; er vermeidet im Allgemeinen 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.

Das inputmode ist auf numeric gesetzt, um Geräte mit virtuellen Tastaturen zu ermutigen, zu einem numerischen Tastenfeld-Layout für eine einfachere Eingabe zu wechseln. Die Attribute minlength und maxlength sind auf 9 bzw. 12 gesetzt, um zu fordern, dass der Wert mindestens neun und nicht mehr als 12 Zeichen beträgt (der erstgenannte ohne Trennzeichen zwischen den Gruppen von Ziffern und der letztgenannte mit diesen). Das Attribut required wird verwendet, um anzugeben, dass dieses Steuerelement einen Wert haben muss. Schließlich ist das Attribut autocomplete auf off gesetzt, um zu verhindern, dass Passwort-Manager und Sitzungswiederherstellungsfunktionen versuchen, seinen Wert zu setzen, da dies überhaupt kein Passwort ist.

JavaScript

Das JavaScript zeigt die eingegebene Sozialversicherungsnummer auf dem Bildschirm an, damit Sie sie sehen können. Dies widerspricht der Zweckbestimmung eines Passwortfeldes, hilft jedoch beim Experimentieren mit dem pattern.

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

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

Ergebnis

• Kompatibilität von CSS-Eigenschaften