<input type="password">

La façon dont le texte saisi est traité dépend du navigateur utilisé. Sur les appareils mobiles, par exemple, le caractère tapé est souvent laissé affiché un court instant afin que l'utilisatrice ou l'utilisateur puisse contrôler que c'est bien le bon caractère. Ainsi, même si le clavier est petit et virtuel, on peut éviter de faire trop d'erreurs.

La valeur de l'attribut value d'un tel élément contient une chaîne de caractères (DOMString) dont la valeur est le texte qui est en cours de saisie dans le contrôle. Si l'utilisatrice ou l'utilisateur n'a pas encore saisi d'information, la valeur est une chaîne vide. Si l'attribut booléen required est utilisé, le mot de passe doit contenir une valeur non vide afin que le formulaire puisse être envoyé.

Si l'attribut pattern est indiqué, le contenu du contrôle doit respecter l'expression rationnelle indiquée par l'attribut. Pour plus d'informations, voir la section Validation ci-après.

En complément des attributs communs à l'ensemble des éléments <input>, les champs pour les mots de passe prennent en charge les attributs suivants.

Le nombre maximum de caractères (exprimé en nombre d'unités de code UTF-16) que l'utilisatrice ou l'utilisateur peut saisir dans le champ. Cette valeur doit êtrer un entier positif ou nul. Si aucune valeur n'est fournie pour maxlength ou qu'une valeur invalide est fournie, il n'y a pas de contrainte de taille maximale. La valeur indiquée par cet attribut doit être supérieure à minlength.

Le champ ne sera pas valide si la longueur du texte dépasse maxlength en nombre d'unités de code UTF-16. Les contraintes de validation sont uniquement appliquées lorsque la valeur est modifiée par l'utilisatrice ou l'utilisateur.

Le nombre minimal de caractères (exprimé en nombre d'unités de code UTF-16) que l'utilisatrice ou l'utilisateur peut saisir dans le champ. Cette valeur doit êtrer un entier positif ou nul. Si aucune valeur n'est fournie pour minlength ou qu'une valeur invalide est fournie, il n'y a pas de contrainte de taille minimale. La valeur indiquée par cet attribut doit être inférieure à maxlength.

Le champ ne sera pas valide si la longueur du texte est inférieure à minlength en nombre d'unités de code UTF-16. Les contraintes de validation sont uniquement appliquées lorsque la valeur est modifiée par l'utilisatrice et l'utilisateur.

L'attribut pattern est une expression rationnelle que doit respecter la valeur (value) du champ afin d'être valide. Cette expression rationnelle doit être une expression rationnelle valide pour JavaScript (telle qu'utilisée par RegExp et telle que documentée dans ce guide). Le marqueur 'u' est fourni par le navigateur lors de la compilation de l'expression rationnelle afin que le motif soit traité comme une séquence de points de code Unicode plutôt que comme des caractères ASCII. Aucune barre oblique (/) ne devrait être utilisée autour du motif.

Si l'expression rationnelle est invalide ou que cet attribut n'est pas défini, l'attribut est ignoré.

Voir la section sur l'utilisation de cet attribut ci-après pour plus d'exemples.

L'utilisation d'un motif pour les mots de passe est fortement recommandée. Elle permet de s'assurer que les mots de passe saisis respectent des critères de complexité suffisants pour être robustes. Voir la section Validation ci-après pour plus de détails et d'exemples.

L'attribut placeholder est une chaîne de caractères fournissant une courte indication à l'utilisatrice ou l'utilisateur quant à l'information attendue dans le champ. Cet attribut devrait être un mot ou une phrase courte qui illustre le type de donnée attendu plutôt qu'un message explicatif. Le texte ne doit pas contenir de saut à la ligne.

Si le contenu du contrôle respecte une directionnalité donnée (LTR ou RTL) et que le texte indicatif doit être présenté dans l'autre sens, il est possible d'utiliser l'algorithme de formatage bidirectionnel Unicode — voir Comment utiliser les contrôles Unicode pour le texte bidirectionnel (en anglais) pour plus de détails.

Un attribut booléen qui, lorsqu'il est présent, indique que le champ ne peut pas être édité par l'utilisatrice ou l'utilisateur. Toutefois, la valeur de l'attribut value peut toujours être modifiée via du code JavaScript, qui définirait la propriété value rattachée à l'interface HTMLInputElement.

L'attribut size est un nombre positif qui indique le nombre de caractères affichés à l'écran et qui définit donc la largeur du champ. La valeur par défaut de cet attribut est 20. Étant donné que la largeur des caractères peut varier cet attribut ne permet de définir une largeur exacte mais approximative.

Cet attribut ne définit pas la limite du nombre de caractères saisissables dans le champ mais uniquement, et approximativement, le nombre de caractères qui peuvent être affichés à l'écran simultanément. Pour fixer une taille maximale sur la valeur du champ, on utilisera plutôt l'attribut maxlength.

Les champs destinés à la saisie des mots de passe fonctionnent comme les champs texte mais masquent le texte saisi pour que celui-ci ne puisse pas être lu sur l'écran.

Voici un exemple simple illustrant un contrôle de saisie d'un mot de passe qui utilise un élément <label> afin d'indiquer le rôle du champ.

<label for="userPassword">Mot de passe :</label>
<input id="userPassword" type="password" />

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 or 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 :</label>
<input id="userPassword" type="password" autocomplete="current-password" />

Pour indiquer à l'utilisatrice ou l'utilisateur que le mot de passe est obligatoire, on pourra utiliser l'attribut required.

<label for="userPassword">Mot de passe :</label>
<input id="userPassword" type="password" required />

Si votre application utilise un autre mode de saisie que le mode par défaut, l'attribut inputmode peut être employé pour indiquer le mode à utiliser. Le cas le plus fréquent est celui où on utilise une valeur numérique pour un mot de passe (par exemple pour un code PIN). Si ce code ne doit être utilisé qu'une seule fois, on pourra paramétrer l'attribut autocomplete avec la valeur off. Les appareils mobiles pourront tirer parti de la valeur de cet attribut et afficher un autre clavier pour faciliter la saisie.

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

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 :</label>
<input
  id="pin"
  type="password"
  inputmode="numeric"
  minlength="4"
  maxlength="8"
  size="8" />

Il est possible d'utiliser la méthode select() pour sélectionner le texte saisi dans le contrôle.

HTML

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

JavaScript

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

Résultat

On peut également utiliser selectionStart et selectionEnd afin d'obtenir (ou de régler) l'intervalle de caractères sélectionnés. selectionDirection permet de connaître la direction dans laquelle la sélection a été effectuée.

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 :</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" />

L'attribut booléen disabled indique que le champ ne peut pas être utilisé de façon interactive. Les données des champs désactivés ne seront pas envoyées avec le formulaire.

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. 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 :</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 :</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.

Résultat

• La compatibilité des propriétés CSS pour les contrôles de formulaires