Forms

Présentation

Le module forms de Scampi reprend l’essentiel du code du module forms de Bootstrap 4 et l'enrichit.

Ce qui n’est pas repris :

  • form-grid (Scampi n'embarque pas de système de grille pour laisser le choix à l'utilisateur de son système préféré)
  • form-plaintext
  • custom-form

Ce qui est ajouté :

  • forms-required : pour afficher la mention d'un champ obligatoire
  • forms-fieldset-discrete : pour supprimer les présentations standards des fieldsets
  • forms-error : pour afficher les erreurs en contexte

Le module est composé d'un fichier maître (_forms.scss) dans lequel sont définies toutes les variables et où l'on peut commenter ou décommenter l'import de styles complémentaires selon les besoins du projet. En tout état de cause le partial _styles-forms.scss est indispensable.

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.

Documentation des feuilles de style complétant _styles-forms.scss :

  • forms-error : nos ajouts au module de Bootstrap pour l'affichage des messages d'erreur globaux ou en contexte
  • forms-inline : affichage de champs en ligne
  • forms-input-group : affichage de champs groupés
  • forms-required : ajout au module de Bootstrap pour afficher la mention d'un champ obligatoire
  • forms-fieldset-discrete : ajout au module de Bootstrap pour afficher un fieldset sans bordures
  • forms-size : mise à dispo de variations des tailles

Exemples pour les éléments de base

Styles appliqués par le fichier forms/_style-forms.scss.

Input text

<div class="form-group">
  <label for="nom">Nom</label>
  <input type="text" class="form-control" id="nom">
</div>

Input email

<div class="form-group">
  <label for="email">Adresse electronique (ex. : nom.prenom@example.org)</label>
  <input type="email" class="form-control" id="email">
</div>

Select

<div class="form-group">
  <label for="select">Select</label>
  <select class="form-control" id="select">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
  </select>
</div>

Select avec optgroup

<div class="form-group">
  <label for="select_element_multi">Select à groupes d’options</label>
  <select id="select_element_multi" class="form-control">
    <option label="non défini" selected disabled>Choisir</option>
    <optgroup label="Option Group 1">
      <option value="1">Option 1.1</option>
      <option value="2">Option 1.2</option>
      <option value="3">Option 1.3</option>
      <option value="4">Option 1.4</option>
    </optgroup>
    <optgroup label="Option Group 2">
      <option value="1">Option 2.1</option>
      <option value="2">Option 2.2</option>
      <option value="3">Option 2.3</option>
      <option value="4">Option 2.4</option>
    </optgroup>
  </select>
</div>

Select multiple

<div class="form-group">
  <label for="selectMultiple">Example multiple select</label>
  <select multiple class="form-control" id="selectMultiple">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
  </select>
</div>

Checkboxes

<fieldset class="form-group">
  <legend>Choix multiples</legend>

  <div class="form-check">
    <label for="checkbox_01" class="form-check-label">
      <input class="form-check-input" type="checkbox" id="checkbox_01">
      choix 1
    </label>
  </div>
  <div class="form-check">
    <label for="checkbox_02" class="form-check-label">
      <input class="form-check-input" type="checkbox" id=" checkbox_02">
      choix 2
    </label>
  </div>
  <div class="form-check">
    <label for="checkbox_03" class="form-check-label">
      <input class="form-check-input" type="checkbox" id="checkbox_03">
      choix 3
    </label>
  </div>
  <div class="form-check disabled">
    <label for="checkbox_04" class="form-check-label">
      <input type="checkbox" class="form-check-input" disabled id="checkbox_04">
      Option non activable
    </label>
  </div>
</fieldset>

