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

Das genaue Verhalten des Eingabevorgangs kann je nach Browser variieren. Einige Browser zeigen das eingegebene Zeichen für einen Moment an, bevor es verschleiert wird, während andere es dem Benutzer ermöglichen, die Anzeige von Klartext ein- und auszuschalten. Beide Ansätze helfen dem Benutzer zu überprüfen, dass er das beabsichtigte Passwort eingegeben hat, was besonders auf mobilen Geräten schwierig sein kann.

Wert

Das value-Attribut enthält eine Zeichenkette, deren Wert der aktuelle Inhalt des zur Eingabe des Passworts verwendeten Textbearbeitungssteuerfelds ist. Wenn der Benutzer noch nichts eingegeben hat, ist dieser Wert eine leere Zeichenkette (""). Wenn die required-Eigenschaft angegeben ist, muss das Passwortbearbeitungsfeld einen anderen Wert als eine leere Zeichenkette enthalten, um gültig zu sein.

Wenn das pattern-Attribut angegeben ist, wird der Inhalt eines password-Steuerfelds nur dann als gültig betrachtet, wenn der Wert die Validierung besteht; siehe Validierung für weitere Informationen.

Zusätzliche Attribute

Zusätzlich zu den globalen Attributen und den Attributen, die auf alle <input>-Elemente unabhängig von ihrem Typ wirken, unterstützen Passwortfeld-Eingaben die folgenden Attribute.

maxlength

Die maximale Zeichenfolgenlä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 ist, hat das Passwortfeld keine maximale Länge. Dieser Wert muss auch größer als oder gleich dem Wert von minlength sein.

Die Eingabe schlägt Constraint-Validierung fehl, wenn die Länge des in das Feld eingegebenen Textes länger als maxlength UTF-16 Code-Einheiten ist. Die Constraint-Validierung wird nur angewendet, wenn der Wert vom Benutzer geändert wird.

minlength

Die minimale Zeichenfolgenlänge (gemessen in UTF-16 Code-Einheiten), die der Benutzer in das Passworteingabefeld 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 ist, hat die Passwort-Eingabe keine Mindestlänge.

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

pattern

Das pattern-Attribut, wenn spezifiziert, ist ein regulärer Ausdruck, dem der value der Eingabe entsprechen muss, damit der Wert die Constraint-Validierung 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 angegeben, sodass das Muster als eine Sequenz von Unicode-Codepunkten behandelt wird, anstatt als ASCII. Keine Schrägstriche sollten um den Musterttext 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 für Passwort-Eingaben nachdrücklich empfohlen, um sicherzustellen, dass gültige Passwörter mit einer breiten Auswahl an Zeichensätzen ausgewählt und von Ihren Benutzern verwendet werden. Mit einem Muster können Sie Regeln für Groß- und Kleinschreibung vorschreiben, die Verwendung einer Anzahl von Ziffern und/oder Satzzeichenzeichen verlangen und so weiter. Siehe den Abschnitt Validierung für Details und ein Beispiel.

placeholder

Das placeholder-Attribut ist eine Zeichenkette, 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 demonstriert, anstatt eine erklärende Nachricht. Der Text darf keine Wagenrückläufe oder Zeilenumbrüche enthalten.

Wenn der Inhalt des Steuerelements eine Richtung (entweder LTR oder RTL) hat, der Platzhalter jedoch in der entgegengesetzten Richtung angezeigt werden soll, können Sie Unicode-Bidi-Algorithmus-Formatierungszeichen verwenden, um die Richtung innerhalb des Platzhalters zu überschreiben; siehe Anleitung zur Verwendung von Unicode-Steuerzeichen für Bidi-Text für weitere Informationen.

readonly

Ein Boolean-Attribut, das, wenn es vorhanden ist, bedeutet, dass dieses Feld nicht vom Benutzer bearbeitet werden kann. Sein value kann jedoch immer noch durch JavaScript-Code geändert werden, der direkt den Wert der HTMLInputElement.value-Eigenschaft festlegt.

size

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 die Zeichenbreiten unterscheiden, kann dies mehr oder weniger genau sein und sollte nicht darauf vertraut werden, dass es so ist; das resultierende Eingabefeld kann schmaler oder breiter als die angegebene Anzahl von Zeichen sein, abhängig von den Zeichen und den (font) Einstellungen.

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

Verwendung von Passwort-Eingaben

Passwort-Eingabefelder funktionieren im Allgemeinen genauso wie andere textuelle Eingabefelder; der Hauptunterschied besteht im Verschleiern des Inhalts, um zu verhindern, dass Personen in der Nähe des Benutzers das Passwort lesen.

Eine grundlegende Passwort-Eingabe

Hier sehen wir die grundlegendste Passwort-Eingabe, mit einem Label, das unter Verwendung des <label>-Elements festgelegt wurde.

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

Autovervollständigen erlauben

Um zu ermöglichen, dass der Passwort-Manager des Benutzers das Passwort automatisch eingibt, geben Sie das autocomplete-Attribut an. Für Passwörter sollte dies typischerweise eines der folgenden sein:

on

