Les formulaires en ligne

1. Objectifs

   • Comprendre comment réaliser un formulaire en ligne en Bootstrap 5.3, sans la classe .form-inline
   • Être capable d'aligner des champs sur une ligne avec la grille, les colonnes .col-auto ou les utilitaires flex
   • Être capable de créer des formulaires en ligne courants : recherche, connexion, newsletter, filtres
2.  

1. Présentation

   • Bootstrap permet trois dispositions principales de formulaires :
     • Formulaire vertical (par défaut) : chaque étiquette au-dessus de son champ ;
     • Formulaire en ligne: les champs, les étiquettes et le bouton sont alignés sur une seule ligne ;
     • Formulaire horizontal : étiquette et champ côte à côte, une ligne par champ.
   • Le formulaire en ligne est idéal pour les petits formulaires : barre de recherche, connexion rapide, inscription à une newsletter, filtres d'une liste.
   • Important : la classe .form-inline de Bootstrap 4 a été supprimée dans Bootstrap 5. On obtient désormais le même résultat avec :
     • la grille : .row, .row-cols-*-auto, .col-auto;
     • les utilitaires flex : .d-flex, .gap-*, .align-items-center.

2. Créer un formulaire en ligne avec la grille

   • C'est la méthode recommandée par la documentation de Bootstrap 5.3. Procédez comme suit :
     1. Ajoutez au <form> les classes .row et .row-cols-lg-auto: chaque enfant prend la largeur de son contenu à partir des écrans larges (lg).
     2. Ajoutez .g-3 pour l'espacement entre les éléments (gouttières).
     3. Ajoutez .align-items-center pour centrer verticalement champs, cases à cocher et bouton.
     4. Placez chaque élément dans un <div class="col-12">: il occupe toute la largeur sur mobile, puis se place en ligne sur grand écran.
     5. Masquez visuellement les étiquettes avec .visually-hidden (anciennement .visually-hidden) : elles restent lues par les lecteurs d'écran.

<form class="row row-cols-lg-auto g-3 align-items-center">
  <div class="col-12">
    <label class="visually-hidden" for="nom">Nom</label>
    <input type="text" class="form-control" id="nom" placeholder="Saisir votre nom">
  </div>
  <div class="col-12">
    <label class="visually-hidden" for="prenom">Prénom</label>
    <input type="text" class="form-control" id="prenom" placeholder="Saisir votre prénom">
  </div>
  <div class="col-12">
    <label class="visually-hidden" for="fichier">Télécharger un fichier</label>
    <input type="file" class="form-control" id="fichier">
  </div>
  <div class="col-12">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="accepter">
      <label class="form-check-label" for="accepter">J'accepte les conditions</label>
    </div>
  </div>
  <div class="col-12">
    <button type="submit" class="btn btn-primary">Soumettre</button>
  </div>
</form>

• Ce qui nous donne la figure suivante (sur grand écran).

• Sur mobile, les éléments s'empilent automatiquement les uns sous les autres : le formulaire reste lisible sans aucun code supplémentaire.
• Remplacez .row-cols-lg-auto par .row-cols-md-auto ou .row-cols-sm-auto pour passer en ligne dès les écrans moyens ou petits.

1. Créer un formulaire en ligne avec .col-auto

   • La classe .col-auto donne à une colonne la largeur de son contenu, sur toutes les tailles d'écran.
   • On peut ainsi mélanger des colonnes à largeur automatique et une colonne extensible (.col) qui occupe l'espace restant.
   • Ici, les étiquettes sont visibles et alignées grâce à .col-form-label.

<form class="row g-2 align-items-center">
  <div class="col-auto">
    <label for="email" class="col-form-label">E-mail</label>
  </div>
  <div class="col">
    <input type="email" id="email" class="form-control" placeholder="nom@exemple.com">
  </div>
  <div class="col-auto">
    <label for="mdp" class="col-form-label">Mot de passe</label>
  </div>
  <div class="col-auto">
    <input type="password" id="mdp" class="form-control" aria-describedby="mdpAide">
  </div>
  <div class="col-auto">
    <span id="mdpAide" class="form-text">8 à 20 caractères.</span>
  </div>
  <div class="col-auto">
    <button type="submit" class="btn btn-success">Connexion</button>
  </div>
</form>

1. Créer un formulaire en ligne avec les utilitaires flex

   • Une autre solution, très simple, consiste à transformer le <form> en conteneur flex :
     • .d-flex: aligne les enfants sur une ligne ;
     • .gap-2: ajoute un espace régulier entre eux ;
     • .flex-wrap: autorise le passage à la ligne si la place manque ;
     • .align-items-center: centre verticalement.
   • Pour empêcher un champ de prendre 100 % de la largeur, on peut utiliser .w-auto.

