Des éléments de mise en forme FORMULAIRES:Mise en forme

1. Utiliser des étiquettes flottantes FORMULAIRES:Étiquettes flottantes

Les étiquettes des champs sont des éléments indispensables dans les formulaires. Mais pour gagner un peu de place, vous pouvez les faire « flotter » dans les champs de saisie. Pour cela, utilisez une boîte <div> avec la classe .form-floating. Dans chaque boîte <div>, placez l’élément input et l’élément label. Notez qu’il est préconisé d’insérer d’abord l’élément input.

Le dossier à télécharger pour cet exemple est nommé 07-Formulaires-10.

Voici le code de cet exemple :

<form role="form"> 
  <div class="form-floating mb-3"> 
    <input type="text" class="form-control" id="nom" placeholder="Votre nom"> 
    <label for="nom">Nom</label> 
  </div> 
  <div class="form-floating mb-3"> 
    <input type="text" class="form-control" id="prenom" placeholder="Votre prénom"> 
    <label for="prenom">Prénom</label> 
  </div> 
  <button type="submit"...