Bootstrap - Disposition des formulaires : Guide pour les débutants

Bonjour à tous, aspirants développeurs web ! Je suis ravi de vous guider dans cette incroyable aventure dans le monde des disposition des formulaires Bootstrap. En tant que quelqu'un qui enseigne l'informatique depuis plus d'une décennie, j'ai vu des centaines d'étudiants s'illuminer lorsqu'ils réalisent à quel point Bootstrap peut être puissant et convivial. Alors, mettons-nous à l'ouvrage et découvrons les secrets pour créer des formulaires magnifiques et réactifs !

Les bases de la disposition des formulaires

Avant de commencer à coder, imaginons que nous sommes des architectes concevant une maison. Comme une maison a besoin d'une fondation et d'une structure solide, nos formulaires ont besoin d'un plan bien pensé. Bootstrap nous fournit les outils pour construire ces disposition efficacement et magnifiquement.

Le conteneur : la fondation de votre formulaire

Chaque grand formulaire commence par un conteneur. Dans Bootstrap, nous utilisons la classe container pour créer un conteneur de largeur fixe et réactif. Voici un exemple simple :

<div class="container">
<form>
<!-- Les éléments du formulaire iront ici -->
</form>
</div>

Ce conteneur agit comme le terrain pour notre maison. Il donne à notre formulaire un espace défini pour vivre et aide à la réactivité sur différents tailles d'écran.

Utilitaires : Le couteau suisse de la conception de formulaires

Les utilitaires Bootstrap sont comme les multi-outils du design web. Ce sont de petites classes puissantes qui peuvent rapidement résoudre des problèmes de disposition courants. Jetons un œil à quelques utilitaires essentiels pour la disposition des formulaires :

Utilitaires d'espacement

Les utilitaires d'espacement nous aident à ajouter des marges et des paddings à nos éléments de formulaire. Voici un tableau de référence rapide :

Classe d'utilitaire	But
m-*	Ajoute une marge
p-*	Ajoute un padding
mt-*, mb-*, ms-*, me-*	Ajoute une marge en haut, en bas, à gauche (start) et à droite (end)
pt-*, pb-*, ps-*, pe-*	Ajoute un padding en haut, en bas, à gauche (start) et à droite (end)

Voyons ces utilitaires en action :

<form>
<div class="mb-3">
<label for="name" class="form-label">Nom</label>
<input type="text" class="form-control" id="name">
</div>
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email">
</div>
</form>

Dans cet exemple, mb-3 ajoute une marge en bas de chaque groupe de formulaire, giving nos éléments un peu d'espace pour respirer.

Grille de formulaire : Construction de la structure

Maintenant que nous avons notre fondation et nos outils, mettons-nous à construire la structure de notre formulaire en utilisant le système de grille de Bootstrap. Le système de grille est basé sur une disposition en 12 colonnes, que nous pouvons utiliser pour créer des designs réactifs.

Disposition de base de la grille

Voici un exemple d'une disposition de formulaire en deux colonnes simple :

<form>
<div class="row">
<div class="col-md-6">
<label for="firstName" class="form-label">Prénom</label>
<input type="text" class="form-control" id="firstName">
</div>
<div class="col-md-6">
<label for="lastName" class="form-label">Nom</label>
<input type="text" class="form-control" id="lastName">
</div>
</div>
</form>

Dans cet exemple, nous utilisons row pour créer un groupe horizontal de colonnes, et col-md-6 pour spécifier que chaque colonne doit prendre la moitié de la largeur sur les écrans de taille moyenne et plus grands.

Espaces intercolonnaires : Donner un peu d'air à votre formulaire

Les espaces intercolonnaires sont les espaces entre les colonnes dans notre système de grille. Par défaut, Bootstrap ajoute des marges négatives aux rangées et des paddings aux colonnes pour créer ces espaces intercolonnaires. Cependant, nous pouvons les ajuster en utilisant des classes d'espaces intercolonnaires.

Voici un exemple avec des espaces intercolonnaires personnalisés :

<form>
<div class="row g-3">
<div class="col-md-6">
<label for="firstName" class="form-label">Prénom</label>
<input type="text" class="form-control" id="firstName">
</div>
<div class="col-md-6">
<label for="lastName" class="form-label">Nom</label>
<input type="text" class="form-control" id="lastName">
</div>
</div>
</form>

La classe g-3 ajoute une taille d'espace intercolonnaire de 3 (1rem) entre nos colonnes, giving le formulaire un peu plus d'espace pour respirer.

Formulaires horizontaux : Une perspective différente

Parfois, nous voulons que nos étiquettes soient côte à côte avec nos champs d'entrée. C'est là que les formulaires horizontaux entrent en jeu. Créons-en un :

<form>
<div class="row mb-3">
<label for="email" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email">
</div>
</div>
<div class="row mb-3">
<label for="password" class="col-sm-2 col-form-label">Mot de passe</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="password">
</div>
</div>
</form>

Dans cet exemple, nous utilisons col-sm-2 pour les étiquettes et col-sm-10 pour les champs d'entrée, creating une belle disposition horizontale sur les petits écrans et plus grands.

Taille des étiquettes de formulaire horizontal : Trouver le bon ajustement

Parfois, nous devons ajuster la taille de nos étiquettes dans les formulaires horizontaux. Bootstrap rend cela facile avec ses classes de taille. Voici comment nous pouvons créer un formulaire avec différentes tailles d'étiquettes :

<form>
<div class="row mb-3">
<label for="email" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control form-control-sm" id="email">
</div>
</div>
<div class="row mb-3">
<label for="name" class="col-sm-2 col-form-label">Nom</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name">
</div>
</div>
<div class="row mb-3">
<label for="message" class="col-sm-2 col-form-label col-form-label-lg">Message</label>
<div class="col-sm-10">
<input type="text" class="form-control form-control-lg" id="message">
</div>
</div>
</form>

