Bootstrap facilite la création de formulaires attrayants et adaptatifs en proposant un ensemble de classes et de composants pour le contrôle des formulaires. Ces classes de contrôle de formulaire permettent de styliser de manière cohérente les champs de saisie, cases à cocher, boutons radio, listes déroulantes, menus déroulants et zones de texte sur l'ensemble du site web.

Classes courantes de contrôle de formulaire

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. 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.

Principales caractéristiques 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, incluant 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 modifiant l'apparence des éléments de formulaire lorsqu'ils sont survolés ou sélectionnés.

classes form-check

• form-check : Cette classe stylise les cases à cocher et les 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 type case à cocher et bouton radio à l'intérieur d'un conteneur form-check. Cette classe assure un style cohérent des éléments d'entrée ;
• form-check-label : Utilisée pour styliser l'étiquette associée aux cases à cocher et aux 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 disposer les éléments de formulaire dans des mises en page réactives et flexibles qui s'adaptent parfaitement à différentes 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 selon différents points de rupture. Par exemple, col-md-6 indique que la colonne doit occuper la moitié de la largeur de son conteneur sur les écrans de taille moyenne et plus. De même, col-lg-4 spécifie une largeur de colonne d'un tiers sur les grands écrans ;
• Flexibilité : Possibilité de combiner différentes classes de grille pour créer des mises en page de formulaires complexes ;
• Optimisé pour le mobile : Le système de grille de Bootstrap est conçu en priorité pour le mobile, garantissant que les mises en page des formulaires sont adaptées par défaut aux petits écrans.

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 concernant 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 l’utilisateur du respect ou non des 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 navigateur ;
• Le champ de saisie pour l'adresse e-mail possède l'attribut required, le rendant obligatoire ;
• Les classes valid-feedback et invalid-feedback sont utilisées pour fournir des messages de retour pour les saisies valides et invalides, respectivement ;
• De plus, JavaScript est utilisé pour empêcher la soumission du formulaire en cas de champs invalides et pour appliquer la classe was-validated au formulaire.