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

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

Wenn das pattern-Attribut angegeben ist, gilt der Inhalt eines password-Steuerelements nur dann als gültig, wenn der Wert die Überprüfung besteht; siehe Validierung für mehr 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 Zeichenlänge (gemessen in UTF-16 Code-Einheiten), die der Benutzer in das Passwort-Feld eingeben kann. Dies muss ein ganzzahliger Wert von 0 oder höher sein. Wenn maxlength nicht angegeben ist oder ein ungültiger Wert spezifiziert ist, hat das Passwort-Feld keine maximale Länge. Dieser Wert muss außerdem größer oder gleich dem Wert von minlength sein.

Die Eingabe wird die [Einschränkungsvalidierung](/de/docs/Web/HTML/Guides/ Constraint_validation) nicht bestehen, wenn die Länge des in das Feld eingegebenen Textes länger ist als maxlength UTF-16 Code-Einheiten. Die Einschränkungsvalidierung wird nur angewendet, wenn der Wert durch den 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 wertpositiver Ganzzahlenwert sein, der kleiner oder gleich dem von maxlength angegebenen Wert ist. Wenn minlength nicht angegeben ist oder ein ungültiger Wert spezifiziert ist, hat die Passwort-Eingabe keine Mindestlänge.

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

Das pattern-Attribut, wenn angegeben, ist ein regulärer Ausdruck, den der value der Eingabe bestehen muss, um die Einschränkungsvalidierung zu bestehen. Es muss ein gültiger JavaScript-Regulärausdruck 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, sodass das Muster als Folge von Unicode-Codespunkten behandelt wird, anstatt als ASCII. Es sollten keine Schrägstriche um den Mustertest angegeben werden.

Wenn das angegebene Muster nicht angegeben oder ungültig ist, wird kein regulärer Ausdruck angewendet und dieses Attribut komplett ignoriert.

Die Verwendung eines Musters wird für Passwort-Eingaben dringend 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 einer bestimmten Anzahl von Ziffern und/oder Satzzeichen erfordern usw. 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 in dem Feld erwartet werden. Es sollte ein Wort oder ein kurzer Satz sein, der den erwarteten Datentyp zeigt, anstatt einer erklärenden Nachricht. Der Text darf keine Wagenrückläufe oder Zeilenumbrüche enthalten.

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

Ein Boolean-Attribut, das, wenn es vorhanden ist, bedeutet, dass dieses Feld vom Benutzer nicht bearbeitet werden kann. Sein value kann jedoch weiterhin über 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 sollte. Der Wert muss eine Zahl größer als null sein, und der Standardwert ist 20. Da Zeichenbreiten variieren, kann dies genauer oder ungenauer sein und sollte nicht darauf vertraut werden; das resultierende Eingabefeld kann schmaler oder breiter sein als die angegebene Anzahl von Zeichen, abhängig von den Zeichen und der Verwendung von Schriftart-Einstellungen (font).

Dies setzt keine Grenze für die Anzahl der Zeichen, die der Benutzer in das Feld eingeben kann. Es gibt nur ungefähr an, wie viele auf einmal gesehen werden können. Um eine obere Grenze für die Länge der Eingabedaten festzulegen, verwenden Sie das maxlength-Attribut.

Passwort-Eingabefelder funktionieren im Allgemeinen genau wie andere textuelle Eingabefelder; der Hauptunterschied besteht darin, dass der Inhalt verdeckt wird, um zu verhindern, dass Personen in der Nähe des Benutzers das Passwort lesen können.

Hier sehen wir die einfachste Passwort-Eingabe, mit einem über das <label>-Element erstellten Label.

<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 eine der folgenden sein:

on

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

off

Dem Browser oder Passwort-Manager nicht erlauben, das Passwort-Feld automatisch auszufüllen. Beachten Sie, dass einige Software diesen Wert ignoriert, da er typischerweise schädlich für die Fähigkeit der Benutzer ist, sichere Passwortpraktiken einzuhalten.

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 derzeit bekannte Passwort für die Seite automatisch in das Feld einzutragen, aber kein neues vorzuschlagen.

new-password

Dem Browser oder Passwort-Manager erlauben, ein neues Passwort für die Seite automatisch einzugeben; dies wird bei „Passwort ändern“- und „Neuer Benutzer“-Formularen verwendet, in dem Feld, das vom Benutzer ein neues Passwort verlangt. Das neue Passwort kann auf verschiedene Weise generiert werden, je nach verwendetem Passwort-Manager. Es kann ein neues vorgeschlagenes Passwort einfüllen, oder es könnte dem Benutzer eine Schnittstelle zum Erstellen zeigen.

<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) Passwortsyntax-Regeln von einer anderen Texteintrittsschnittstelle 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 sein muss (z.B. eine PIN). Mobile Geräte mit virtuellen Tastaturen könnten beispielsweise zu einem Zahlenblock-Layout wechseln anstatt einer vollständigen Tastatur, um das Eintragen des Passworts zu erleichtern. Wenn die PIN nur einmal verwendbar ist, setzen Sie das autocomplete-Attribut auf entweder off oder one-time-code, um anzugeben, dass es nicht gespeichert wird.

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

Wie üblich können Sie die Attribute minlength und maxlength verwenden, um minimale und maximale akzeptable Längen für das Passwort festzulegen. Dieses Beispiel erweitert das vorhergehende durch die Angabe, dass die PIN des Benutzers mindestens vier und höchstens acht Ziffern haben 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 Text-Eingabekontrollen können Sie die select()-Methode verwenden, um den gesamten Text im Passwort-Feld 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 Zeichenbereich im Steuerelement gerade ausgewählt ist, und selectionDirection, um zu wissen, in welche Richtung die Auswahl erfolgt ist (oder erweitert wird, je nach Plattform; siehe deren Dokumentation für eine Erklärung). Da der Text jedoch verdeckt ist, ist der Nutzen dieser Funktionen etwas begrenzt.

Wenn Ihre Anwendung Zeichensatzbeschränkungen oder sonstige Anforderungen an den tatsächlichen Inhalt des eingegebenen Passworts hat, können Sie das pattern-Attribut verwenden, um einen regulären Ausdruck festzulegen, mit dem Ihre Passwörter diese Anforderungen automatisiert erfüllen.

In diesem Beispiel sind nur Werte gültig, die aus mindestens vier und nicht mehr als 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 in den USA für Steuer- und Identifikationszwecke verwendet werden, haben das Format "123-45-6789". Es existieren 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 dieser Reguläre Ausdruck nicht eine gültige SSN (da wir keinen Zugriff auf die 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. Zudem erlaubt es, dass die drei Gruppen von Ziffern durch Leerzeichen, einen Bindestrich ("-") oder nichts getrennt sind.

Das inputmode wird auf numeric gesetzt, um Geräte mit virtuellen Tastaturen dazu zu ermutigen, zu einem Zahlenblock-Layout für eine einfachere Eingabe zu wechseln. Die Attribute minlength und maxlength sind auf 9 bzw. 12 gesetzt, um zu verlangen, dass der Wert mindestens neun und nicht mehr als 12 Zeichen lang ist (der erstere ohne Trennzeichen zwischen den Zifferngruppen und der letztere mit ihnen). Das required-Attribut wird verwendet, um anzuzeigen, dass diese Steuerung einen Wert haben muss. Schließlich ist autocomplete auf off gesetzt, um zu vermeiden, dass Passwort-Manager 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 widerspricht dem Zweck eines Passwort-Felds, 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