<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 je nach Browser variieren. Einige Browser zeigen das eingegebene Zeichen einen Moment lang an, bevor es verdeckt wird, während andere dem Benutzer erlauben, die Anzeige von Klartext ein- und auszuschalten. Beide Ansätze helfen dem Benutzer sicherzustellen, dass er das beabsichtigte Passwort eingegeben hat, was insbesondere auf mobilen Geräten schwierig sein kann.

Das value-Attribut enthält eine Zeichenfolge, deren Wert der aktuelle Inhalt der Texteingabe-Steuerung ist, die zur Passworteingabe verwendet wird. Wenn der Benutzer noch nichts eingegeben hat, ist dieser Wert eine leere Zeichenfolge (""). Wenn das required-Attribut angegeben ist, muss das Passwort-Eingabefeld einen Wert enthalten, der nicht leer ist, um gültig zu sein.

Wenn das pattern-Attribut angegeben ist, wird der Inhalt eines password-Elements nur dann als gültig betrachtet, 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 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 maxlength nicht angegeben 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 wird die Einschränkungsvalidierung nicht bestehen, wenn die Länge des in das Feld eingegebenen Textes länger als maxlength UTF-16-Code-Einheiten ist. 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 von maxlength angegebenen Wert ist. Wenn minlength nicht angegeben oder ein ungültiger Wert angegeben wird, hat die Passworteingabe keine Mindestlänge.

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

Das pattern-Attribut, falls angegeben, ist ein regulärer Ausdruck, den der value des Eingabefelds erfüllen muss, damit der Wert die Einschränkungsvalidierung besteht. 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 spezifiziert, sodass das Muster als eine Folge von Unicode-Code-Punkten behandelt wird, anstatt als ASCII. Um Schrägstriche herum sollten keine Mustertexte 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 nachdrücklich für Passworteingaben empfohlen, um sicherzustellen, dass gültige Passwörter mit einer Vielzahl von Zeichenklassen ausgewählt und von Ihren Benutzern verwendet werden. Mit einem Muster können Sie Groß-/Kleinschreibungsregeln vorschreiben, die Verwendung von Ziffern und/oder Satzzeichenzeichen fordern und so weiter. Einzelheiten 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 eine kurze Phrase sein, die den erwarteten Datentyp 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, aber der Platzhalter in der entgegengesetzten Richtung dargestellt werden muss, können Sie Unicode-Bidirektionalitätsalgorithmus-Formatierungszeichen verwenden, um die Richtung im Platzhalter zu überschreiben; siehe Wie man Unicode-Steuerelemente 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 immer noch durch JavaScript-Code geändert werden, der den Wert der HTMLInputElement.value-Eigenschaft direkt 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 die Breiten der Zeichen variieren, kann dies exakt sein oder nicht, und es sollte nicht darauf vertraut werden, dass es so ist; 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).

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

Passworteingabefelder funktionieren im Allgemeinen ähnlich wie andere Texteingabefelder; der Hauptunterschied besteht in der Verschleierung des Inhalts, um zu verhindern, dass Personen in der Nähe des Benutzers das Passwort lesen.

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 Passwortmanager des Benutzers zu erlauben, das Passwort automatisch einzugeben, geben Sie das autocomplete-Attribut an. Für Passwörter sollte dies typischerweise einer der folgenden sein:

on

Erlaubt dem Browser oder einem Passwortmanager, das Passwortfeld automatisch auszufüllen. Dies ist nicht so informativ wie die Verwendung von 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 typischerweise der Fähigkeit der Benutzer schadet, sichere Passwortpraktiken zu pflegen.

current-password

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

new-password

Erlaubt dem Browser oder Passwortmanager, ein neues Passwort für die Seite automatisch einzugeben; dies wird auf "Ändern Sie Ihr Passwort"- und "Neue Benutzer"-Formularen auf dem Feld verwendet, 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 neues vorgeschlagenes Passwort ausfüllen oder dem Benutzer eine Oberfläche zum Erstellen eines geben.

<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 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 alternativen Texteingabeschnittstelle als der Standardtastatur profitieren würden, können Sie das inputmode-Attribut verwenden, um eine bestimmte anzufordern. Der offensichtlichste Anwendungsfall hierfür ist, wenn das Passwort numerisch sein muss (wie eine PIN). Mobile Geräte mit virtuellen Tastaturen, zum Beispiel, könnten daraufhin zu einem numerischen Tastenfeld-Layout wechseln anstatt einer vollständigen Tastatur, um das Eingeben des Passworts zu erleichtern. Wenn die PIN nur einmal 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 ü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 um die Anforderung, dass die Benutzer-PIN mindestens vier und höchstens acht Ziffern umfassen muss. Das size-Attribut wird verwendet, um sicherzustellen, dass das Passworteingabewerkzeug 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 Texteingabewerkzeugen 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 aktuell im Steuerelement ausgewählten Zeichen zu bestimmen (oder setzen) und selectionDirection, um zu wissen, in welche Richtung die Auswahl erfolgte (oder erweitert wird, je nach Ihrer Plattform; siehe deren Dokumentation für eine Erklärung). Allerdings ist der Nutzen dieser Eigenschaften, da der Text verschleiert ist, eher begrenzt.

Falls 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 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 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 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>

Hier wird ein pattern verwendet, das den eingegebenen Wert auf Zeichenfolgen beschränkt, die legale Sozialversicherungsnummern darstellen. Natürlich garantiert dieser reguläre Ausdruck keine gültige SSN (da wir keinen Zugriff auf die Datenbank der Social Security Administration 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 ermöglicht er, dass die drei Zahlengruppen durch ein Leerzeichen, ein Minuszeichen ("-") oder nichts getrennt werden.

Das inputmode ist auf numeric gesetzt, um Geräte mit virtuellen Tastaturen dazu zu ermutigen, auf eine numerische Tastaturanzeige für 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 zwölf Zeichen lang ist (die ersten ohne Trennzeichen zwischen den Gruppen von Ziffern und die letzteren 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 Passwortmanager und die Sitzungserstellungsfunktionen 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 untergräbt den Zweck eines Passwortfeldes, hilft aber das pattern zu testen.

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

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

Ergebnis