Bootstrap facilite la création de formulaires attrayants et adaptables en offrant une collection de classes de contrôle de formulaire et de composants. Ces classes de contrôle de formulaire peuvent être utilisées pour styliser de manière cohérente les champs de saisie, les cases à cocher, les boutons radio, les sélecteurs, les listes déroulantes et les zones de texte sur l'ensemble du site web.

Classes de contrôle de formulaire communes

classe form-control

Cette classe est utilisée pour styliser divers éléments de formulaire, y compris les champs de saisie, les zones de texte et les listes déroulantes de sélection. Lorsqu'elle est appliquée, elle garantit que les éléments de formulaire sont réactifs et visuellement cohérents sur différents appareils et tailles d'écran.

Caractéristiques clés de la classe form-control

• Conception Réactive : Les éléments de formulaire stylisés avec form-control ajustent automatiquement leur largeur pour remplir l'espace disponible dans leur conteneur ;
• Style Uniforme : En appliquant form-control, les éléments de formulaire reçoivent un style cohérent, y compris les bordures, le rembourrage et les propriétés de police ;
• États de Focus et de Survol : form-control fournit un retour visuel aux utilisateurs en changeant l'apparence des éléments de formulaire lorsqu'ils sont survolés ou focalisés.

classes form-check

• form-check : Cette classe stylise les entrées de cases à cocher et de boutons radio pour les afficher en ligne et appliquer un style cohérent ;
• form-check-input : Appliquée aux éléments d'entrée de cases à cocher et de boutons radio dans un conteneur form-check. Cette classe garantit un style cohérent des éléments d'entrée ;
• form-check-label : Utilisée pour styliser l'étiquette associée aux entrées de cases à cocher et de boutons radio. Elle garantit un style cohérent des étiquettes et aide à maintenir l'alignement avec les éléments d'entrée correspondants.

Système de grille pour la mise en page des formulaires

Le système de grille de Bootstrap offre un outil puissant pour organiser les éléments de formulaire en dispositions multi-colonnes. En utilisant des classes de grille telles que col-md-6, col-lg-4, et d'autres, les développeurs peuvent organiser les éléments de formulaire en dispositions réactives et flexibles qui s'adaptent parfaitement à diverses tailles d'écran et appareils.

Caractéristiques principales :

• Colonnes réactives : Les classes de grille permettent aux développeurs de définir la largeur des éléments de formulaire à différents points de rupture. Par exemple, col-md-6 spécifie que la colonne doit occuper la moitié de la largeur de son conteneur sur les écrans de taille moyenne et plus grands. De même, col-lg-4 spécifie une largeur de colonne d'un tiers sur les grands écrans ;
• Flexibilité : Nous pouvons mélanger et assortir les classes de grille pour créer des mises en page de formulaire complexes ;
• Optimisé pour le mobile : Le système de grille de Bootstrap est intrinsèquement mobile-first, garantissant que les mises en page des formulaires sont superbes sur les petits écrans par défaut.

Résultat du comportement de la grille de formulaire réactive

Styles de Validation de Formulaire

Les styles de validation de formulaire fournissent un retour visuel aux utilisateurs sur la validité de leur saisie. Ces styles incluent des indicateurs pour les états de succès, d'erreur et d'avertissement, facilitant la compréhension par les utilisateurs de savoir si leur saisie répond aux critères requis.

Dans l'exemple fourni :

• La classe needs-validation est ajoutée pour activer les styles de validation de Bootstrap ;
• L'attribut novalidate est utilisé pour désactiver la validation native du formulaire par le navigateur ;
• Le champ de saisie pour l'adresse e-mail a l'attribut required, le rendant obligatoire ;
• Les classes valid-feedback et invalid-feedback sont utilisées pour fournir des messages de retour pour les entrées valides et invalides, respectivement ;
• De plus, JavaScript est utilisé pour empêcher la soumission du formulaire s'il y a des champs invalides et pour appliquer la classe was-validated au formulaire.