JS moderne EXO #20 - Manipuler le label d'un champ de formulaire
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00
Sous-titres non disponibles

TUTO JS moderne EXO #20 - Manipuler le label d'un champ de formulaire

Carl Brison
11,00€
Acheter maintenant, payer plus tard. En savoir plus

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

Dans ce tuto vidéo dédié à la pratique du JavaScript moderne, nous allons manipuler les labels des champs d'un formulaire.
Pour cela nous allons réaliser ensemble un exercice pratique !

Dans ce tuto Manipuler le label d'un champ de formulaire

Nous aurons un formulaire avec des champs.
À l’intérieur des champs vides, des labels.
Lorsque l'utilisateur entrera dans le champ (input) pour saisir une information, alors le label du champ viendra se positionner sur la bordure du champ concerné.
Le label se remettra en position initiale si l'utilisateur ne saisit finalement pas de texte dans ce champ.

Ce tuto sera donc l'occasion de voir quelques techniques CSS et Javascript pour personnaliser vos formulaires et proposer une UX optimale à vos utilisateurs !

Pour suivre ce tutoriel dans de bonnes conditions, il est recommandé de connaître : Les bases du JavaScript moderne.
Un QCM vous sera fourni en fin de formation pour tester vos nouvelles compétences.
Bon tuto !

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Leçon 1
Mise en place du code HTML
Leçon 2
Mise en place des bases CSS
Leçon 3
Mise en forme des éléments du formulaire
Leçon 4
Mise en forme des labels
Leçon 5
Animation des labels grâce au JS moderne 1/2
Leçon 6
Animation des labels grâce au JS moderne 2/2
Leçon 7
Conclusion

Plan détaillé du cours

Leçon 1Mise en place du code HTML
06m34
Leçon 2Mise en place des bases CSS
09m26
Leçon 3Mise en forme des éléments du formulaire
11m33
Leçon 4Mise en forme des labels
10m35
Leçon 5Animation des labels grâce au JS moderne 1/2
05m38
Leçon 6Animation des labels grâce au JS moderne 2/2
03m53
Leçon 7Conclusion
01m13

Aperçus

Avis des apprenants

Détail des avis
7
Apprenants
1
Commentaire
5/5
Note moyenne
5/5
1
4/5
0
3/5
0
2/5
0
1/5
0
Valérie Arno
Valérie Arno
Publié le 08/11/2024
Merci pour ce petit tuto. Je ne connaissais pas l'événement blur. Et je ne pense pas non plus au focus. Je pense toujours "click". JavaScript n'est pas encore bien ancré dans mes neurones. Mais avec ce genre de tuto ça va mieux. :-)
Carl Brison
Carl Brison
Merci à vous, Valérie. En fait, pour faire simple et bien se rappeler, on a 1 écouteur d'événement (toujours le même) à qui on s'amuse à donner un événement (il suffit juste de connaitre les principaux et cela peut grandement améliorer l'expérience utilisateur)

Vos questions sur le cours

Avec quelle version de logiciel ce tuto est-il compatible ?

CSS 3

Que contient le fichier source ?

Le code source de ce tuto.

Quel est le niveau requis pour suivre ce tuto ?

débutant

Payer plus tard

Prix d'achat : 11,00 €
Pour payer plus tard, sélectionnez Klarna comme moyen de paiement lors du règlement.

Ajoutez des articles à votre panier

Sélectionnez Klarna lors du règlement

Recevez une autorisation

Payez dans 30 jours

Klarna : conditions d'utilisation du paiement différé.

Attendez ! 🤗

Accédez à plus de 1422 tutos gratuits

Notre politique de protection des données