Dev Fron tEnd #6 :  Icônes dans les champs d'un formulaire
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00

TUTO Dev Fron tEnd #6 : Icônes dans les champs d'un formulaire

Carl Brison
9,00€

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

Vous souhaitez améliorer visuellement vos formulaires ? Les rendre plus modernes et offrir une meilleure expérience utilisateur ?
Voici un tuto vidéo qui va vous apprendre comment placer des icônes à l'intérieur d'un champ "input" de formulaire.
 

Au programme de ce tuto CSS ajouter des icônes dans des champs d'un formulaire

  • Tout se fera au travers du langage CSS, ainsi la manipulation des icônes sera totale.
  • Vous pourrez agrandir ces icônes, changer leur couleur, modifier leur changement d'état (...)
  • Un tuto sur la pratique du CSS, avec systématiquement des explications concrètes sur les propriétés CSS utilisées.
  • Nous ferons même un petit détours du côtés FlexBox.

Le cours se termine par un QCM pour valider vos acquis.
Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions. 
Les fichiers de travail sont fournis. 

Pour aller plus loin et tout savoir sur les formulaires, voici un Bundle complet sur ce sujet !

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Leçon 1
Création du formulaire en HTML
Leçon 2
CSS, mise en forme des différents champs
Leçon 3
CSS, lueur externe autour du champ qui a le focus
Leçon 4
Récupération des icons
Leçon 5
Mise en place des icons sur notre page web
Leçon 6
Mise en place des icons dans les champs de formulaire
Leçon 7
Un peu de style CSS pour les icons

Plan détaillé du cours

Leçon 1Création du formulaire en HTML
04m29s
Leçon 2CSS, mise en forme des différents champs
06m17s
Leçon 3CSS, lueur externe autour du champ qui a le focus
02m46s
Leçon 4Récupération des icons
06m26s
Leçon 5Mise en place des icons sur notre page web
03m30s
Leçon 6Mise en place des icons dans les champs de formulaire
05m15s
Leçon 7Un peu de style CSS pour les icons
04m53s
Leçon 8Positionnement du formulaire sur l'écran
07m20s
Leçon 9Ajouter un fond aux icons
08m55s
Leçon 10Mise en forme de la page web
07m02s
Leçon 11Conclusion
37s
Leçon 12Pour aller plus loin
02m42s

Aperçus

Avis des apprenants

Détail des avis
22
Apprenants
8
Commentaires
5/5
Note moyenne
5/5
8
4/5
0
3/5
0
2/5
0
1/5
0
Alain Tardif
Alain Tardif
Publié le 22/09/2023
Merci Carl pour ce tuto utile et bien expliqué comme à votre habitude. Validé 100% #icones-champs-formulaire
Carl Brison
Carl Brison
Merci beaucoup Alain ;-)
Eric Reynaud
Eric Reynaud
Publié le 05/04/2023
Merci beaucoup Carl ! J'ai vraiment adoré ce tuto (comme tous les autres tutos !!) Je continue mon apprentissage Front ! A bientôt, Eric.
Carl Brison
Carl Brison
Merci beaucoup pour votre fidélité ainsi que pour votre gentillesse, Eric ;-)
Johanna Bader
Johanna Bader
Publié le 25/08/2019
Apprendre avec un pro c'est génial !! Merci Carl
Carl Brison
Carl Brison
Merci BEAUCOUP Jonathan ;-)

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 du tuto

Quel est le niveau requis pour suivre ce tuto ?

débutant

Attendez ! 🤗

Accédez à plus de 1334 tutos gratuits

Notre politique de protection des données