Les éléments<input> de typepassword permettent à l'utilisateur·ice de saisir un mot de passe de manière sécurisée.

L'élément se présente comme un champ d'édition de texte sur une seule ligne dans lequel le texte est masqué afin qu'il ne puisse pas être lu, généralement en remplaçant chaque caractère par un symbole tel qu'un astérisque (« * ») ou un point (« • »).Ce caractère varie selonl'agent utilisateur et le système d'exploitation.

Exemple interactif

<div>  <label for="username">Nom d'utilisateur&nbsp;:</label>  <input type="text" name="username" /></div><div>  <label for="pass">Mot de passe (8 caractères minimum)&nbsp;:</label>  <input type="password" name="password" minlength="8" required /></div><input type="submit" value="Se connecter" />

label {  display: block;}input[type="submit"],label {  margin-top: 1rem;}

Le comportement précis du processus de saisie peut varier d'un navigateur à l'autre.Certains navigateurs affichent le caractère tapé pendant un court instant avant de le masquer, tandis que d'autres permettent à l'utilisateur·ice d'afficher ou de masquer le texte en clair.Ces deux approches aident l'utilisateur·ice à vérifier qu'il·elle a bien saisi le mot de passe souhaité, ce qui peut être particulièrement difficile sur les appareils mobiles.

Valeur

L'attributvalue contient une chaîne de caractères dont la valeur correspond au contenu actuel du contrôle d'édition de texte utilisé pour saisir le mot de passe. Si l'utilisateur·ice n'a encore rien saisi, cette valeur est une chaîne vide (""). Si la propriétérequired est présente, le champ de saisie du mot de passe doit contenir une valeur différente d'une chaîne vide pour être valide.

Si l'attributpattern est présent, le contenu du contrôlepassword n'est considéré comme valide que si la valeur respecte la validation ; voir la sectionValidation pour plus d'informations.

Attributs supplémentaires

En plus desattributs universels et des attributs qui s'appliquent à tous les éléments<input> quel que soit leur type, les champs de saisie de mot de passe prennent en charge les attributs suivants.

maxlength

Le nombre maximum de caractères (mesuré enunités de code UTF-16) que l'utilisateur·ice peut saisir dans le champ de mot de passe. Cette valeur doit être un entier positif ou nul. Si aucunmaxlength n'est défini, ou si une valeur invalide est indiquée, le champ n'a pas de limite de taille maximale. Cette valeur doit également être supérieure ou égale à la valeur deminlength.

Le champne sera pas valide si la longueur du texte saisi dans le champ dépassemaxlength enunités de code UTF-16. La validation des contraintes n'est appliquée que lorsque la valeur est modifiée par l'utilisateur·ice.

minlength

Le nombre minimal de caractères (mesuré enunités de code UTF-16) que l'utilisateur·ice peut saisir dans le champ de mot de passe. Cette valeur doit être un entier positif inférieur ou égal à la valeur indiquée parmaxlength. Si aucunminlength n'est défini, ou si une valeur invalide est indiquée, le champ n'a pas de limite de taille minimale.

Le champne sera pas valide si la longueur du texte saisi dans le champ est inférieure àminlength enunités de code UTF-16. La validation des contraintes n'est appliquée que lorsque la valeur est modifiée par l'utilisateur·ice.

pattern

L'attributpattern, lorsqu'il est défini, est une expression rationnelle que lavalue du champ doit respecter pour que la valeur passe lavalidation des contraintes. Il doit s'agir d'une expression rationnelle valide pour JavaScript, comme utilisée par le typeRegExp, et comme documentée dans leguide sur les expressions rationnelles ; le marqueur'u' est défini lors de la compilation afin que le motif soit traité comme une séquence de points de code Unicode, au lieu deASCII. Aucune barre oblique ne doit être indiquée autour du motif.

Si le motif défini n'est pas présent ou est invalide, aucune expression rationnelle n'est appliquée et cet attribut est ignoré.

L'utilisation d'un motif est fortement recommandée pour les champs de mot de passe, afin d'aider à garantir que des mots de passe valides utilisant une grande variété de classes de caractères soient choisis et utilisés par les utilisateur·ices. Avec un motif, vous pouvez imposer des règles de casse, exiger l'utilisation d'un certain nombre de chiffres et/ou de caractères de ponctuation, etc. Voir la sectionValidation pour plus de détails et un exemple.

