12,00 au lieu de 18,00

Tuto JS moderne, Exo #5 Afficher ou masquer un Mot de Passe avec JavaScript opération spéciale -33% jusqu'au 02 octobre, 23:59

12,00 au lieu de 18,00

  • Une formation vidéo de 1h39m
  • Téléchargement immédiat et visionnage illimité à vie
  • Satisfait ou remboursé
  • Fichiers sources inclus
JS moderne, Exo #5 Afficher ou masquer un Mot de Passe

ajouter ce cours aux favoris retirer ce cours des favoris

Retrouvez cette formation dans le bundle :

Bundle 10 exercices 100% frontend HTML, CSS et JS

-30% de réduction

voir les détails du bundle


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



Formateur : Carl Brison

Carl Brison a publié 321 tutoriels et obtenu une note moyenne de 4,9/5 sur 18 835 tutoriels vendus. Carl Brison est un formateur certifié tuto.com. Voir les autres formations de Carl Brison

5,0
note moyenne

5
avis laissés
5 étoiles
5
4 étoiles
0
3 étoiles
0
2 étoiles
0
1 étoile
0
  • 5
    avis de devfront_45 laissé 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.
    "Merci beaucoup pour votre commentaire très gentil ;-)"

  • 5
    avis de membre-7129-6122 laissé le 21/10/2022
    Super exercice , qui est bien pensé et expliqué
    "C'est très gentil, merci beaucoup ;-)"

  • 5
    avis de pgir laissé 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 !
    "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)"

  • Quel est le niveau requis pour suivre ce tuto ?
    débutant
  • Que contient le fichier source ?
    Le code source complet de l'exercice.
French Days automne 2023
accédez à plus de 1449 tuto gratuits


non, je ne veux pas me former gratuitement

voir notre politique de protection des données