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 !
Table des matières de cette formation CSS (durée : 1h12s)
-
- Création du formulaire en HTML gratuit 00:04:29
- CSS, mise en forme des différents champs 00:06:17
- CSS, lueur externe autour du champ qui a le focus 00:02:46
- Récupération des icons 00:06:26
- Mise en place des icons sur notre page web 00:03:30
- Mise en place des icons dans les champs de formulaire 00:05:15
- Un peu de style CSS pour les icons 00:04:53
- Positionnement du formulaire sur l'écran 00:07:20
- Ajouter un fond aux icons 00:08:55
- Mise en forme de la page web 00:07:02
- Conclusion 00:00:37
- Pour aller plus loin 00:02:42
- Fichiers sourcestélécharger
- QCMaccéder
- Certificat
Formateur : Carl Brison
-
Apprendre avec un pro c'est génial !! Merci Carl
-
Très joli formulaire grâce à Carl et le CSS3. Dans ce tuto, on apprend comment on peut rendre beaucoup plus attrayant un simple formulaire à l'état brut et surtout comment utiliser et ajouter des icônes dans les champs, l'objet de ce tuto. Merci Carl c'était cool :-)
-
Merci pour ce présent ! plus de soucis pour insérer les icônes dans les champs. @ bientot Carl.
-
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
note moyenne
avis laissés