<input type="password">

Das genaue Verhalten des Eingabeprozesses kann je nach Browser variieren. Einige Browser zeigen das eingegebene Zeichen kurz an, bevor es es maskiert, während andere dem Benutzer ermöglichen, die Anzeige von Klartext ein- und auszuschalten. Beide Ansätze helfen dem Benutzer dabei, sicherzustellen, dass er das beabsichtigte Passwort eingegeben hat, was insbesondere auf mobilen Geräten schwierig sein kann.

Das value-Attribut enthält einen String, dessen Wert der aktuelle Inhalt des zum Eingeben des Passworts verwendeten Textbearbeitungselements ist. Hat der Benutzer noch nichts eingegeben, ist dieser Wert ein leerer String (""). Wenn die required-Eigenschaft angegeben ist, muss das Passwort-Eingabefeld einen anderen Wert als einen leeren String enthalten, um gültig zu sein.

Wenn das pattern-Attribut angegeben ist, wird der Inhalt eines password-Feldes 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 angewendet werden, unterstützen Passwort-Felder die folgenden Attribute.

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

Die Eingabe wird die Constraint-Validierung nicht bestehen, wenn die Länge des in das Feld eingegebenen Textes länger ist als maxlength UTF-16-Codeeinheiten. Die Constraint-Validierung wird nur angewendet, wenn der Wert durch den Benutzer geändert wird.

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

Die Eingabe wird die Constraint-Validierung nicht bestehen, wenn die Länge des in das Feld eingegebenen Textes weniger als minlength UTF-16-Codeeinheiten beträgt. Die Constraint-Validierung wird nur angewendet, wenn der Wert durch den Benutzer verändert wird.

Beim angegebenen pattern-Attribut handelt es sich um einen regulären Ausdruck, gegen den der value des Inputs bestehen muss, um die Constraint-Validierung zu bestehen. Es muss ein gültiger regulärer JavaScript-Ausdruck sein, wie er vom RegExp-Typ verwendet wird und in unserem Leitfaden über reguläre Ausdrücke dokumentiert ist; das 'u'-Flag wird beim Kompilieren des regulären Ausdrucks spezifiziert, damit das Muster als Folge von Unicode-Codepunkten anstelle von ASCII behandelt wird. Es sollte keine Schrägstriche um den Mustertest herum angegeben werden.

Wenn das angegebene Muster nicht angegeben wird 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 Zeichensatzklassen ausgewählt und verwendet werden. Mit einem Muster können Sie Regeln für Groß- und Kleinschreibung festlegen, die Verwendung einer bestimmten Anzahl von Ziffern und/oder Satzzeichen erzwingen usw. Weitere Details und ein Beispiel finden Sie im Abschnitt Validierung.

Das placeholder-Attribut ist ein String, der dem Benutzer einen kurzen Hinweis darauf gibt, welche Art von Informationen in dem Feld erwartet werden. Es sollte ein Wort oder eine kurze Phrase sein, die den erwarteten Typ der Daten demonstriert, 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, der Platzhalter jedoch in der entgegengesetzten Richtung dargestellt werden muss, können Sie Unicode-Bidirektionale-Algorithmus-Formatierungszeichen verwenden, um die Richtungen innerhalb des Platzhalters zu überschreiben; siehe Anleitung zur Verwendung von Unicode-Bidi-Steuerelementen für weitere Informationen.

Ein Boolean-Attribut, das, wenn es vorhanden ist, bedeutet, dass dieses Feld vom Benutzer nicht bearbeitet werden kann. Sein value kann jedoch immer noch von JavaScript-Code geändert werden, der direkt den Wert der HTMLInputElement.value-Eigenschaft 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, kann dies mehr oder weniger genau sein und sollte nicht darauf verlassen werden, dass es so ist; das resultierende Eingabe kann schmaler oder breiter sein als die angegebene Anzahl von Zeichen, abhängig von den Zeichen und den verwendeten Schriftart-( font) Einstellungen.

Dies setzt kein Limit für die Anzahl Zeichen, die der Benutzer in das Feld eingeben kann. Es spezifiziert nur ungefähr, wie viele gleichzeitig sichtbar sein können. Um eine Obergrenze für die Länge der Eingabedaten festzulegen, verwenden Sie das maxlength-Attribut.

Passwort-Eingabefelder funktionieren im Allgemeinen genauso wie andere Text-Eingabefelder; der Hauptunterschied besteht in der Maskierung des Inhalts, um zu verhindern, dass Personen in der Nähe des Benutzers das Passwort lesen.

Hier sehen wir die grundlegendste Passwort-Eingabe 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 erlauben, das Passwort automatisch einzugeben, geben Sie das autocomplete-Attribut an. Für Passwörter sollte dies in der Regel einer der folgenden Werte sein:

on

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

off

