<input type="password">

Exemple interactif

<div>
  <label for="username">Nom d'utilisateur&nbsp;:</label>
  <input type="text" id="username" name="username" />
</div>

<div>
  <label for="pass">Mot de passe (8 caractères minimum)&nbsp;:</label>
  <input type="password" id="pass" 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'attribut value 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'attribut pattern est présent, le contenu du contrôle password n'est considéré comme valide que si la valeur respecte la validation ; voir la section Validation pour plus d'informations.

Attributs supplémentaires

En plus des attributs 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é en unité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 aucun maxlength 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 de minlength.

Le champ ne sera pas valide si la longueur du texte saisi dans le champ dépasse maxlength en unité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é en unité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 par maxlength. Si aucun minlength n'est défini, ou si une valeur invalide est indiquée, le champ n'a pas de limite de taille minimale.

Le champ ne sera pas valide si la longueur du texte saisi dans le champ est inférieure à minlength en unité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'attribut pattern, lorsqu'il est défini, est une expression rationnelle que la value du champ doit respecter pour que la valeur passe la validation des contraintes. Il doit s'agir d'une expression rationnelle valide pour JavaScript, comme utilisée par le type RegExp, et comme documentée dans le guide 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 de ASCII. 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 section Validation pour plus de détails et un exemple.

placeholder

L'attribut placeholder 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 texte ne doit pas inclure de retours chariot ou de sauts de ligne.

Si le contenu du contrôle a une directionnalité (LTR ou RTL) 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 ; voir Comment 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'attribut size 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ètres font utilisés).

Ceci ne définit pas 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'attribut maxlength.

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 id="userPassword" 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'attribut autocomplete. 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 que current-password ou new-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 valeur on, 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 id="userPassword" 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éen required.

<label for="userPassword">Mot de passe&nbsp;:</label>
<input id="userPassword" 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'attribut inputmode 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'attribut autocomplete sur off ou one-time-code pour indiquer qu'il ne doit pas être enregistré.

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

Indiquer des critères de longueur

Les attributs minlength et maxlength 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'attribut size est utilisé afin que le contrôle permette bien d'afficher 8 caractères.

<label for="pin">PIN&nbsp;:</label>
<input
  id="pin"
  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éthode select() pour sélectionner tout le texte du champ de mot de passe.

HTML

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

JavaScript

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

Résultat

Vous pouvez également utiliser selectionStart et selectionEnd pour obtenir (ou définir) la plage de caractères actuellement sélectionnée dans le contrôle, et selectionDirection 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'attribut pattern 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
  id="hexId"
  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'un numéro de sécurité sociale américain ^(angl.). Ces nombres ont la forme 123-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"
  id="ssn"
  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 id="current"></span>

On utilise l'attribut pattern 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 saisie peut ê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'attribut inputmode vaut number, ce qui incite les appareils mobiles à utiliser un clavier virtuel uniquement numérique pour la saisie d'un tel champ. Les attributs minlength et maxlength valent respectivement 9 et 12 et l'attribut required indique que cette valeur est nécessaire pour envoyer le formulaire. Enfin, autocomplete vaut off, 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 le pattern.

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