<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 der Eingabe kann von Browser zu Browser variieren. Einige Browser zeigen das eingegebene Zeichen einen Moment lang an, bevor es unkenntlich gemacht wird, während andere es dem Benutzer ermöglichen, die Anzeige des Klartextes ein- und auszuschalten. Beide Ansätze helfen dem Benutzer, zu überprüfen, ob das gewünschte Passwort eingegeben wurde, was auf mobilen Geräten besonders schwierig sein kann.

Das value-Attribut enthält einen String, dessen Wert der aktuelle Inhalt des Texteditor-Steuerelements ist, das zur Eingabe 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 Passwortfeld einen anderen Wert als einen leeren String haben, 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 deren Typ wirken, unterstützen Passwortfeld-Eingaben 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 wurde, hat das Passwortfeld keine Maximal-Länge. Dieser Wert muss außerdem größer oder gleich dem Wert von minlength sein.

Die Eingabe schlägt bei der Einschränkungs-Validierung fehl, wenn die Länge des in das Feld eingegebenen Textes länger ist als maxlength UTF-16-Code-Einheiten. Einschränkungs-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 von maxlength angegebenen Wert ist. Wenn kein minlength angegeben ist oder ein ungültiger Wert angegeben wurde, hat das Passwort-Eingabefeld keine Mindestlänge.

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

Das pattern-Attribut, wenn angegeben, ist ein regulärer Ausdruck, der mit dem value-Wert des Eingabeformulars übereinstimmen muss, damit der Wert die Einschränkungs-Validierung besteht. Es muss ein gültiger JavaScript regulärer Ausdruck sein, wie er vom RegExp-Typ verwendet wird und wie er in unserem Leitfaden zu regulären Ausdrücken dokumentiert ist; das 'u'-Flag ist beim Kompilieren des regulären Ausdrucks angegeben, sodass das Muster als Sequenz von Unicode-Codepunkten behandelt wird, anstatt als ASCII. Keine Schrägstriche sollten um den Mustertext angegeben werden.

Wenn das angegebene Muster nicht spezifiziert 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 Regelungen zu Groß- und Kleinschreibung vorschreiben, die Verwendung einer bestimmten Anzahl von Zahlen und/oder Satzzeichen anfordern usw. 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 Information im Feld erwartet wird. Es sollte ein Wort oder ein kurzer Satz sein, der die erwartete Art von Daten demonstriert, anstelle einer erklärenden Nachricht. Der Text darf keine Wagenrücklaufzeichen oder Zeilenumbrüche enthalten.

Wenn der Inhalt des Steuerelements eine Richtung (LTR oder RTL) hat, der Platzhalter jedoch in der entgegengesetzten Richtung angezeigt werden muss, können Sie die Unicode-Bidi-Algorithmus-Formatierungszeichen 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, falls vorhanden, bedeutet, dass dieses Feld vom Benutzer nicht bearbeitet werden kann. Sein value kann jedoch weiterhin durch 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 sich Zeichenbreiten unterscheiden, kann dies mehr oder weniger exakt sein und sollte nicht darauf vertraut werden, dass es so ist; die resultierende Eingabe kann schmaler oder breiter als die angegebene Anzahl von Zeichen sein, abhängig von den Zeichen und der Schrift ({cssxref("font")}}-Einstellungen in Verwendung).

Dies setzt kein Limit für die Anzahl der Zeichen, die der Benutzer in das Feld eingeben kann. Es gibt nur ungefähr an, 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 Unkenntlichmachung des Inhalts, um zu verhindern, dass Personen in der Nähe des Benutzers das Passwort lesen.

Hier sehen wir die einfachste Passwort-Eingabe, mit einer Beschriftung, die durch das <label>-Element erstellt wurde.

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

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

on

Erlaubt dem Browser oder einem Passwortmanager, das Passwortfeld automatisch auszufüllen. Dies ist nicht so aussagekräftig wie die Verwendung von entweder current-password oder new-password.

off

Erlaubt dem Browser oder Passwortmanager nicht, das Passwortfeld automatisch auszufüllen. Beachten Sie, dass einige Software diesen Wert ignoriert, da er normalerweise die Fähigkeit der Benutzer gefährdet, sichere Passwortpraktiken zu befolgen.

current-password

