Pour ce nouveau tuto vidéo dédié au framework Bulma, nous allons nous attarder sur la mise en forme des différents éléments qui constituent un formulaire HTML !
Au programme de ce tuto Bulma : les formulaires
Nous allons apprendre quelles sont les classes à utiliser pour mettre en forme :
- Les champs input,
- Les textarea,
- Les cases à cocher,
- Les boutons radio,
- Les menus déroulants.
Nous verrons également comment Bulma permet de mettre en forme les champs input de type file, ceux permettant d'uploader des fichiers.
Nous importerons la librairie fontawesome afin de placer des icônes au sein des champs de formulaire.
Après la théorie, la pratique. Pour conclure cette formation en ligne, je vous propose un petit exercice pratique .
Celui de créer un formulaire de contact en utilisant nos connaissances acquises jusqu'à maintenant !
Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions sur ce cours.Un QCM vous sera proposé en fin de formation et vous permettra de valider les connaissances théoriques acquises pendant la formation.
Pour aller plus loin avec Bulma
Pour accéder aux versions précédentes des autres cours dédiés à Bulma :
Table des matières de cette formation CSS (durée : 1h22m)
-
Les formulaires
- Le champ input 1/2 00:05:41
- Le champ input 2/2 00:04:33
- Label et champ input, mise en page 00:08:50
- Ajout d'icônes 00:09:20
- Le textarea gratuit 00:04:59
- Le select 00:05:00
- Ajout d'un icône au select 00:04:08
- La case à cocher 00:02:22
- Le bouton radio 00:01:49
- Le bouton de type file 1/2 00:06:04
- Le bouton de type file 2/2 00:04:45
-
Exercice
- Présentation du job gratuit 00:01:11
- Mise en place du header 00:06:19
- Mise en place du champ NOM 00:07:15
- Mise en place l'icone USER 00:02:07
- Mise en place du champ EMAIL 00:02:23
- Mise en place du textarea et du bouton 00:04:31
-
Conclusion
- Conclusion 00:01:15
- Fichiers sourcestélécharger
- QCMaccéder
- Certificat
Formateur : Carl Brison
-
Il me tarde la suite, car Bulma est très bien expliqué et vous donnez envie.
-
Avec quelle version de logiciel ce tuto est-il compatible ?Bulma
-
Que contient le fichier source ?Le code source de l'exercice.
-
Quel est le niveau requis pour suivre ce tuto ?débutant
note moyenne
avis laissé