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

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

5,0
note moyenne

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


non, je ne veux pas me former gratuitement

voir notre politique de protection des données