MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

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

<input id="userPassword" type="password">

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 indiqu 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). 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.">

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

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support simple 1.0 1.0 (1.7 ou moins) 2 1.0 1.0
accesskey 1.0 (Oui) 6 1.0 ?
autocomplete 17.0 4.0 (2.0) 5 9.6 5.2
autofocus 5.0 4.0 (2.0) 10 9.6 5.0
disabled 1.0 1.0 (1.7 ou moins)[4] 6 1.0 1.0
form 9.0 4.0 (2.0) ? 10.62 ?
formaction 9.0 4.0 (2.0) 10 10.62 5.2
formenctype 9.0 4.0 (2.0) 10 10.62 ?
formmethod 9.0 4.0 (2.0) 10 10.62 5.2
formnovalidate 5.0[1] 4.0 (2.0) 10 10.62 ?
formtarget 9.0 4.0 (2.0) 10 10.62 5.2
inputmode Pas de support Pas de support Pas de support Pas de support Pas de support
maxlength 1.0 1.0 (1.7 ou moins) 2 1.0 1.0
minlength 40.0 ? ? ? ?
name 1.0 1.0 (1.7 ou moins) 2 1.0 1.0
pattern 5.0 4.0 (2.0) 10 9.6 Pas de support
placeholder 10.0 4.0 (2.0) 10 11.00 5.0
readonly 1.0 1.0 (1.7 ou moins) 6[2] 1.0 1.0
required 5.0
10[3]
4.0 (2.0) 10 9.6 Pas de support
size 1.0 1.0 (1.7 ou moins) 2 1.0 1.0
Cadenas barré dans la barre d'adresse afin d'indiquer une page de connexion non sécurisée (Oui) 51 (51) ? ? ?
Message affiché autour du champ du mot de passe afin d'indique que la page de connexion est non sécurisée (la saisie automatique est alors bloquée) Pas de support 52 (52) Pas de support Pas de support Pas de support
Fonctionnalité Chrome mobile Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support simple (Oui) 4.0 (2.0) (Oui) (Oui) (Oui)
accesskey ? ? ? ? ?
autocomplete ? 4.0 (2.0) (Oui) (Oui) (Oui)
autofocus 3.2 4.0 (2.0) ? (Oui) ?
disabled (Oui) 4.0 (2.0) (Oui) (Oui) (Oui)
form ? ? ? ? ?
formaction ? 4.0 (2.0) ? 10.62 5.0
formenctype ? ? ? ? ?
formmethod ? 4.0 (2.0) ? 10.62 5.0
formnovalidate ? 4.0 (2.0) ? 10.62 ?
formtarget ? 4.0 (2.0) ? 10.62 5.0
inputmode Pas de support Pas de support Pas de support Pas de support Pas de support
maxlength (Oui) 4.0 (2.0) (Oui) (Oui) (Oui)
minlength ? ? ? 27.0 ?
name (Oui) 4.0 (2.0) (Oui) (Oui) 1.0
pattern ? 4.0 (2.0) ? (Oui) (Oui)
placeholder 2.3 4.0 (2.0) ? 11.10 4
required ? (Oui) ? (Oui) ?
size (Oui) 4.0 (2.0) (Oui) (Oui) (Oui)
Cadenas barré dans la barre d'adresse afin d'indiquer une page de connexion non sécurisée (Oui) 51.0 (51) ? ? ?
Message affiché autour du champ du mot de passe afin d'indique que la page de connexion est non sécurisée (la saisie automatique est alors bloquée) Pas de support 52.0 (52) Pas de support Pas de support Pas de support

[1] Avec IE 6.0, cela ne fonctionnait qu'avec les documents ayant le doctype HTML5. La prise en charge de la validation a été désacivée avec IE 7.0 puis réactivée avec IE 10.0.

[2] Pas de prise en charge des types "checkbox" et "radio".

[3] Pris en charge pour l'élément <select>.

[4] À la différence des autres navigateurs, Firefox conservera un état désactivé obtenu de façon dynamique lorsque la page est rechargée. L'attribut autocomplete peut être utilisé afin de contrôler cette fonctionnalité (cf. bug 654072).

Étiquettes et contributeurs liés au document

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