Sommaire

La mise en forme des formulaires

1. L’aide à l’utilisation

De manière tout à fait classique, nous pouvons afficher une aide à l’utilisation des formulaires. Le texte de l’aide utilise la classe .help-text et un identifiant unique lié à l’objet utilisé.

Voici le code HTML utilisé dans cet exemple :

<form...> 
  <div class="row"> 
     <div class="medium-12 columns"> 
        <label>Mot de passe 
           <input type="password" aria-describedby="aidemotdepasse"> 
        </label> 
        <p class="help-text" id="aidemotdepasse">Votre mot de passe doit comporter 8 caractères au minimum</p> 
     </div> 
  </div> 
</form>

Le fichier de cet exemple à télécharger est Chapitre 05 / 05-forms-d1.html.

Voici son affichage :

images/C05-006.png

Voici les propriétés utilisées par la classe .help-text :

.help-text { 
  margin-top: -0.5rem; 
  font-size: 0.8125rem; 
  font-style: italic; 
  color: #333; 
}

2. L’alignement des étiquettes

Nous avons la possibilité de gérer l’alignement des étiquettes des objets des formulaires avec les classes suivantes :

  • .text-right permet d’aligner l’étiquette à ...