Erlaubt dem Browser oder Passwortmanager, das aktuelle Passwort für die Seite einzugeben. Dies bietet mehr Informationen als on, da es dem Browser oder Passwortmanager ermöglicht, das derzeit bekannte Passwort für die Seite automatisch in das Feld einzugeben, aber kein neues vorzuschlagen.

new-password

Erlaubt dem Browser oder Passwortmanager, ein neues Passwort für die Seite automatisch einzugeben; dies wird bei "Ändern Sie Ihr Passwort"- und "Neuer Benutzer"-Formularen verwendet, im Feld, das den Benutzer nach einem neuen Passwort fragt. Das neue Passwort kann auf verschiedene Weise generiert werden, abhängig vom verwendeten Passwortmanager. Es kann ein neu vorgeschlagenes Passwort ausfüllen oder dem Benutzer möglicherweise eine Benutzeroberfläche zum Erstellen eines neuen anzeigen.

<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, geben Sie das Boolean-Attribut required an.

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

Falls Ihre empfohlenen (oder erforderlichen) Passwortsyntaxregeln von einer alternativen Texteingabe-Schnittstelle als der Standardtastatur 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 (wie zum Beispiel eine PIN). Mobile Geräte mit virtuellen Tastaturen könnten beispielsweise zu einem numerischen Tastatur-Layout wechseln, anstatt einer vollständigen Tastatur, um die Eingabe des Passworts zu erleichtern. Wenn die PIN einmalig verwendet werden soll, 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 gewohnt können Sie die Attribute minlength und maxlength verwenden, um minimale und maximale akzeptable Längen für das Passwort festzulegen. Dieses Beispiel baut auf das vorherige auf, indem es angibt, dass die PIN des Benutzers mindestens vier und höchstens acht Ziffern umfassen 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 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 von Zeichen zu erhalten (oder zu setzen), der im Steuerelement gerade ausgewählt ist, und selectionDirection, um zu wissen, in welcher Richtung die Auswahl erfolgte (oder erweitert wird, abhängig von Ihrer Plattform; siehe die Dokumentation für eine Erklärung). Angesichts dessen, dass der Text unkenntlich gemacht wird, ist der Nutzen davon jedoch begrenzt.

Wenn Ihre Anwendung Zeichensatzbeschränkungen oder andere Anforderungen für 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 sicherzustellen, dass Ihre Passwörter diese Anforderungen automatisch 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 Sozialversicherungsnummer der Vereinigten Staaten entsprechen. Diese Nummern, die für Steuer- und Identifikationszwecke in den USA verwendet werden, liegen im Format "123-45-6789" vor. Es gibt auch verschiedene Regeln, 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>

Dieses Beispiel verwendet ein pattern, das den eingegebenen Wert auf Zeichenfolgen beschränkt, die gesetzliche Sozialversicherungsnummern darstellen. Offensichtlich garantiert dieses Regexp keine gültige SSN (da wir keinen Zugang zur Datenbank der Sozialversicherungsverwaltung haben), aber es stellt sicher, 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 Gruppen von Ziffern durch ein Leerzeichen, einen Bindestrich („-“) oder gar nichts getrennt werden.

Das inputmode ist auf numeric gesetzt, um Geräte mit virtuellen Tastaturen dazu zu ermutigen, zu einem numerischen Tastatur-Layout zu wechseln, um die Eingabe zu erleichtern. Die Attribute minlength und maxlength sind auf 9 bzw. 12 gesetzt, um zu verlangen, dass der Wert mindestens neun und höchstens 12 Zeichen beträgt (erstere ohne trennende Zeichen zwischen den Zifferngruppen und letztere mit ihnen). Das required-Attribut wird verwendet, um anzugeben, dass dieses Steuerelement einen Wert haben muss. Schließlich ist autocomplete auf off gesetzt, um zu vermeiden, dass Passwortmanager und Sitzungswiederherstellungsfunktionen versuchen, seinen Wert zu setzen, da dies überhaupt kein Passwort ist.

JavaScript

Das JavaScript zeigt die eingegebene SSN auf dem Bildschirm an, damit Sie sie sehen können. Dies konterkariert den Zweck eines Passwortfeldes, hilft aber beim Experimentieren mit dem pattern.

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

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

Ergebnis