18,00

Tuto JS moderne, Exo #5 Afficher ou masquer un Mot de Passe avec JavaScript

18,00

  • Une formation vidéo de 1h39m
  • Téléchargement immédiat et visionnage illimité à vie
  • Satisfait ou remboursé
  • Fichiers sources inclus
  • Découvrez pourquoi vous former avec Tuto.com
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

-28% 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é 274 tutoriels et obtenu une note moyenne de 4,9/5 sur 17 390 tutoriels vendus. Carl Brison est un formateur certifié tuto.com. Voir les autres formations de Carl Brison

5,0
note moyenne

3
avis laissés
5 étoiles
3
4 étoiles
0
3 étoiles
0
2 étoiles
0
1 étoile
0
  • 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)"

  • 5
    avis de zolb laissé le 07/07/2021
    Super, comme toujours. Pour l'œil, le code est un peu plus compact avec un (double) toggle. Et pour l'info, j'ai préféré écouter pointerover (et pointerout).

  • 5
    avis de richardanctil laissé le 08/05/2021
    J'attendais vraiment ce tuto en javascript sans bibliothèque, bien content, Merci

  • Quel est le niveau requis pour suivre ce tuto ?
    débutant
  • Que contient le fichier source ?
    Le code source complet de l'exercice.
Parcours Developpeur Front End
accédez à plus de 1433 tuto gratuits


non, je ne veux pas me former gratuitement

voir notre politique de protection des données