<fieldset class="form-group">
  <legend>Choix multiples (inline)</legend>

  <label for="checkbox_05" class="form-check-inline">
    <input class="form-check-input" type="checkbox" value="" id="checkbox_05">
    choix 1
  </label>
  <label for="checkbox_06" class="form-check-inline">
    <input class="form-check-input" type="checkbox" value="" id="checkbox_06">
    choix 2
  </label>
  <label for="checkbox_07" class="form-check-inline">
    <input class="form-check-input" type="checkbox" value="" id="checkbox_07">
    choix 3
  </label>
</fieldset>

Radio

<fieldset class="form-group">
  <legend>Choix unique</legend>

  <div class="form-check">
    <label for="radio_01" class="form-check-label">
      <input class="form-check-input" type="radio" name="choix-unique" value="value-1" id="radio_01">
      choix 1
    </label>
  </div>
  <div class="form-check">
    <label for="radio_02" class="form-check-label">
      <input class="form-check-input" type="radio" name="choix-unique" value="value-2" id="radio_02">
      choix 2
    </label>
  </div>
  <div class="form-check">
    <label for="radio_03" class="form-check-label">
      <input class="form-check-input" type="radio" name="choix-unique" value="value-3" id="radio_03">
      choix 3
    </label>
  </div>
  <div class="form-check disabled">
    <label for="radio_04" class="form-check-label">
      <input class="form-check-input" type="radio" name="choix-unique" value="value-4" disabled id="radio_04">
      Option non activable
    </label>
  </div>

</fieldset>

<fieldset class="form-group">
  <legend>Choix unique (inline)</legend>

  <label for="radio_08" class="form-check-inline">
    <input class="form-check-input" type="radio" name="choix-unique-2" value="value-1" id="radio_08">
    choix 1
  </label>
  <label for="radio_09" class="form-check-inline">
    <input class="form-check-input" type="radio" name="choix-unique-2" value="value-2" id="radio_09">
    choix 2
  </label>
  <label for="radio_10" class="form-check-inline">
    <input class="form-check-input" type="radio" name="choix-unique-2" value="value-3" id="radio_10">
    choix 3
  </label>
</fieldset>

<div class="form-check">
  <label for="checkbox_11" class="form-check-label">
    <input type="checkbox" class="form-check-input" required id="checkbox_11">
    J’ai bien lu <a href="#">les conditions</a>, je coche avant d’envoyer.
  </label>
</div>

Textarea

<div class="form-group">
  <label for="exampleFormControlTextarea1">Example textarea</label>
  <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>

Input file

<div class="form-group">
  <label for="exampleFormControlFile1">Example file input</label>
  <input type="file" class="form-control-file" id="exampleFormControlFile1">
</div>

Range input

<div class="form-group">
  <label for="formControlRange">Example d’input range</label>
  <input type="range" class="form-control-range" id="formControlRange">
</div>

Form-check

<div class="form-group form-check">
  <input type="checkbox" class="form-check-input" id="exampleCheck1">
  <label class="form-check-label" for="exampleCheck1">Coche moi</label>
</div>

Help text

<div class="form-group">
  <label for="inputPassword5">Mot de passe</label>
  <input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
  <small id="passwordHelpBlock" class="form-text text-muted">
    Le mot de passe doit comporter un minimum de 8 caractères avec : au moins une lettre en majuscule, au moins une lettre en minuscule, au moins un chiffre.
  </small>
</div>

Lecture seule

L’attribut readonly empeche la modification du champ par l’utilisateur.

Si une valeur doit être affichée, il faut la placer dans l’attribut value.

<div class="form-group">
  <input class="form-control" type="text" readonly value="Input text en lecture seule">
</div>

Démo

Input text

Input email

Select

Select multiple

Checkboxes

Choix multiples
Choix multiples (inline)

Radio

Choix unique
Choix unique (inline)

Textarea

Input file

Range input

form-check

Texte d'aide

Le mot de passe doit comporter un minimum de 8 caractères avec : au moins une lettre en majuscule, au moins une lettre en minuscule, au moins un chiffre.

Lecture seule

L'attribut readonly ...

Élements de formulaire désactivés (disabled)