Ce tutoriel Bootstrap 5 vous montre comment faire un formulaire. Nous verrons également comment faire un formulaire « responsive design » grâce aux classes de Bootstrap.
>> Comment personnaliser les couleurs de Bootstrap 5 ?
La vidéo commence par une introduction où l’animateur souhaite la bienvenue aux spectateurs et indique que la formation sur Bootstrap se poursuit. Il propose un lien vers une playlist pour ceux qui souhaitent revoir les leçons précédentes. Le sujet du jour porte sur la création de formulaires. L’animateur crée un fichier nommé « 21-formulaire.html » et commence par ajouter un élément div avec la classe container. Il structure ensuite le formulaire en ajoutant une balise form, puis une div contenant une étiquette (label) et un champ de saisie (input).
Création des Champs de Saisie
Il propose de demander à l’utilisateur de saisir son nom, son email et un message. Il crée un champ input de type texte pour le nom, avec les attributs name et id égaux à « name ». Ensuite, il duplique ce champ pour créer un champ email, en ajustant les attributs et le type à email. Enfin, il crée un champ pour le message avec une étiquette et un champ textarea avec les mêmes attributs name et id égaux à « message ».
Améliorations de la Mise en Page avec Bootstrap
Pour améliorer la mise en page, il utilise Bootstrap en ajoutant des classes aux éléments HTML. Les étiquettes (label) reçoivent la classe form-label et les champs de saisie (input et textarea) reçoivent la classe form-control. Il ajoute également des marges en utilisant des classes telles que py-3 pour aérer l’interface. Il montre comment ajuster la taille des champs avec les classes form-control-lg pour les agrandir et form-control-sm pour les réduire.
Désactivation d’un Champ et Création d’un Formulaire Plus Complet
L’animateur montre comment désactiver un champ en ajoutant l’attribut disabled à l’input du nom, rendant ainsi le champ grisé et non modifiable. Ensuite, il met le premier formulaire en commentaire pour créer un formulaire plus complet et responsive. Il commence par structurer à nouveau le formulaire en utilisant des div avec les classes Bootstrap appropriées pour disposer les éléments en ligne.
Disposition en Ligne et Ajout d’Autres Champs
Il ajuste la disposition des champs pour qu’ils apparaissent côte à côte en utilisant la classe row sur la balise form et col-md-6 sur les div contenant les champs du nom et de l’email. Il ajoute ensuite un champ pour l’adresse avec une largeur pleine en utilisant la classe col-md-12. Il continue en ajoutant des champs pour le code postal et la ville, ajustant les largeurs respectives des champs avec des classes Bootstrap pour un agencement optimal.
Ajout du Bouton d’Envoi et Finalisation
Pour conclure le formulaire, l’animateur ajoute un bouton d’envoi (submit) avec les classes btn et btn-primary pour un style Bootstrap bleu. Il ajoute des espaces entre les champs en utilisant la classe g-3 sur la row pour une meilleure aération. Il vérifie l’apparence du formulaire en mode responsive, confirmant que les champs s’alignent correctement sur les petits et grands écrans.
Finalisation et Conclusion
L’animateur explique comment utiliser la grille de Bootstrap pour créer des formulaires esthétiques et bien organisés, adaptés à différents formats d’écran. En ajustant les classes des colonnes, il est possible de créer une interface utilisateur agréable et responsive, que ce soit pour des petits écrans ou des grands écrans.
Pour conclure, l’animateur remercie les spectateurs et annonce que c’est la fin de la vidéo. Il invite les spectateurs à le retrouver prochainement pour une nouvelle vidéo, laissant entendre que la formation sur Bootstrap continuera avec d’autres sujets intéressants.
La vidéo se termine en offrant une vue d’ensemble complète de la création d’un formulaire avec Bootstrap, depuis la mise en place des éléments HTML de base jusqu’à l’application des classes Bootstrap pour une meilleure présentation et un design responsive.
