<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 das getippte Zeichen für einen Moment an, bevor es maskiert wird, während andere dem Benutzer erlauben, die Anzeige des Klartexts ein- und auszuschalten. Beide Ansätze helfen dem Benutzer zu prüfen, ob er das beabsichtigte Passwort eingegeben hat, was auf Mobilgeräten besonders schwierig sein kann.

Das value-Attribut enthält eine Zeichenfolge, deren Wert der aktuelle Inhalt des Texteingabesteuerelements ist, das zum Eingeben des Passworts verwendet wird. Wenn der Benutzer noch nichts eingegeben hat, ist dieser Wert eine leere Zeichenfolge (""). Wenn die required-Eigenschaft angegeben ist, muss das Passwort-Eingabefeld 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 angewendet werden, unterstützen Passwort-Feldeingaben die folgenden Attribute.

Die maximale Zeichenfolgenlänge (gemessen in UTF-16-Codeeinheiten), 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 ist, hat das Passwortfeld keine maximale Länge. Dieser Wert muss auch gleich oder größer als der Wert von minlength sein.

Die Eingabe wird die Einschränkungsvalidierung nicht bestehen, wenn die Länge des eingegebenen Textes im Feld größer ist als maxlength UTF-16-Codeeinheiten. Die Einschränkungsvalidierung wird nur angewendet, wenn der Wert vom Benutzer geändert wurde.

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

Die Eingabe wird die Einschränkungsvalidierung nicht bestehen, wenn die Länge des eingegebenen Textes im Feld kürzer ist als minlength UTF-16-Codeeinheiten. Die Einschränkungsvalidierung wird nur angewendet, wenn der Wert vom Benutzer geändert wurde.

Das Attribut pattern ist, wenn angegeben, ein regulärer Ausdruck, den der value des Eingabefelds erfüllen muss, damit der Wert die Einschränkungsvalidierung bestehen kann. 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 ist; das 'u'-Flag wird beim Kompilieren des regulären Ausdrucks angegeben, sodass das Muster als eine 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 Vielzahl von Zeichenklassen von Ihren Benutzern ausgewählt und verwendet werden. Mit einem Muster können Sie Großschreibregeln vorschreiben, die Verwendung einer Anzahl von Ziffern und/oder Satzzeichenzeichen erfordern und so weiter. Siehe den Abschnitt Validierung für Einzelheiten und ein Beispiel.

Das Attribut placeholder ist eine Zeichenfolge, die 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 einer erklärenden Nachricht. Der Text darf keine Wagenrückläufe oder Zeilenumbrüche enthalten.

Wenn der Inhalt einer Steuerelementrichtungsweisung (LTR oder RTL) aber der Platzhalter in der entgegengesetzten Richtung angezeigt werden muss, können Sie Unicode-Richtungsalgorithmus-Formatierungszeichen verwenden, um die Direktionalität im Platzhalter zu überschreiben; siehe Wie man Unicode-Steuerungen 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 immer noch von JavaScript-Code geändert werden, der den Wert der HTMLInputElement.value-Eigenschaft direkt festlegt.

Das Attribut size ist ein numerischer Wert, der anzeigt, wie viele Zeichen breit das Eingabefeld sein sollte. Der Wert muss eine Zahl größer als null sein, und der Standardwert ist 20. Da Zeichenbreiten variieren, muss dies nicht exakt sein und sollte nicht darauf vertraut werden; die resultierende Eingabe kann enger oder breiter als die angegebene Anzahl von Zeichen sein, abhängig von den Zeichen und den (font-Einstellungen) verwendeten Schriftarten.

Dies setzt kein Limit, wie viele Zeichen der Benutzer in das Feld eingeben kann. Es gibt nur ungefähr an, wie viele zu einem Zeitpunkt sichtbar sein können. Um ein oberes Limit 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 ist die Verschleierung des Inhalts, um zu verhindern, dass Personen in der Nähe des Benutzers das Passwort lesen.

Hier sehen wir die einfachste Passwort-Eingabe, mit einem Label das mit dem <label>-Element festgelegt 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 typischerweise einer der folgenden Werte sein:

on

Erlaubt 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