placeholder

L'attributplaceholder est une chaîne de caractères qui fournit un indice bref à l'utilisateur·ice sur le type d'information attendu dans le champ. Il doit s'agir d'un mot ou d'une courte phrase qui illustre le type de donnée attendu, plutôt qu'un message explicatif. Le textene doit pas inclure de retours chariot ou de sauts de ligne.

Si le contenu du contrôle a une directionnalité (LTR ouRTL) mais que le texte du placeholder doit être présenté dans la direction opposée, il est possible d'utiliser les caractères de formatage de l'algorithme bidirectionnel Unicode pour forcer la directionnalité à l'intérieur du placeholder ; voirComment utiliser les contrôles Unicode pour le texte bidirectionnel^(angl.) pour plus d'informations.

readonly

Un attribut booléen qui, lorsqu'il est présent, signifie que ce champ ne peut pas être édité par l'utilisateur·ice. Sa valeur (value) peut cependant toujours être modifiée par du code JavaScript qui définit directement la valeur de la propriétéHTMLInputElement.value.

size

L'attributsize est une valeur numérique qui indique combien de caractères de largeur le champ de saisie doit afficher. La valeur doit être un nombre supérieur à zéro, et la valeur par défaut est 20. Comme la largeur des caractères varie, cela peut ne pas être exact et il ne faut pas s'y fier ; le champ résultant peut être plus étroit ou plus large que le nombre de caractères indiqué, selon les caractères et la police (paramètresfont utilisés).

Ceci ne définitpas de limite au nombre de caractères que l'utilisateur·ice peut saisir dans le champ. Cela indique seulement approximativement combien peuvent être vus à la fois. Pour fixer une limite supérieure à la longueur des données saisies, utilisez l'attributmaxlength.

Utiliser les contrôles de saisie de mot de passe

Les champs de saisie de mot de passe fonctionnent généralement comme les autres champs de saisie de texte ; la principale différence est que le contenu est masqué afin d'empêcher les personnes proches de l'utilisateur·ice de lire le mot de passe.

Un contrôle basique

Voici le champ de saisie de mot de passe le plus basique, avec un libellé établi à l'aide de l'élément<label>.

<label for="userPassword">Mot de passe&nbsp;:</label><input type="password" />

Paramétrer l'autocomplétion

Afin de permettre au gestionnaire de mots de passe de saisir automatiquement le mot de passe, on pourra utiliser l'attributautocomplete. Pour les mots de passe, celui-ci aura l'une des valeurs suivantes :

on

Cette valeur permet au navigateur ou à un gestionnaire de mot de passe de remplir automatiquement le champ. Cette valeur n'est pas aussi informative quecurrent-password ounew-password.

off

Cette valeur n'autorise pas le navigateur ou le gestionnaire de mot de passe à remplir le champ automatiquement.

current-password

Cette valeur indique au navigateur ou au gestionnaire de mots de passe qu'il faut utiliser le mot de passe actuel pour le site. Cette valeur est plus précise que la valeuron, car elle indique qu'il faut utiliser le mot de passe courant plutôt qu'un nouveau mot de passe.

new-password

Cette valeur indique au navigateur ou au gestionnaire de mots de passe qu'il faut générer un nouveau mot de passe et utiliser ce dernier pour remplir le champ. La génération automatique du mot de passe peut alors utiliser les autres attributs de l'élément. Cette valeur peut également être indiquée pour que le navigateur indique cette information d'une façon ou d'une autre.

<label for="userPassword">Mot de passe&nbsp;:</label><input type="password" autocomplete="current-password" />

Rendre le champ obligatoire

Pour indiquer à l'utilisateur·ice que le champ de mot de passe doit contenir une valeur valide avant que le formulaire puisse être envoyé, ajoutez l'attribut booléenrequired.

<label for="userPassword">Mot de passe&nbsp;:</label><input type="password" required /><input type="submit" value="Submit" />

Définir un mode de saisie

