JS moderne, Exo #5 Afficher ou masquer un Mot de Passe
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00

TUTO JS moderne, Exo #5 Afficher ou masquer un Mot de Passe

Carl Brison
18,00€
Acheter maintenant, payer plus tard. En savoir plus

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

Continuons à manipuler le JavaScript moderne.
Pour ce tuto sous forme d'exercice pratique, nous allons voir comment il est possible d'afficher ou de masquer un mot de passe dans un champ de formulaire prévu à cet effet.
Pour cela, nous allons utiliser le langage JavaScript.

Ce type de fonctionnalité permet une meilleure expérience utilisateur (UX).
En effet, par défaut un input de type password, affiche de manière masquée votre mot de passe (sous forme de points ou d'étoiles).
Dans certains cas, par exemple un mot de passe complexe, il peut être utile de laisser l'utilisateur voir le mot de passe qu'il est en train de saisir. Il faut installer pour cela une petite fonctionnalité que vous pouvez coder en Javascript.

Au programme de ce tuto afficher ou masquer un mot de passe en Javascript

Nous créerons dans un premier temps le formulaire en HTML.
Puis, nous ajouterons des icônes avec la librairie Font Awesome. Nous verrons ensuite comment installer la fonction d'affichage / masquage de notre mot de passe, au clic sur un icône. 

Vous obtiendrez ainsi une meilleure expérience en ce qui concerne l'affichage du password de vos utilisateurs.

Un QCM vous sera proposé en fin de formation et vous permettra de valider les connaissances théoriques acquises pendant la formation.
Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions sur ce cours.

Pour suivre ce tutoriel vidéo dans de bonnes conditions, il est recommandé de connaître :
Les bases du JavaScript moderne.

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Chapitre 1
Afficher ou cacher un Password
Chapitre 2
Conclusion

Plan détaillé du cours

Chapitre 1 : Afficher ou cacher un Password
1h36m
 
Leçon 1Mise en place du code HTML
Leçon 2Mise en place de la librairie fontawesome
Leçon 3Mise en forme de la box
Leçon 4Mise en forme du titre de niveau 1
Leçon 5On cible l'action du formulaire
Leçon 6On bloque ou débloque le formulaire en JavaScript moderne
Leçon 7Mise en forme des champs de formulaire
Leçon 8On positionne l'oeil
Leçon 9Ecriture du programme d'affichage du Password 1/2
Leçon 10Ecriture du programme d'affichage du Password 1/2
Leçon 11Réflexion: Montrer à l'internaute l'inactivité du bouton
Leçon 12Réflexion: Informer l'internaute
Chapitre 2 : Conclusion
02m36s
 
Leçon 1Conclusion

Avis des apprenants

Détail des avis
5
Apprenants
5
Commentaires
5/5
Note moyenne
5/5
5
4/5
0
3/5
0
2/5
0
1/5
0
Alain Tardif
Alain Tardif
Publié le 25/01/2023
Merci Carl pour ce tuto. C'était plus difficile sur ce cours. On est tous différents. J'ai pris beaucoup de plaisir à le réaliser. Comme d'habitude, cours claire et pédagogique. Validé 100 % JS moderne EXO#5.
Carl Brison
Carl Brison
Merci beaucoup pour votre commentaire très gentil ;-)
Jean-Claude Warg-Briers
Jean-Claude Warg-Briers
Publié le 21/10/2022
Super exercice , qui est bien pensé et expliqué
Carl Brison
Carl Brison
C'est très gentil, merci beaucoup ;-)
Pierre Girard
Pierre Girard
Publié le 04/05/2022
Tuto très interessant comme toujours. Juste un petit problème : même en copiant votre version, l'oeil de Fontawesome n'est pas aligné avec la phrase "indiquez votre password" (il est un peu plus bas)... Merci ! Pierre P.S. Et merci pour la réponse !
Carl Brison
Carl Brison
Merci beaucoup pour votre commentaire. En réponse à votre remarque, ajoutez cette propriété top: 25px; au sélecteur #voirPass, dans le CSS. (Vous pouvez aussi récupérer le code que je viens de mettre à jour)

Vos questions sur le cours

Quel est le niveau requis pour suivre ce tuto ?

débutant

Que contient le fichier source ?

Le code source complet de l'exercice.

Payer plus tard

Prix d'achat : 18,00 €
Pour payer plus tard, sélectionnez Klarna comme moyen de paiement lors du règlement.

Ajoutez des articles à votre panier

Sélectionnez Klarna lors du règlement

Recevez une autorisation

Payez dans 30 jours

Klarna : conditions d'utilisation du paiement différé.

Attendez ! 🤗

Accédez à plus de 1357 tutos gratuits

Notre politique de protection des données