Erlaubt es dem Browser oder einem Passwort-Manager, das Passwortfeld automatisch auszufüllen. Dies ist nicht so informativ wie die Verwendung von entweder current-password oder new-password.

off

Erlaubt es dem Browser oder Passwort-Manager nicht, das Passwortfeld automatisch auszufüllen. Beachten Sie, dass einige Software diesen Wert ignoriert, da er normalerweise schädlich für die Fähigkeit der Benutzer ist, sichere Passwortpraktiken aufrechtzuerhalten.

current-password

Erlaubt es 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 aktuell bekannte Passwort für die Website im Feld einzugeben, jedoch kein neues vorzuschlagen.

new-password

Erlaubt es dem Browser oder Passwort-Manager, ein neues Passwort für die Seite automatisch einzugeben; dies wird auf "Ändern Sie Ihr Passwort" und "Neuer Benutzer"-Formularen, im Feld verwendet, das den Benutzer nach einem neuen Passwort fragt. Das neue Password kann auf verschiedene Arten generiert werden, abhängig vom verwendeten Passwort-Manager. Es kann einen neuen vorgeschlagenen Passwort ausfüllen, oder es kann dem Benutzer eine Oberfläche für die Erstellung eines anzeigen.

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

Das Passwort obligatorisch machen

Um dem Browser des Benutzers zu signalisieren, 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" />

Ein Eingabemodus spezifizieren

Wenn Ihre empfohlenen (oder vorgeschriebenen) Passwortsyntax-Regeln von einer alternativen Texteintragsoberfläche als der Standardtastatur profitieren würden, können Sie das inputmode-Attribut verwenden, um eine bestimmte anzufordern. Der offensichtlichste Anwendungsfall dafür ist, wenn das Passwort numerisch sein muss (zum Beispiel eine PIN). Mobile Geräte mit virtuellen Tastaturen können beispielsweise entscheiden, zu einem Layout mit numerischer Tastatur anstelle einer vollständigen Tastatur zu wechseln, um das Eingeben des Passworts zu erleichtern. Wenn die PIN für einen einmaligen Gebrauch ist, setzen Sie das autocomplete-Attribut auf entweder off oder one-time-code, um anzugeben, dass sie nicht gespeichert wird.

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

Längenanforderungen festlegen

Wie üblich können Sie die minlength und maxlength-Attribute verwenden, um die minimalen und maximalen akzeptablen Längen für das Passwort festzulegen. Dieses Beispiel erweitert das vorherige, indem angegeben wird, dass die PIN des Benutzers mindestens vier und höchstens acht Ziffern haben muss. Das size-Attribut wird verwendet, um sicherzustellen, dass die Passworteingabesteuerelement acht Zeichen breit ist.

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

Text auswählen

Wie bei anderen textuellen 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 den Bereich der im Steuerfeld ausgewählten Zeichen zu erhalten (oder festzulegen) sowie selectionDirection, um zu wissen, in welche Richtung die Auswahl erfolgte (oder erweitert wird, je nach Plattform; siehe die Dokumentation für eine Erklärung). Da der Text jedoch verdeckt ist, ist der Nutzen dieser Funktionen etwas eingeschränkt.

Validierung

Wenn 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 diese Anforderungen 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" />

Beispiele

Anfordern einer Sozialversicherungsnummer

Dieses Beispiel akzeptiert nur Eingaben, die dem Format einer gültigen US-amerikanischen Sozialversicherungsnummer entsprechen. Diese Nummern werden in den USA aus steuerlichen und zu Identifikationszwecken in der Form "123-45-6789" verwendet. Regeln für zulässige Werte in jeder Gruppe existieren ebenfalls.

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 rechtlichen Sozialversicherungsnummern entsprechen. Offensichtlich kann dieser Regex keine gültige SSN garantieren (da wir keinen Zugang zur Datenbank der Social Security Administration haben), aber er sorgt dafür, dass die Nummer eine solche sein könnte; er vermeidet in der Regel Werte, die nicht gültig sein können. Darüber hinaus ermöglicht er, dass die drei Gruppen von Ziffern durch ein Leerzeichen, einen Bindestrich ("-") oder nichts getrennt werden.

Das inputmode ist auf numeric eingestellt, um Geräte mit virtuellen Tastaturen dazu zu ermutigen, zu einem Layout mit numerischer Tastatur zu wechseln, um die Eingabe zu erleichtern. Die minlength- und maxlength-Attribute werden auf 9 bzw. 12 gesetzt, um zu verlangen, dass der Wert mindestens neun und höchstens zwölf Zeichen hat (ersteres ohne Trennzeichen zwischen den Zifferngruppen und letzteres mit ihnen). Das required-Attribut wird verwendet, um anzugeben, dass dieses Steuerelement einen Wert haben muss. Schließlich ist autocomplete auf off eingestellt, um zu verhindern, dass Passwort-Manager und Sitzungswiederherstellungsfunktionen versuchen, seinen Wert festzulegen, 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 Passwortfelds, hilft aber, mit dem pattern zu experimentieren.

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

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

Ergebnis

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität