<input type="password"> HTML-Attributwert

Probieren Sie es aus

<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;
}

Wert

Das Attribut value enthält eine Zeichenfolge mit dem aktuellen Inhalt des Eingabefelds für das Passwort. Wenn der Benutzer noch nichts eingegeben hat, ist dieser Wert eine leere Zeichenfolge (""). Ist die Eigenschaft required angegeben, muss das Passwortfeld einen Wert enthalten, der keine leere Zeichenfolge ist, um gültig zu sein.

Ist das Attribut pattern angegeben, gilt der Inhalt eines password-Eingabefelds nur dann als gültig, wenn sein Wert die Validierung besteht. Weitere Informationen finden Sie unter Validierung.

Zusätzliche Attribute

Neben den globalen Attributen und den Attributen, die für alle <input>-Elemente unabhängig von ihrem Typ gelten, unterstützen Passwortfelder die folgenden Attribute.

maxlength

Die maximale Länge der Zeichenfolge, gemessen in UTF-16-Codeeinheiten, die ein Benutzer in das Passwortfeld eingeben kann. Der Wert muss eine ganze Zahl ab 0 sein. Wenn maxlength nicht angegeben ist oder einen ungültigen Wert hat, hat das Passwortfeld keine maximale Länge. Der Wert muss außerdem größer oder gleich dem Wert von minlength sein.

Die Eingabe besteht die Constraint-Validierung nicht, wenn der eingegebene Text länger als maxlength UTF-16-Codeeinheiten ist. Die Constraint-Validierung wird nur angewendet, wenn der Benutzer den Wert ändert.

minlength

Die minimale Länge der Zeichenfolge, gemessen in UTF-16-Codeeinheiten, die ein Benutzer in das Passwortfeld eingeben kann. Der Wert muss eine nicht negative ganze Zahl sein, die kleiner oder gleich dem durch maxlength festgelegten Wert ist. Wenn minlength nicht angegeben ist oder einen ungültigen Wert hat, hat das Passwortfeld keine minimale Länge.

Die Eingabe besteht die Constraint-Validierung nicht, wenn der eingegebene Text kürzer als minlength UTF-16-Codeeinheiten ist. Die Constraint-Validierung wird nur angewendet, wenn der Benutzer den Wert ändert.

pattern

Das Attribut pattern ist, sofern angegeben, ein regulärer Ausdruck, mit dem value übereinstimmen muss, damit der Wert die Constraint-Validierung besteht. Es muss ein gültiger regulärer JavaScript-Ausdruck sein, wie er vom Typ RegExp verwendet und in unserem Leitfaden zu regulären Ausdrücken beschrieben wird. Beim Kompilieren des regulären Ausdrucks wird das Flag 'u' angegeben, sodass das Muster als Folge von Unicode-Codepunkten statt als ASCII behandelt wird. Der Mustertext darf nicht von Schrägstrichen umgeben sein.

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

Die Verwendung eines Musters für Passwortfelder wird dringend empfohlen. So können Sie dazu beitragen, dass Ihre Benutzer gültige Passwörter mit einer breiten Auswahl an Zeichenklassen wählen und verwenden. Mit einem Muster können Sie Regeln für die Groß- und Kleinschreibung festlegen, eine bestimmte Anzahl von Ziffern und/oder Satzzeichen verlangen und weitere Anforderungen definieren. Einzelheiten und ein Beispiel finden Sie unter Validierung.

placeholder

Das Attribut placeholder ist eine Zeichenfolge, die dem Benutzer einen kurzen Hinweis darauf gibt, welche Art von Information im Feld erwartet wird. Es sollte sich um ein Wort oder einen kurzen Ausdruck handeln, der die erwartete Datenart veranschaulicht, nicht um eine ausführliche Erklärung. Der Text darf keine Wagenrücklauf- oder Zeilenumbruchzeichen enthalten.

Wenn der Inhalt des Eingabefelds eine Schreibrichtung hat (LTR oder RTL), der Platzhalter aber in der entgegengesetzten Richtung dargestellt werden soll, können Sie Unicode-Formatierungszeichen für den bidirektionalen Algorithmus verwenden, um die Schreibrichtung innerhalb des Platzhalters zu überschreiben. Weitere Informationen finden Sie unter Unicode-Steuerzeichen für bidirektionalen Text verwenden.

