<input type="password">

<div>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" />
</div>

<div>
  <label for="pass">Password (8 characters minimum):</label>
  <input type="password" id="pass" 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 für einen Moment das eingegebene Zeichen an, bevor es unkenntlich gemacht wird, während andere dem Benutzer erlauben, die Anzeige von Klartext 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 einen String, dessen Wert der aktuelle Inhalt des Textbearbeitungsfeldes ist, das zum Eingeben des Passworts verwendet wird. Wenn der Benutzer noch nichts eingegeben hat, 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-Steuerelements nur 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 für alle <input>-Elemente unabhängig von ihrem Typ gelten, unterstützen Passwort-Feld-Eingaben die folgenden Attribute.

Die maximale Zeichenanzahl (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 keine maxlength angegeben oder ein ungültiger Wert angegeben ist, hat das Passwortfeld 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 als maxlength UTF-16 Code-Einheiten ist. Die Constraint-Validierung wird nur angewendet, wenn der Wert vom Benutzer geändert wird.

Die minimale Zeichenanzahl (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 keine minlength angegeben oder ein ungültiger Wert angegeben ist, hat die Passwort-Eingabe 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 Code-Einheiten beträgt. Die Constraint-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-Wert des Eingabefelds erfüllen muss, um die Constraint-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 ist beim Kompilieren des regulären Ausdrucks angegeben, so dass das Muster als eine Sequenz von Unicode-Codepunkten behandelt wird, anstatt als ASCII. Um den Mustertest herum sollten keine Vorwärts-Schrägstriche spezifiziert 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 Auswahl an Zeichensätzen von Ihren Benutzern ausgewählt und verwendet werden. Mit einem Muster können Sie Regelungen zu Groß- und Kleinschreibung vorschreiben, die Verwendung einer bestimmten Anzahl von Ziffern und/oder Satzzeichenzeichen erfordern und so weiter. Siehe den Abschnitt Validierung für Details und ein Beispiel.

Das placeholder-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 den erwarteten Datentyp demonstriert, anstatt eine erklärende Nachricht. Der Text darf keine Wagenrückläufe oder Zeilenumbrüche enthalten.

Wenn der Inhalt der Steuerung eine Richtungsabhängigkeit (LTR oder RTL) hat, jedoch der Platzhalter in der entgegengesetzten Richtung dargestellt werden soll, können Sie die bidirektionalen Algorithmus-Formatierungszeichen von Unicode verwenden, um die Richtung innerhalb des Platzhalters zu überschreiben; siehe Wie man Unicode-Steuerzeichen für bidi-Text verwendet für mehr Informationen.

Ein boolesches Attribut, das, wenn vorhanden, bedeutet, dass dieses Feld nicht vom Benutzer bearbeitet werden kann. Sein value kann jedoch weiterhin 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 exakt sein und sollte nicht darauf verlassen werden; das resultierende Eingabefeld kann schmaler oder breiter als die angegebene Anzahl von Zeichen sein, abhängig von den Zeichen und der Schriftart (font Einstellungen in Gebrauch).

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

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

Hier sehen wir die grundlegendste Passworteingabe, bei der ein Label mit dem <label>-Element erstellt wird.

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

Um es dem Passwort-Manager des Benutzers zu ermöglichen, 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

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

off

Dem Browser oder Passwort-Manager nicht erlauben, das Passwortfeld automatisch auszufüllen. Beachten Sie, dass einige Software diese Einstellung ignoriert, da sie typischerweise die Fähigkeit der Benutzer gefährdet, sichere Passwortpraktiken aufrechtzuerhalten.

current-password

Dem Browser oder Passwort-Manager erlauben, 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 in das Feld einzugeben, jedoch nicht, ein neues vorzuschlagen.

new-password

Dem Browser oder Passwort-Manager erlauben, ein neues Passwort für die Seite automatisch einzugeben; dies wird auf "Passwort ändern" und "neuer Benutzer"-Formularen auf dem Feld verwendet, das den Benutzer nach einem neuen Passwort fragt. 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 zur Erstellung eines angezeigt werden.

<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) Passwortsyntaxregeln von einer alternativen Texteingabeschnittstelle als der Standardtastatur profitieren würden, können Sie das inputmode-Attribut verwenden, um eine spezifische anzufordern. Der offensichtlichste Anwendungsfall hierfür ist, wenn das Passwort numerisch sein muss (wie z.B. bei einer PIN). Mobile Geräte mit virtuellen Tastaturen könnten beispielsweise zu einem numerischen Tastaturlayout statt einer vollständigen Tastatur wechseln, um die Passworteingabe zu erleichtern. Wenn die PIN nur einmal verwendet werden soll, setzen Sie das autocomplete-Attribut auf entweder off oder one-time-code, um anzugeben, dass sie nicht gespeichert werden soll.

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

Wie üblich 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 es angibt, 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-Eingabekontrolle 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 Texteingabesteuerungen 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 Bereich der Zeichen zu ermitteln (oder festzulegen), der derzeit im Steuerelement ausgewählt ist, und selectionDirection, um zu wissen, in welche Richtung die Auswahl erfolgte (oder erweitert wird, abhängig von Ihrer Plattform; siehe deren Dokumentation für eine Erklärung). Da der Text jedoch unkenntlich ist, ist der Nutzen dieser Funktionen 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 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 für eine gültige US-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 legale Sozialversicherungsnummern darstellen. Offensichtlich garantiert diese Regex nicht eine gültige Sozialversicherungsnummer (da wir keinen Zugriff auf die Datenbank der Sozialversicherungsbehörde haben), aber sie stellt sicher, dass die Nummer eine sein könnte; es werden allgemein Werte vermieden, die nicht gültig sein können. Darüber hinaus erlaubt es, dass die drei Gruppen von Ziffern durch ein Leerzeichen, ein Bindestrich ("-") oder nichts getrennt werden.

Das inputmode ist auf numeric gesetzt, um Geräte mit virtuellen Tastaturen zu ermutigen, auf ein numerisches Tastaturlayout für eine einfachere Eingabe umzuschalten. Die minlength- und maxlength-Attribute sind auf 9 bzw. 12 gesetzt, um zu verlangen, dass der Wert mindestens neun und höchstens 12 Zeichen beträgt (die ersteren ohne Trennzeichen zwischen den Zifferngruppen und die letzteren mit ihnen). Das required-Attribut wird verwendet, um anzugeben, dass dieses Steuerelement einen Wert haben muss. Schließlich wird autocomplete auf off gesetzt, um zu verhindern, dass Passwort-Manager und Sitzungswiederherstellungsfunktionen versuchen, seinen Wert zu setzen, da es sich hier überhaupt nicht um ein Passwort handelt.

JavaScript

Das JavaScript zeigt die eingegebene Sozialversicherungsnummer auf dem Bildschirm an, damit Sie sie sehen können. Dies widerspricht dem Zweck eines Passwortfeldes, aber es hilft bei Experimenten mit dem pattern.

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

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

Ergebnis