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 !
Table des matières de cette formation CSS, Vue-JS (durée : 55m26s)
-
Présentation du travail
- Présentation gratuit 00:00:59
-
Mise en place du code VueJS
- Présentation du job gratuit 00:01:16
- Ecriture du code HTML 00:02:36
- Installation de la librairie Fontawesome 00:04:55
- Ecriture du code Vue 1/2 00:06:09
- Ecriture du code Vue 2/2 00:03:23
-
Mise en place du formulaire d'accès
- Ecriture du code HTML 00:05:06
- Ecriture du code CSS 1/3 00:05:30
- Ecriture du code CSS 2/3 00:07:11
- Ecriture du code CSS 3/3 00:05:27
-
Réunion des deux travaux
- Réunion des deux travaux 00:03:40
-
Conclusion
- Conclusion 00:01:05
-
Récupérer et installer la librairie VueJS
- Récupérer la librairie VueJS 00:04:20
- Installer la librairie VueJS 00:03:49
- Fichiers sourcestélécharger
- QCMaccéder
- Certificat
Formateur : Carl Brison
-
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.
-
Merci pour ce Tuto très concret !
-
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.
-
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.
note moyenne
avis laissés