Les éléments <input> de type "password" permettent à utilisateur de saisir un mot de passe sans que celui-ci ne soit lisible à l'écran. Un tel élément se présente comme un contrôle de saisie de texte sur une ligne et dans lequel chaque caractère est remplacé par un symbole (un astérisque ("*") ou un point ("•")) afin que le texte saisi ne puisse être lu. Le caractère utilisé pour obfusquer dépend de l'agent utilisateur (du navigateur) et du système d'exploitation utilisé.

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'utilisateur puisse contrôler que c'est bien le bon caractère. Ainsi, même si le clavier est petit et viruel, on peut éviter de faire trop d'erreurs.

Note : les différents formulaires qui permettent d'envoyer des données sensibles (tels que des mots de passe) doivent être servis sur HTTPS. Firefox, Chrome et les autres navigateurs implémentent désormais différents mécanismes afin d'avertir l'utilisateur lorsqu'il saisit un mot de passe sur une connexion HTTP (cf. l'article mots de passe non sécurisés pour Firefox).

Valeur Une chaîne de caractères qui représente un mot de passe (la chaîne peut éventuellement être vide).
Évènements change et input
Attributs pris en charge autocomplete, inputmode, maxlength, minlength, pattern, placeholder, readonly, required et size
Attributs IDL selectionStart, selectionEnd, selectionDirection et value
Méthodes select(), setRangeText() et  setSelectionRange()

Valeur

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'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.

Note : Il n'est pas possible d'utiliser les caractères de fin de ligne (Line Feed) (code U+000A) et de retour chariot (Carriage Return) (code U+000D) dans la valeur d'un champ "password". Lorsqu'on saisit la valeur, ces caractères sont retirés si besoin.

Utiliser les contrôles de saisie de mot de passe

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.

Un contrôle basique

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

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 informatique 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'un façon ou d'une autre.
<label for="userPassword">Mot de passe :</label>
<input id="userPassword" type="password" autocomplete="current-password">

Rendre le champ obligatoire

Pour indiquer à 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>

Définir un mode de saisie

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

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

Sélectionner le texte saisi

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.

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

Désactiver le champ

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.

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. 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 n'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 (un 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 restoration de session remplissent automatiquement cette valeur.

Résultat

Spécifications

Spécification État Commentaires
HTML Living Standard
La définition de '<input type="password">' dans cette spécification.
Standard évolutif Définition initiale.
HTML 5.1
La définition de '<input type="password">' dans cette spécification.
Recommendation Définition initiale.

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 1Edge ? Firefox Support complet 1IE Support complet 2Opera Support complet 2Safari Support complet 1WebView Android ? Chrome Android Support complet OuiEdge Mobile ? Firefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android ?
Special handling of password inputs in insecure login pages
Non-standard
Chrome Aucun support NonEdge ? Firefox Support complet 52IE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonEdge Mobile ? Firefox Android Support complet 52Opera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android ?

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, CAILAC-Maxime
Dernière mise à jour par : SphinxKnight,