Comment afficher et masquer un mot de passe avec VueJS
ERROR
00:00
00:00

TUTO Comment afficher et masquer un mot de passe avec VueJS

Carl Brison
15,00€

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

Dans ce tuto en vidéo nous allons apprendre à créer un formulaire d'accès. La singularité de ce formulaire se situe au niveau du champ "mot de passe".

En effet, nous verrons comment faire en sorte d'afficher en clair le mot de passe, au moment de la saisie. De nombreux sites et applications proposent cette fonctionnalité, qui permet à l'utilisateur de bien vérifier, avant de valider un formulaire, que le mot de passe saisi est le bon. Il s'agit donc d'une subtilité qui apportera à vos formulaires une meilleure expérience utilisateur.

Attention : nous ne nous intéresserons uniquement à la partie intégration du formulaire. Il n'y aura pas de partie PHP/SQL dans ce tuto !

Au programme de ce tuto ajouter une fonctionnalité d'affichage / masquage de mot de passe

Pour la création du formulaire nous utiliserons du HTML et du CSS. Nous ferons appel à la librairie Vue.JS, pour mettre en place un script qui va nous permettre d'afficher et de masquer le mot de passe saisi dans le champ de formulaire.

Pour suivre ce tutoriel dans de bonnes conditions, il est nécessaire d'avoir des bases en Vue.JS. En cas de besoin, je mets à votre disposition le tuto suivant : bien démarrer avec VueJS 2.
Le code complet du formulaire est fourni avec ce cours en ligne.

Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions.
Enfin, un QCM vous permettra de valider vos nouvelles compétences en VueJS !

Bon tuto !

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Chapitre 1
Présentation du travail
Chapitre 2
Mise en place du code VueJS
Chapitre 3
Mise en place du formulaire d'accès
Chapitre 4
Réunion des deux travaux
Chapitre 5
Conclusion
Chapitre 6
Récupérer et installer la librairie VueJS

Plan détaillé du cours

Chapitre 1 : Présentation du travail
59s
 
Leçon 1Présentation
Chapitre 2 : Mise en place du code VueJS
18m19s
 
Leçon 1Présentation du job
Leçon 2Ecriture du code HTML
Leçon 3Installation de la librairie Fontawesome
Leçon 4Ecriture du code Vue 1/2
Leçon 5Ecriture du code Vue 2/2
Chapitre 3 : Mise en place du formulaire d'accès
23m14s
 
Leçon 1Ecriture du code HTML
Leçon 2Ecriture du code CSS 1/3
Leçon 3Ecriture du code CSS 2/3
Leçon 4Ecriture du code CSS 3/3
Chapitre 4 : Réunion des deux travaux
03m40s
 
Leçon 1Réunion des deux travaux
Chapitre 5 : Conclusion
01m05s
 
Leçon 1Conclusion
Chapitre 6 : Récupérer et installer la librairie VueJS
08m09s
 
Leçon 1Récupérer la librairie VueJS
Leçon 2Installer la librairie VueJS

Aperçus

Avis des apprenants

Détail des avis
11
Apprenants
5
Commentaires
5/5
Note moyenne
5/5
5
4/5
0
3/5
0
2/5
0
1/5
0
Cédric Leman
Cédric Leman
Publié le 15/03/2023
Excellent tuto surtout avec toutes ces petites astuces CSS quant au fait d'utiliser vue js c'est pareil c'est simple tout comme le fait de le faire en vanilla JS. C'est ce genre de mini tuto qui nous font avancer, merci Carl.
Carl Brison
Carl Brison
Merci beaucoup pour votre commentaire très gentil, Cédric ;-)
Fabrice Chapier
Fabrice Chapier
Publié le 27/08/2020
Merci pour ce Tuto très concret !
Carl Brison
Carl Brison
Merci beaucoup pour votre commentaire ;-) A bientôt
Valérie Arno
Valérie Arno
Publié le 28/07/2020
Merci Carl pour ces nouveautés. Et comme toujours expliquées clairement. Voilà donc le secret de l'oeil ouvert/fermé ;-) très intéressant et utile pour ceux qui utilisent un système de compte utilisateur dans leur site. À bientôt.
Carl Brison
Carl Brison
Merci beaucoup pour votre commentaireValérie ;-) A bientôt, Carl.

Vos questions sur le cours

Avec quelles versions de logiciels ce tuto est-il compatible ?

CSS 3, Vue-JS

Quel est le niveau requis pour suivre ce tuto ?

débutant

Que contient le fichier source ?

Le code complet de ce tuto.

Attendez ! 🤗

Accédez à plus de 1330 tutos gratuits

Notre politique de protection des données