Astuces pratiques de développement web

Auteur: Mohamed CHINY Durée necessaire pour le cours de Astuces pratiques de développement web Niveau recommandé pour le cours de Astuces pratiques de développement web Supports vidéo disponibles pour ce cours Exercices de renforcement disponibles pour ce cours Quiz non disponibles pour ce cours

Page 12: Afficher ou masquer le mot de passe dans un formulaire

Toutes les pages

Afficher ou masquer un mot de passe dans un formulaire d'authentification

Contrôler le masquage ou l'affichage d'un mot de passe

Si le mot de passe à saisir au moment d'une authentification est trop long ou complexe, alors il serait parfois difficile de le saisir correctement si les caractères sont masqués.

Dans cette astuce nous allons voir comment contrôler le masquage ou l'affichage d'un mot de passe dans un formulaire en utilisant HTML, CSS et Javascript.

Le principe est simple, si l'utilisateur souhaite masque le mot de passe alors le champs concerné est transformé en type="password", sinon alors devient de type="text", et c'est Javascript qui orchestre cette opération en cliquant sur une petite icon qui accompagne le champs de saisie du mot de passe.

Passons à la pratique