Dans cette vidéo tutorielle, le présentateur montre comment implémenter une fonctionnalité d’affichage/masquage du mot de passe dans un formulaire web. Il commence par expliquer l’utilité de cette fonction pour les utilisateurs qui saisissent des mots de passe longs, puis crée le formulaire HTML en enveloppant les champs login et mot de passe dans des divs avec la classe `input`. Un icône (rouge‑eye) est ajouté à côté du champ mot de passe et lié à une fonction JavaScript `changer`. Le CSS stylise le formulaire, le titre, les divs, les champs d’entrée, le bouton de soumission (une div avec la classe `submit`) et l’icône, incluant des effets de hover et des ajustements de taille et d’alignement. Le JavaScript initialise une variable booléenne `e` (true = mot de passe masqué) et définit la fonction `changer` qui, selon la valeur de `e`, bascule le type de l’input entre `password` et `text`, change la source de l’image (red‑eye ↔ green‑eye) et met à jour `e`. Enfin, le bouton de soumission déclenche `document.foo.submit()` pour poster le formulaire via POST. Le présentateur montre le résultat à chaque étape, concluant la démonstration.
Chapters
Bonjour à tous et bienvenue dans cette nouvelle astuce de développement web. Aujourd'hui, nous allons voir comment masquer ou afficher le mot de passe au moment de la saisie. Bien entendu, cette pratique est très utile surtout pour les utilisateurs qui se servent de mots de passe trop longs. Le fait d'afficher ce dernier à volonté leur permet de vérifier au moment même de la saisie s'il est bien écrit ou non. En plus du HTML et du CSS, on aura aussi besoin d'un petit code JavaScript pour agir sur le type du champ qui accueillera le mot de passe et aussi sur l'icône qui accompagnera ce champ-là. On commence par créer le formulaire. On va mettre un titre qui invite l'utilisateur à s'authentifier par exemple. Ensuite on va intégrer les champs de formulaire, mais pour cette astuce nous allons englober ces champs dans des divs. Je leur ai attribué la classe input. Ensuite, j'intègre le premier champ, c'est-à-dire celui qui va accueillir le login. Je fais la même chose pour le deuxième champ, c'est-à-dire celui qui va accueillir le mot de passe. À côté de ce champ, je vais intégrer l'icône qui indique si le mot de passe est affiché ou masqué. L'image qui sera intégrée par défaut est rouge pour dire que le mot de passe est initialement invisible. J'aurai besoin de l'attribut ID parce que je vais agir sur cet objet à l'aide du JavaScript. Je peux même ajouter l'événement JavaScript qui va appeler la fonction qui va agir sur cette image, que j'appelle changer dans un premier temps. Enfin, je vais intégrer le bouton type submit. En fait, je vais pas intégrer le bouton lui-même, mais juste une div qui va faire office de ce bouton-là. Il aura la même classe que j'ai attribuée au login et au mot de passe. Et en plus de ça, je vais ajouter une autre classe particulière que j'appelle par exemple submit. Et pour le texte, je mettrai s'authentifier. Vous avez deviné qu'il s'agit d'une div que je ferai passer pour le bouton submit. Alors je vais lui associer un petit bout de code JavaScript qui permettra de poster le formulaire une fois que j'aurai cliqué sur ce bouton. J'accède au formulaire grâce à document.foo et j'appelle la méthode submit. Dans ce cas, une fois que j'aurai cliqué sur cette div, il va automatiquement soumettre le formulaire via la méthode POST. Alors voyons le résultat. Donc ça ressemble un petit peu à ça. Là c'est le titre h1 et là c'est la zone qui accueillera le login et là c'est la zone destinée au mot de passe et là bien sûr c'est le bouton. Après, c'est le CSS qui va mettre en valeur tout ce que j'ai intégré. Je commence par le sélecteur form. Bon, je vais par exemple appliquer une largeur de 500 pixels avec un fond noir transparent. Une marge interne de 60 pixels et box-sizing avec la valeur border-box pour conserver la largeur initiale de 500 pixels même si j'ai appliqué un padding. Exécutons. Donc ça donne ceci. Maintenant je vais styler le titre H1. Pour la taille du texte, je mettrai par exemple 18 points avec une couleur blanche. Je voudrais aussi appliquer une bordure basse en guise de séparateur. Avec une couleur blanche associée à une petite transparence. Exécutons. Alors là, c'est le titre. Maintenant, je vais styler les divs qui contiennent les 2 inputs auxquels j'ai appliqué la classe input. Je lui applique un arrière-plan blanc avec une petite transparence toujours. Une marge interne de 4 pixels. Une marge externe, par exemple je mettrai 10 pixels pour les marges supérieures et inférieures et 0 pixels À droite et à gauche. Là maintenant ce sont les divs. Donc vous imaginez que je vais masquer la zone de texte pour que les bordures ne soient pas visibles. Comme ça on croira que la div elle-même c'est la zone de texte. Alors maintenant je vais styler les inputs. C'est-à-dire le input type text et le input type password. Donc je vais d'abord transformer leur largeur. Par exemple 90% si vous voulez. Bon bien sûr la valeur en pourcentage c'est pas trop apprécié. Mais dans un premier temps, ça peut faire l'affaire. Sinon, vous pourrez adapter votre affichage au média. Alors, il faudra penser à appliquer les media queries. L'image est automatiquement descendue à la ligne suivante et c'est normal parce qu'il ne reste plus de place pour l'accueillir, mais on va régler ça. Maintenant, j'élimine les bordures et l'arrière-plan. Et aussi de outline. Voilà, ça donne ceci. Maintenant c'est le tour du bouton submit. Bien sûr il s'agit d'une div à laquelle j'ai associé la classe submit. Bon, je vais changer de couleur d'arrière-plan pour la démarquer. Donc là par exemple, c'est une couleur que j'ai trouvée adaptée au cadre. Donc une marge interne de 6 pixels au niveau vertical et 0 pixels horizontalement. Je vais centrer le texte. Et bien sûr, je change la forme du curseur une fois que j'aurai survolé le bouton. Dans ce cas, ça donnera l'impression que c'est cliquable. Je change aussi la couleur, la couleur du texte bien entendu c'est du blanc. Exécutons. Alors ça donne ça, c'est bien. Je modifie légèrement le style une fois le bouton est survolé avec la pseudo-classe hover. J'applique juste un peu d'éclairage. C'est-à-dire que l'objet deviendra plus lumineux. Donc ça donne ceci. C'est une légère modification mais qui fait la différence. Maintenant c'est au tour de l'image. L'image est intégrée dans la balise div dont la classe s'appelle input. Je vais réduire un petit peu sa taille. Par exemple la hauteur c'est 20 pixels. Bon ça devrait suffire. Et là encore je mettrai que ce pointeur. Ça donne ceci, c'est bien, sauf que ce n'est pas centré au niveau vertical. Donc je mettrai vertical-align middle. D'ailleurs, je fais la même chose pour l'input, pour qu'ils soient centrés l'un par rapport à l'autre. Donc là c'est le texte et là c'est le mot de passe. Alors on a l'impression que ça c'est la zone de texte et ça c'est la zone de passe, mais en fait ce sont juste des divs alors que les vraies zones sont masquées. Bon, côté style je crois qu'on a fini avec. Donc maintenant c'est au tour de JavaScript. J'ai déjà prévu une fonction qui s'appelle changer qui va s'appeler une fois que j'aurai cliqué sur l'image ou bien l'icône. Alors je préfère déclarer mes scripts juste avant la fermeture de la balise body. Je vais initialiser une variable que j'appellerai e avec la valeur booléenne true pour dire par exemple que le mot de passe est masqué. Ça c'est la valeur par défaut. Pour la fonction changer, je commence par vérifier la valeur de e. Donc si e est égal à true, ce qui est déjà le cas initialement, dans ce cas je vais changer le type de la zone de texte. Ou plutôt la zone de mot de passe. C'est-à-dire qu'initialement la zone de mot de passe masque les caractères et c'est normal. Mais une fois que j'aurai cliqué sur l'image, dans ce cas je suis censé afficher les caractères et c'est ce que je vais faire justement. Donc là je vais cibler l'input par son ID que je vais ajouter d'ailleurs ici. Je vais l'appeler pass. Et je vais agir sur l'attribut type. Et comme valeur je mets text. C'est-à-dire que désormais la zone de mot de passe est devenue une zone de texte normale. Ensuite je change la valeur de e. Exécutons. Donc là je vais écrire un texte qui est censé être masqué. Quand je clique, c'est bon, maintenant il est affiché. Mais il faut aussi changer l'image. Je vais le faire ici. Je vais juste agir sur la source parce que j'ai déjà prévu 2 images. Voilà, red-eye.png et green-eye.png. Donc je mettrai green-eye. Regardons maintenant. Voilà, le texte est apparu et l'image a changé. Maintenant quand je reclique, je dois rétablir ce qui était par défaut. Ça veut dire je masque le mot de passe et l'image deviendra rouge. Je mettrai else. Bon, je vais juste copier ce bout de code. J'intègre ici et là je mettrai password. Là c'est red et là je mets true. Voilà, exécutons. Voilà, donc là ça s'affiche, l'image change et quand je reclique, l'image initiale est retrouvée et le mot de passe est masqué. Et bien sûr, quand je clique sur s'authentifier, le formulaire est posté. Alors, ça sera tout pour cette astuce. Merci pour votre attention et à la vidéo prochaine.