readonly

Ein boolesches Attribut, das angibt, dass der Benutzer dieses Feld nicht bearbeiten kann. Sein value kann jedoch weiterhin durch JavaScript-Code geändert werden, der die Eigenschaft HTMLInputElement.value direkt setzt.

size

Das Attribut size ist ein numerischer Wert, der angibt, wie viele Zeichen breit das Eingabefeld sein soll. Der Wert muss größer als null sein; der Standardwert ist 20. Da Zeichen unterschiedlich breit sind, ist die Breite nicht unbedingt exakt und sollte auch nicht als exakt vorausgesetzt werden. Je nach Zeichen und Schriftart (den verwendeten font-Einstellungen) kann das resultierende Eingabefeld schmaler oder breiter als die angegebene Anzahl von Zeichen sein.

Dadurch wird nicht begrenzt, wie viele Zeichen der Benutzer in das Feld eingeben kann. Das Attribut gibt nur ungefähr an, wie viele Zeichen gleichzeitig sichtbar sind. Verwenden Sie das Attribut maxlength, um die Länge der Eingabedaten nach oben zu begrenzen.

Passwortfelder verwenden

Passwortfelder funktionieren im Allgemeinen wie andere Texteingabefelder. Der wesentliche Unterschied besteht darin, dass ihr Inhalt unkenntlich gemacht wird, damit Personen in der Nähe des Benutzers das Passwort nicht lesen können.

Das genaue Verhalten bei der Eingabe kann sich von Browser zu Browser unterscheiden. Manche Browser zeigen ein eingegebenes Zeichen kurz an, bevor sie es verbergen. Andere ermöglichen es dem Benutzer, die Klartextanzeige ein- und auszuschalten. Beide Ansätze helfen Benutzern zu überprüfen, ob sie das beabsichtigte Passwort eingegeben haben – was insbesondere auf Mobilgeräten schwierig sein kann.

Ein einfaches Passwortfeld

Hier sehen Sie ein einfaches Passwortfeld mit einer Beschriftung, die über das Element <label> zugeordnet wird.

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

Autovervollständigung zulassen

Geben Sie das Attribut autocomplete an, damit der Passwortmanager des Benutzers das Passwort automatisch eintragen kann. Für Passwörter sollte es üblicherweise einen der folgenden Werte haben:

on

Erlaubt dem Browser oder einem Passwortmanager, das Passwortfeld automatisch auszufüllen. Dieser Wert ist weniger aussagekräftig als current-password oder new-password.

off

Untersagt dem Browser oder Passwortmanager, das Passwortfeld automatisch auszufüllen. Beachten Sie, dass manche Programme diesen Wert ignorieren, da er es Benutzern in der Regel erschwert, sichere Passwortpraktiken einzuhalten.

current-password

Erlaubt dem Browser oder Passwortmanager, das aktuelle Passwort für die Website einzutragen. Dieser Wert liefert mehr Informationen als on: Der Browser oder Passwortmanager kann ein bereits bekanntes aktuelles Passwort für die Website in das Feld eintragen, soll aber kein neues vorschlagen.

new-password

Erlaubt dem Browser oder Passwortmanager, automatisch ein neues Passwort für die Website einzutragen. Dieser Wert wird in Formularen zum Ändern des Passworts oder zum Registrieren neuer Benutzer für das Feld verwendet, in dem ein neues Passwort eingegeben werden soll. Je nach verwendetem Passwortmanager kann das neue Passwort auf unterschiedliche Weise erzeugt werden. Er kann ein neues Passwort vorschlagen und eintragen oder dem Benutzer eine Oberfläche zum Erstellen eines Passworts anzeigen.

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

Das Passwort als Pflichtangabe festlegen

Geben Sie das boolesche Attribut required an, um dem Browser des Benutzers mitzuteilen, dass das Passwortfeld einen gültigen Wert enthalten muss, bevor das Formular gesendet werden kann.

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

Einen Eingabemodus festlegen

Wenn sich Ihre empfohlenen oder vorgeschriebenen Syntaxregeln für Passwörter mit einer anderen Texteingabeoberfläche als der Standardtastatur leichter erfüllen lassen, können Sie mit dem Attribut inputmode eine bestimmte Oberfläche anfordern. Ein naheliegender Anwendungsfall ist ein Passwort, das nur aus Ziffern bestehen darf, beispielsweise eine PIN. Mobilgeräte mit virtuellen Tastaturen können dann etwa zu einem numerischen Tastenfeld statt einer vollständigen Tastatur wechseln, um die Eingabe zu erleichtern. Wenn die PIN nur einmal verwendet werden soll, setzen Sie das Attribut autocomplete auf 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" />