Erlaubt nicht, dass der Browser oder Passwort-Manager das Passwortfeld automatisch ausfüllt. Beachten Sie, dass einige Software diesen Wert ignoriert, da er typischerweise nachteilig für die Fähigkeit der Benutzer ist, sichere Passwortpraktiken zu pflegen.

current-password

Erlauben Sie dem Browser oder Passwort-Manager, das aktuelle Passwort für die Website einzugeben. Dies bietet mehr Informationen als on, da es dem Browser oder Passwort-Manager ermöglicht, das derzeit bekannte Passwort für die Website automatisch in das Feld einzugeben, ohne ein neues vorzuschlagen.

new-password

Erlaubt dem Browser oder Passwort-Manager, ein neues Passwort für die Website automatisch einzugeben; dies wird in Formularen zum "Ändern Ihres Passworts" und "Neuer Benutzer" auf dem Feld verwendet, das den Benutzer nach einem neuen Passwort fragt. Das neue Passwort kann auf verschiedene Weisen generiert werden, abhängig vom verwendeten Passwort-Manager. Es kann ein neues vorgeschlagenes Passwort vorgeneriert werden, oder es kann dem Benutzer eine Schnittstelle zur Erstellung eines neuen Passworts gezeigt 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 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" />

Wenn Ihre empfohlenen (oder erforderlichen) Passwortsyntaxregeln von einer anderen Texteingabeschnittstelle 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 ein PIN). Mobile Geräte mit virtuellen Tastaturen könnten beispielsweise zu einem numerischen Tastenfeld anstelle einer vollständigen Tastatur wechseln, um das Eingeben des Passworts zu erleichtern. Wenn der PIN für die einmalige Verwendung gedacht ist, setzen Sie das autocomplete-Attribut entweder auf off oder one-time-code, um darauf hinzuweisen, dass es nicht gespeichert wird.

<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 festlegt, dass der PIN des Benutzers mindestens vier und höchstens acht Ziffern lang sein muss. Das size-Attribut wird verwendet, um sicherzustellen, dass die Passworteingabesteuerung 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 Text-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 zu erfahren (oder festzulegen), welcher Bereich von Zeichen im Steuerelement derzeit ausgewählt ist, und selectionDirection, um festzustellen, welche Richtung die Auswahl hat (oder in welche Richtung sie je nach Plattform erweitert werden wird; siehe deren Dokumentation für eine Erklärung). Da der Text jedoch verschleiert ist, ist der Nutzen dieser Möglichkeiten etwas eingeschränkt.

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 automatisch sicherstellt, dass Ihre Passwörter diesen Anforderungen entsprechen.

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 Sozialversicherungsnummer der Vereinigten Staaten entsprechen. Diese Nummern, die in den USA für Steuer- und Identifikationszwecke verwendet werden, haben das Format "123-45-6789". Es existieren verschiedene Regeln dafür, 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. Natürlich garantiert dieses Regex 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 generell Werte, die nicht gültig sein können. Darüber hinaus erlaubt es die Trennung der drei Gruppen von Ziffern durch ein Leerzeichen, einen Bindestrich ("-") oder gar nichts.

Das inputmode ist auf numeric gesetzt, um Geräte mit virtuellen Tastaturen dazu zu ermutigen, auf ein numerisches Tastaturlayout für eine einfachere Eingabe zu wechseln. Die Attribute minlength und maxlength sind auf 9 und 12 gesetzt, um zu verlangen, dass der Wert mindestens neun und höchstens 12 Zeichen lang ist (erstere ohne Trennzeichen zwischen den Zifferngruppen und letztere mit ihnen). Das required-Attribut wird verwendet, um anzuzeigen, dass dieses Steuerelement einen Wert haben muss. Schließlich ist autocomplete auf off gesetzt, um zu vermeiden, dass Passwort-Manager und Session-Wiederherstellungsfunktionen versuchen, dessen Wert zu setzen, da dies kein Passwort ist.

JavaScript

Das JavaScript zeigt die eingegebene SSN auf dem Bildschirm an, damit Sie sie sehen können. Dies untergräbt den Zweck eines Passwortfeldes, aber es hilft, mit dem pattern zu experimentieren.

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

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

Ergebnis