Erlauben Sie nicht, dass der Browser oder Passwort-Manager das Passwortfeld automatisch ausfüllt. Beachten Sie, dass einige Software diesen Wert ignoriert, da er im Allgemeinen die Fähigkeiten der Benutzer beeinträchtigt, sichere Passwortpraktiken aufrechtzuerhalten.

current-password

Erlauben Sie 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 ermöglicht, das aktuell bekannte Passwort für die Seite automatisch im Feld einzugeben, jedoch nicht ein neues vorzuschlagen.

new-password

Erlauben Sie dem Browser oder Passwort-Manager, ein neues Passwort für die Seite automatisch einzugeben; dies wird auf „Passwort ändern“- und „Neuer Benutzer“-Formularen im Feld verwendet, in dem der Benutzer nach einem neuen Passwort gefragt wird. Das neue Passwort kann auf verschiedene Arten generiert werden, abhängig vom verwendeten Passwort-Manager. Es kann ein neues vorgeschlagenes Passwort ausgefüllt werden, oder es könnte dem Benutzer eine Schnittstelle zum Erstellen eines angeboten werden.

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

Um dem Browser des Benutzers mitzuteilen, dass das Passwortfeld vor dem Absenden des Formulars einen gültigen Wert haben muss, geben Sie das Boolean-Attribut required an.

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

Wenn die empfohlenen (oder erforderlichen) Passwort-Syntaxregeln von einer alternativen Texteingabeschnittstelle als der Standardtastatur profitieren würden, können Sie das inputmode-Attribut verwenden, um eine spezielle anzufordern. Der offensichtlichste Anwendungsfall hierfür ist, wenn das Passwort numerisch (wie eine PIN) sein muss. Zum Beispiel können mobile Geräte mit virtuellen Tastaturen dafür entscheiden, zu einem numerischen Tastaturlayout anstelle einer vollständigen Tastatur zu wechseln, um die Passworteingabe zu erleichtern. Wenn die PIN für den einmaligen Gebrauch ist, setzen Sie das autocomplete-Attribut auf entweder 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 gewöhnlich können Sie die minlength- und maxlength-Attribute verwenden, um minimale und maximale akzeptable Längen für das Passwort festzulegen. Dieses Beispiel erweitert das vorherige, indem spezifiziert wird, dass die PIN des Benutzers mindestens vier und maximal acht Ziffern lang sein muss. Das size-Attribut wird verwendet, um sicherzustellen, dass das Passwort-Eingabefeld 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 Eingabesteuerelementen 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 den aktuellen Bereich der im Steuerelement ausgewählten Zeichen zu erhalten (oder zu setzen), und selectionDirection, um zu wissen, in welche Richtung die Auswahl erfolgt ist (oder erweitert wird, abhängig von Ihrer Plattform; siehe deren Dokumentation für eine Erklärung). Da der Text jedoch maskiert ist, ist der Nutzen dieser Funktionen 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 werden soll, um automatisch sicherzustellen, dass Ihre Passwörter diese Anforderungen erfüllen.

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

<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 Zahlen, die in den USA für Steuer- und Identifikationszwecke verwendet werden, haben die Form „123-45-6789“. Es gibt verschiedene Regeln dafür, welche Werte in jeder Gruppe zulässig 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 Strings limitiert, die rechtlich gültige Sozialversicherungsnummern darstellen. Offensichtlich garantiert dieses Regexp keine gültige SSN (da wir keinen Zugang zur Datenbank der Sozialversicherungsbehörde haben), aber es stellt sicher, dass die Nummer eine sein könnte; es vermeidet im Allgemeinen Werte, die nicht gültig sein können. Darüber hinaus erlaubt es, dass die drei Gruppen von Ziffern durch ein Leerzeichen, einen Bindestrich („-“) oder durch nichts getrennt werden.

Das inputmode ist auf numeric gesetzt, um Geräten mit virtuellen Tastaturen zu empfehlen, zu einem numerischen Tastenfeld zu wechseln, um die Eingabe zu erleichtern. Die minlength und maxlength Attribute sind auf 9 bzw. 12 gesetzt, um zu verlangen, dass der Wert mindestens neun und maximal 12 Zeichen lang ist (erstere ohne Trennzeichen zwischen den Zifferngruppen und letztere mit ihnen). Das required-Attribut wird verwendet, um anzuzeigen, dass dieses Feld einen Wert haben muss. Schließlich ist autocomplete auf off gesetzt, um zu vermeiden, dass Passwort-Manager und die Sitzungswiederherstellungsfunktionen versuchen, seinen Wert zu setzen, da dies überhaupt kein Passwort ist.

JavaScript

Dies ist nur ein einfacher Code, um die eingegebene SSN auf dem Bildschirm anzuzeigen, damit Sie sie sehen können. Natürlich widerspricht dies dem Zweck eines Passwortfeldes, aber es ist hilfreich, um mit dem pattern zu experimentieren.

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

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

Ergebnis

• Kompatibilität von CSS-Eigenschaften