Bundle 10 exercices 100% frontend HTML, CSS et JS
-30% de réduction
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.
Table des matières de cette formation JavaScript (durée : 1h39m)
-
Afficher ou cacher un Password
- Mise en place du code HTML gratuit 00:09:19
- Mise en place de la librairie fontawesome 00:06:26
- Mise en forme de la box 00:11:04
- Mise en forme du titre de niveau 1 00:04:38
- On cible l'action du formulaire 00:06:26
- On bloque ou débloque le formulaire en JavaScript moderne 00:07:08
- Mise en forme des champs de formulaire 00:10:16
- On positionne l'oeil 00:05:07
- Ecriture du programme d'affichage du Password 1/2 00:07:01
- Ecriture du programme d'affichage du Password 1/2 00:06:13
- Réflexion: Montrer à l'internaute l'inactivité du bouton 00:11:18
- Réflexion: Informer l'internaute 00:11:34
-
Conclusion
- Conclusion 00:02:36
- Fichiers sourcestélécharger
- QCMaccéder
- Certificat
Formateur : Carl Brison
-
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.
-
Super exercice , qui est bien pensé et expliqué
-
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 !
-
Quel est le niveau requis pour suivre ce tuto ?débutant
-
Que contient le fichier source ?Le code source complet de l'exercice.
note moyenne
avis laissés