<form class="d-flex flex-wrap align-items-center gap-2">
  <label for="filiere" class="form-label mb-0">Filière :</label>
  <select id="filiere" class="form-select w-auto">
    <option selected>Toutes</option>
    <option value="web">Développement web</option>
    <option value="mobile">Développement mobile</option>
  </select>
  <label for="annee" class="form-label mb-0">Année :</label>
  <select id="annee" class="form-select w-auto">
    <option>1re année</option>
    <option>2e année</option>
  </select>
  <button type="submit" class="btn btn-outline-primary">Filtrer</button>
</form>

1. Masquer les étiquettes : .visually-hidden

   • Dans un formulaire en ligne, on masque souvent les étiquettes pour gagner de la place, en s'appuyant sur le placeholder.
   • Il ne faut jamais supprimer le <label>: on le masque visuellement avec .visually-hidden, afin qu'il reste accessible aux lecteurs d'écran.
   • La classe .visually-hidden de Bootstrap 4 est remplacée par .visually-hidden en Bootstrap 5.
   • Une alternative est l'attribut aria-label directement sur le champ.

<!-- Avec un label masqué -->
<label class="visually-hidden" for="ville">Ville</label>
<input type="text" class="form-control" id="ville" placeholder="Ville">

<!-- Avec aria-label -->
<input type="text" class="form-control" placeholder="Code postal" aria-label="Code postal">

1. Les groupes de saisie (input-group) en ligne

   • La classe .input-group permet d'accoler au champ un texte, une icône ou un bouton (à gauche ou à droite).
   • Le texte ajouté est placé dans un <span class="input-group-text">.
   • Combiné à la grille, l'input-group donne des formulaires en ligne compacts et lisibles.

<form class="row row-cols-lg-auto g-3 align-items-center">
  <div class="col-12">
    <label class="visually-hidden" for="utilisateur">Nom d'utilisateur</label>
    <div class="input-group">
      <span class="input-group-text">@</span>
      <input type="text" class="form-control" id="utilisateur" placeholder="Nom d'utilisateur">
    </div>
  </div>
  <div class="col-12">
    <label class="visually-hidden" for="montant">Montant</label>
    <div class="input-group">
      <input type="number" class="form-control" id="montant" placeholder="Montant">
      <span class="input-group-text">DT</span>
    </div>
  </div>
  <div class="col-12">
    <button type="submit" class="btn btn-primary">Valider</button>
  </div>
</form>

1. Exemples pratiques

   • Barre de recherche dans une barre de navigation: le formulaire porte .d-flex et role="search".

<nav class="navbar bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">MonSite</a>
    <form class="d-flex" role="search">
      <input class="form-control me-2" type="search" placeholder="Rechercher" aria-label="Rechercher">
      <button class="btn btn-outline-success" type="submit">Rechercher</button>
    </form>
  </div>
</nav>

• Inscription à une newsletter: un champ e-mail et un bouton accolés grâce à .input-group.

<form class="col-md-6">
  <label class="visually-hidden" for="newsletter">Adresse e-mail</label>
  <div class="input-group">
    <input type="email" class="form-control" id="newsletter" placeholder="Votre adresse e-mail" required>
    <button class="btn btn-primary" type="submit">S'abonner</button>
  </div>
  <div class="form-text">Une lettre par mois, désinscription en un clic.</div>
</form>

• Connexion rapide en haut de page, avec case « Se souvenir de moi » et champs de petite taille (.form-control-sm, .btn-sm).

<form class="row row-cols-md-auto g-2 align-items-center">
  <div class="col-12">
    <input type="email" class="form-control form-control-sm" placeholder="E-mail" aria-label="E-mail">
  </div>
  <div class="col-12">
    <input type="password" class="form-control form-control-sm" placeholder="Mot de passe" aria-label="Mot de passe">
  </div>
  <div class="col-12">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="souvenir">
      <label class="form-check-label" for="souvenir">Se souvenir de moi</label>
    </div>
  </div>
  <div class="col-12">
    <button type="submit" class="btn btn-sm btn-dark">Connexion</button>
  </div>
</form>

1. Récapitulatif : de Bootstrap 4 à Bootstrap 5.3

1. Bonnes pratiques

   • Gardez les formulaires en ligne courts (2 à 4 champs) : au-delà, préférez un formulaire vertical ou horizontal.
   • Conservez toujours un <label> (visible ou .visually-hidden) ou un aria-label pour chaque champ.
   • Testez le rendu sur mobile : la grille avec .col-12 empile les éléments proprement sur petit écran.
   • Utilisez le bon type d'input (email, search, password…) pour bénéficier du clavier adapté et de la validation du navigateur.