Ici, nous utilisons col-form-label-sm, col-form-label, et col-form-label-lg pour créer des tailles d'étiquettes petites, par défaut et grandes respectivement.

Taille des colonnes : Ajuster votre formulaire

Le système de grille de Bootstrap nous permet de spécifier des largeurs exactes des colonnes. Cela est particulièrement utile lorsque nous avons besoin d'un contrôle précis sur notre disposition de formulaire. Voici un exemple :

<form>
<div class="row">
<div class="col-2">
<input type="text" class="form-control" placeholder="Ville">
</div>
<div class="col-3">
<input type="text" class="form-control" placeholder="État">
</div>
<div class="col-7">
<input type="text" class="form-control" placeholder="Code Postal">
</div>
</div>
</form>

Dans cet exemple, nous utilisons col-2, col-3, et col-7 pour créer un formulaire où les champs prennent des portions spécifiques de la largeur disponible.

Ajustement automatique : Laissez Bootstrap faire le calcul

Parfois, nous voulons que nos champs de formulaire s'ajustent automatiquement en fonction de leur contenu. La fonction d'ajustement automatique de Bootstrap rend cela possible. Voici comment cela fonctionne :

<form class="row gy-2 gx-3 align-items-center">
<div class="col-auto">
<label class="visually-hidden" for="autoSizingInput">Nom</label>
<input type="text" class="form-control" id="autoSizingInput" placeholder="Jane Doe">
</div>
<div class="col-auto">
<label class="visually-hidden" for="autoSizingSelect">Préférence</label>
<select class="form-select" id="autoSizingSelect">
<option selected>Choisir...</option>
<option value="1">Un</option>
<option value="2">Deux</option>
<option value="3">Trois</option>
</select>
</div>
<div class="col-auto">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="autoSizingCheck">
<label class="form-check-label" for="autoSizingCheck">
Se souvenir de moi
</label>
</div>
</div>
<div class="col-auto">
<button type="submit" class="btn btn-primary">Soumettre</button>
</div>
</form>

Dans cet exemple, la classe col-auto permet à chaque colonne de s'ajuster en fonction de son contenu. Les classes gy-2 et gx-3 ajoutent des espaces verticaux et horizontaux, tandis que align-items-center centre verticalement le contenu dans chaque colonne.

Exemple complet : Mettre tout ensemble

Maintenant que nous avons couvert tous ces concepts, mettons-les ensemble dans un formulaire plus complexe :

<div class="container">
<form class="mt-4">
<div class="row mb-3">
<div class="col-md-6">
<label for="firstName" class="form-label">Prénom</label>
<input type="text" class="form-control" id="firstName">
</div>
<div class="col-md-6">
<label for="lastName" class="form-label">Nom</label>
<input type="text" class="form-control" id="lastName">
</div>
</div>
<div class="row mb-3">
<div class="col-md-8">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email">
</div>
<div class="col-md-4">
<label for="phone" class="form-label">Téléphone</label>
<input type="tel" class="form-control" id="phone">
</div>
</div>
<div class="row mb-3">
<div class="col-md-6">
<label for="address" class="form-label">Adresse</label>
<input type="text" class="form-control" id="address">
</div>
<div class="col-md-3">
<label for="city" class="form-label">Ville</label>
<input type="text" class="form-control" id="city">
</div>
<div class="col-md-3">
<label for="zip" class="form-label">Code Postal</label>
<input type="text" class="form-control" id="zip">
</div>
</div>
<div class="row mb-3">
<div class="col-12">
<label for="message" class="form-label">Message</label>
<textarea class="form-control" id="message" rows="3"></textarea>
</div>
</div>
<div class="row">
<div class="col-12">
<button type="submit" class="btn btn-primary">Soumettre</button>
</div>
</div>
</form>
</div>

Cet exemple combine beaucoup des concepts que nous avons discutés : conteneur, disposition de grille, espaces intercolonnaires, et design réactif. Il crée un formulaire qui looks great sur les appareils de bureau et mobiles.

Formulaires en ligne : Compact et efficace

Pour les formulaires plus simples ou lorsque l'espace est limité, les formulaires en ligne peuvent être une solution idéale. Voici comment créer un :

<form class="row row-cols-lg-auto g-3 align-items-center">
<div class="col-12">
<label class="visually-hidden" for="inlineFormInputGroupUsername">Nom d'utilisateur</label>
<div class="input-group">
<div class="input-group-text">@</div>
<input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Nom d'utilisateur">
</div>
</div>

<div class="col-12">
<label class="visually-hidden" for="inlineFormSelectPref">Préférence</label>
<select class="form-select" id="inlineFormSelectPref">
<option selected>Choisir...</option>
<option value="1">Un</option>
<option value="2">Deux</option>
<option value="3">Trois</option>
</select>
</div>

<div class="col-12">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="inlineFormCheck">
<label class="form-check-label" for="inlineFormCheck">
Se souvenir de moi
</label>
</div>
</div>

<div class="col-12">
<button type="submit" class="btn btn-primary">Soumettre</button>
</div>
</form>

Ce formulaire en ligne utilise row-cols-lg-auto pour ajuster automatiquement les colonnes sur les écrans large, creating un layout compact et horizontal.

Et voilà, les amis ! Nous avons parcouru le monde des disposition des formulaires Bootstrap, des concepts de base aux techniques plus avancées. Souvenez-vous, la pratique rend parfait, donc n'ayez pas peur d'expérimenter avec ces layouts et de les rendre vos propres. Bon codage, et que vos formulaires soient toujours réactifs et conviviaux !

Credits: Image by storyset