Si les règles de syntaxe recommandées (ou requises) pour le mot de passe bénéficient d'une interface de saisie différente du clavier standard, vous pouvez utiliser l'attributinputmode pour demander une interface spécifique. Le cas d'utilisation le plus évident est celui où le mot de passe doit être numérique (comme un code PIN). Les appareils mobiles dotés de claviers virtuels peuvent, par exemple, afficher un pavé numérique au lieu d'un clavier complet pour faciliter la saisie du mot de passe. Si le code PIN est à usage unique, définissez l'attributautocomplete suroff ouone-time-code pour indiquer qu'il ne doit pas être enregistré.

<label for="pin">PIN&nbsp;:</label><input type="password" inputmode="numeric" />

Indiquer des critères de longueur

Les attributsminlength etmaxlength peuvent être utilisés afin d'indiquer les tailles minimale et maximale du mot de passe qui doit être saisi. Dans l'exemple qui suit, on repart de l'exemple précédent et on indique que le code PIN doit contenir au moins 4 caractères et au plus 8 caractères. L'attributsize est utilisé afin que le contrôle permette bien d'afficher 8 caractères.

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

Sélectionner le texte saisi

Comme pour les autres contrôles de saisie de texte, vous pouvez utiliser la méthodeselect() pour sélectionner tout le texte du champ de mot de passe.

HTML

<label for="userPassword">Mot de passe&nbsp;:</label><input type="password" size="12" /><button>Sélectionner tout</button>

JavaScript

document.getElementById("selectAll").onclick = () => {  document.getElementById("userPassword").select();};

Résultat

Vous pouvez également utiliserselectionStart etselectionEnd pour obtenir (ou définir) la plage de caractères actuellement sélectionnée dans le contrôle, etselectionDirection pour connaître la direction dans laquelle la sélection a été effectuée (ou sera étendue, selon la plateforme ; voir sa documentation pour plus d'explications). Cependant, étant donné que le texte est masqué, l'utilité de ces propriétés reste limitée.

Validation

Si votre application possède des contraintes sur les caractères utilisables ou sur la structure du mot de passe, il est possible d'utiliser l'attributpattern afin que le navigateur vérifie que la valeur saisie respecte une expression rationnelle tenant compte de ces contraintes.

Dans cet exemple, il n'est possible de saisir qu'une valeur qui contient entre 4 et 8 caractères qui sont des caractères hexadécimaux.

<label for="hexId">Identifiant Hexa&nbsp;:</label><input   type="password"  pattern="[0-9a-fA-F]{4,8}"  title="Veuillez saisir un identifiant avec 4 à 8 chiffres hexadécimaux."  autocomplete="nouveau-mot-de-passe" />

Exemples

Saisir un numéro de sécurité sociale américain comme mot de passe

Dans l'exemple qui suit, on construit un formulaire avec un mot de passe qui doit respecter le format d'unnuméro de sécurité sociale américain^(angl.). Ces nombres ont la forme123-45-6789 et il existe différentes règles permettant de restreindre les valeurs pour chacun des groupes.

HTML

<label for="ssn">SSN&nbsp;:</label><input  type="password"   inputmode="number"  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">Valeur&nbsp;:</label><span></span>

On utilise l'attributpattern afin d'imposer certaines contraintes de saisie afin que les chaînes aient le bon format. Cette expression rationnelle ne garantit pas un numéro valide, mais elle permet de s'assurer que la valeur saisiepeut être un numéro de sécurité sociale valide. De plus, elle permet d'avoir un séparateur variable entre les trois groupes (une espace, un tiret ou rien).

L'attributinputmode vautnumber, ce qui incite les appareils mobiles à utiliser un clavier virtuel uniquement numérique pour la saisie d'un tel champ. Les attributsminlength etmaxlength valent respectivement 9 et 12 et l'attributrequired indique que cette valeur est nécessaire pour envoyer le formulaire. Enfin,autocomplete vautoff, ce qui évite que les gestionnaires de mots de passe ou que les fonctionnalités de restauration de session remplissent automatiquement cette valeur.

JavaScript

Le JavaScript affiche le numéro de sécurité sociale saisi à l'écran pour que vous puissiez le voir. Cela va à l'encontre de l'objectif d'un champ de mot de passe, mais cela permet d'expérimenter avec lepattern.

const ssn = document.getElementById("ssn");const current = document.getElementById("current");ssn.oninput = (event) => {  current.textContent = ssn.value;};

Résultat

Résumé technique

Spécifications

Compatibilité des navigateurs