L'élément <input type="password"> est une version spécifique de l'élément <input> utilisée pour créer un champ dans lequel l'utilisateur saisit un mot de passe.
Lorsque des données seront saisies dans ce champ, le navigateur affichera des caractères (des astérisques ou autres) pour masquer la valeur saisie..
- Catégories de contenu Contenu de flux, contenu phrasé, contenu associé aux formulaires (listed, submittable, resettable).
- Contenu autorisé Aucun, c'est un élément vide
- Omission de balises Doit avoir une balise de début mais pas de balise de fin.
- Élément parents autorisés Tout élément acceptant du contenu phrasé.
- Interface DOM
HTMLInputElement
Attributs
En plus des attributs listés ci-après, cet élément peut être agrémenté des attributs universels.
autocompleteHTML5- Si cet attribut vaut
true, le navigateur complètera automatiquement la valeur du mot de passe avec celle saisie précédemment. autofocusHTML5- Cet attribut booléen permet d'indiquer si le curseur doit être placé sur ce champ au chargement de la page. Seul un élément d'un formulaire peut définir cet attribut.
disabled-
Cet attribut booléen indique que les interactions sont désactivées pour ce champ. Les valeurs désactivées ne sont pas envoyées avec le formulaire.
defaultvalue- Cet attribut définit la valeur par défaut pour le champ du mot de passe.
inputmodeHTML5- Un indicateur destiné au navigateur pour sélectionner le clavier à afficher. Voici les différentes valeurs possibles :
verbatim: Contenu alphanumérique qui n'est pas du texte rédigé. Convient pour des noms d'utilisateur et des mots de passes. non-prose content such as usernames and passwords.latin: Contenu saisi dans la langue préférée de l'utilisateur avec des aides à la saisie comme la prédiction du texte. Convient pour les interactions homme-machine telles que les champs de recherche.latin-name: Comme aveclatin, mais pour les noms humains.latin-prose: Comme aveclatinmais avec une aide plus prononcée pour la saisie. Convient pour les communications « humaines » telles que la messagerie instantannée ou le courriel.full-width-latin: Commelatin-prose, mais pour les langages secondaires de l'utilisateur.kana: Saisie Kana ou romaji, généralement hiragana, qui utilise des caractères à chasse fixe avec la prise en charge de la conversion en kanji. Destinée au texte japonais.katakana: Saisie Katakana qui utilise des caractères à chasse fixe avec la prise en charge de la conversion en kanji. Destinée au texte japonais.
maxlength- Définit la longueur maximale pour le champ.
minlength- Définit la longueur minimale pour le champ.
name- Le nom du champ qui sera envoyé dans les données du formulaire.
patternHTML5- Définit un motif à respecter pour le mot de passe.
placeholderHTML5readonly- Cet attribut booléen indique que l'utilisateur ne peut pas modifier la valeur du champ.
requiredHTML5- Cet attribut booléen indique que l'utilisateur doit remplir ce champ avant de pouvoir envoyer le formulaire.
size- Définit la valeur de lSets the value of the size attribute of a password field.
Exemples
Pour créer un champ de saisie d'un mot de passe qui doit contenir au moins 6 caractères, on pourra utiliser le fragment HTML suivant :
HTML
<input type="password" pattern=".{6,}">
Spécifications
| Spécification | Statut | Commentaires |
|---|---|---|
| WHATWG HTML Living Standard La définition de '<input>' dans cette spécification. |
Standard évolutif | |
| HTML5 La définition de '<input>' dans cette spécification. |
Recommendation | |
| HTML 4.01 Specification La définition de '<form>' dans cette spécification. |
Recommendation |
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 |
| list | 20.0 | 4.0 (2.0) | 10 | 9.6 | 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 |
| Fonctionnalité | Android | 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 |
| list | Pas de support | 4.0 (2.0) | ? | (Oui) | ? |
| 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) |
[1] En version 6, cela fonctionnait uniquement lorsque le type de document (doctype) indiquait HTML5. La prise en charge de la validation a été désactivé en 7.0 puis réactivé en 10.0.
[2] Absent pour type="checkbox" et type="radio".
[3] Pris en charge pour l'élément <select>.
[4] À la différence des autres navigateurs, Firefox garde la persistance d'un état désactivé, même dynamiquement pour un élément <input> lorsque la page est rechargée. En utilisant la valeur off pour l'attribut autocomplete, on peut désactiver cette fonctionnalité. Cela fonctionne même lorsque autocomplete ne devrait pas s'appliquer à <input> en raison de son type. Voir bug 654072.