Forms

Présentation

Le module forms de Scampi est une copie quasi conforme de son homologue de Bootstrap, sa principale différence résidant dans le fait que les variables liées aux boutons sont rangées dans le module alors que dans Bootstrap elles sont dans le fichier général des settings.

Un prochain chantier de Scampi visera à améliorer ce module.

Utilisation

La présentation des éléments de formulaire passe presque uniquement par la personnalisation des variables et l’ajout de classes sur les éléments html.

Nous vous invitons à vous référer à la documentation spécifique de Bootstrap concernant les formulaires.

Ajouts Scampi

La class .form-duo affiche deux champs côte à côte au-delà d'une certaine largeur de page.

La classe .fieldset-discrete cache les bordures du fieldset.

La variable .$symbol-required définit une couleur au symbole utilisé pour indiquer les champs obligatoires ; la mise en oeuvre se fait en appliquant la class .symbol-required sur le span qui contient l'astérisque.

L'affichage en contexte des erreurs de formulaire se fait en plaçant une class has-error sur la div englobant le label et l'input et l'erreur liée avec un attribut aria-describedby.

exemple :

<form action="">
  <p>Les champs marqués d’un <span class="symbol-required">* </span>sont obligatoires.</p>
  <div class="form-check">
    <label for="form-check-input" class="form-check-label">
      <input type="checkbox" class="form-check-input" id="form-check-input" required>
      <span class="symbol-required">* </span>J’accepte les <a href="#">conditions générales d’utilisation</a>
    </label>
  </div>


  <div class="form-group has-error">
    <p id="loremOnError" class="error-desc">Le champ <em>Lorem ipsum</em> est obligatoire.</p>
    <label for="lorem">Lorem ipsum&nbsp;<span class="symbol-required">*</span>
    </label>
    <input aria-describedby="loremOnError" type="text" id="lorem" class="form-control" required aria-required="true">
  </div>

  <div class="form-duo">

    <div class="form-group">
      <label for="abonne">Numéro d’abonné</label>
      <input id="abonne" class="form-control" type="tel">
    </div>

    <div class="form-group">
      <label for="societe">Société / organisme</label>
      <input id="societe" class="form-control" type="text">
    </div>

  </div>
</form>

Démo

Les champs marqués d'un * sont obligatoires.

Input typés

Cette adresse ne sera jamais communiquée à d’autres que nous.

Selects

Formulaire de téléchargement

Poids maximum 1Mo.

Champ avec erreur

Le champ Lorem ipsum est obligatoire.

.form-duo

Ce champ est obligatoire.

Textarea

Checkboxes

Choix multiples
Choix multiples (inline)
Choix multiples avec fieldset non apparent

Radio

Choix unique
Choix unique (inline)

button .btn .btn-primary