Sommaire

Les formulaires en ligne CSS POUR LES FORMULAIRES:Formulaire en ligne

La classe .form-inline appliquée à l’élément <form> permet d’avoir les éléments du formulaire en ligne, c’est-à-dire les uns à côté des autres et non plus les uns sous les autres.

Deuxième particularité de cet exemple de formulaire, c’est l’utilisation de la classe .sr-only dans les éléments <label> qui permet de ne pas afficher l’élément qui utilise cette classe, les étiquettes dans cet exemple.

Voilà un formulaire simple utilisant ces classes :

<form class="form-inline" role="form"> 
  <div class="form-group"> 
    <label class="sr-only" for="prenom">Prénom</label> 
    <input type="email" class="form-control" id="prenom" 
placeholder="Votre prénom"> 
  </div> 
  <div class="form-group"> 
    <label class="sr-only" for="nom">Nom</label> 
    <input type="password" class="form-control" id="nom" 
placeholder="Votre nom"> 
  </div> 
  <button type="submit" class="btn btn-default">Envoyer</button> 
</form>

Voilà l’affichage obtenu : les étiquettes ...