Anforderungen an die Länge festlegen

Wie üblich können Sie mit den Attributen minlength und maxlength die zulässige Mindest- und Höchstlänge des Passworts festlegen. Dieses Beispiel erweitert das vorherige und legt fest, dass die PIN des Benutzers aus mindestens vier und höchstens acht Ziffern bestehen muss. Mit dem Attribut size wird festgelegt, dass das Passwortfeld acht Zeichen breit sein soll.

<label for="pin">PIN:</label>
<input
  id="pin"
  type="password"
  inputmode="numeric"
  minlength="4"
  maxlength="8"
  size="8" />

Text auswählen

Wie bei anderen Texteingabefeldern können Sie mit der Methode select() den gesamten Text im Passwortfeld auswä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

Mit selectionStart und selectionEnd können Sie außerdem ermitteln oder festlegen, welcher Zeichenbereich im Eingabefeld gerade ausgewählt ist. Mit selectionDirection können Sie feststellen, in welche Richtung die Auswahl erfolgte oder – abhängig von Ihrer Plattform – erweitert wird. Eine Erklärung finden Sie in der Dokumentation dieser Eigenschaft. Da der Text jedoch unkenntlich gemacht ist, ist der Nutzen dieser Eigenschaften etwas eingeschränkt.

Validierung

Wenn Ihre Anwendung Einschränkungen für den Zeichensatz oder andere Anforderungen an den tatsächlichen Inhalt des eingegebenen Passworts hat, können Sie mit dem Attribut pattern einen regulären Ausdruck festlegen. Damit wird automatisch geprüft, ob die Passwörter diese Anforderungen erfüllen.

In diesem Beispiel sind nur Werte gültig, die aus mindestens vier und höchstens acht Hexadezimalziffern 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" />

Beispiele

Eine US-Sozialversicherungsnummer abfragen

Dieses Beispiel akzeptiert nur Eingaben, die dem Format einer gültigen US-amerikanischen Sozialversicherungsnummer entsprechen. Diese Nummern werden in den USA für Steuer- und Identifikationszwecke verwendet und haben die Form „123-45-6789“. Darüber hinaus gelten verschiedene Regeln dafür, welche Werte in den einzelnen Gruppen 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>

Hier wird ein pattern verwendet, das den eingegebenen Wert auf Zeichenfolgen beschränkt, die zulässige Sozialversicherungsnummern darstellen können. Dieser reguläre Ausdruck garantiert natürlich nicht, dass eine SSN gültig ist, da kein Zugriff auf die Datenbank der Social Security Administration besteht. Er stellt aber sicher, dass die Nummer gültig sein könnte, und schließt im Allgemeinen Werte aus, die nicht gültig sein können. Außerdem erlaubt er, die drei Zifferngruppen durch ein Leerzeichen oder einen Bindestrich („-“) zu trennen oder sie ohne Trennzeichen einzugeben.

inputmode ist auf numeric gesetzt, damit Geräte mit virtueller Tastatur für eine einfachere Eingabe zu einem numerischen Tastenfeld wechseln können. Die Attribute minlength und maxlength sind auf 9 beziehungsweise 12 gesetzt. Damit muss der Wert mindestens neun und darf höchstens zwölf Zeichen lang sein – ohne Trennzeichen zwischen den Zifferngruppen im ersten Fall und mit Trennzeichen im zweiten. Das Attribut required gibt an, dass dieses Eingabefeld einen Wert enthalten muss. Schließlich ist autocomplete auf off gesetzt, damit Passwortmanager und Funktionen zur Wiederherstellung von Sitzungen nicht versuchen, den Wert einzutragen: Schließlich handelt es sich nicht um ein Passwort.

JavaScript

Das JavaScript zeigt die eingegebene SSN auf dem Bildschirm an, damit Sie sie sehen können. Das widerspricht zwar dem Zweck eines Passwortfelds, erleichtert aber das Experimentieren mit pattern.

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

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

Ergebnis

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität