Formulaires

Collection complète de champs de formulaire avec validation et états.

Champs de Texte (Inputs)

Texte d'aide sous le champ 
<div class="form-group">
    <label class="form-label">Nom</label>
    <input type="text" class="form-control" placeholder="Votre nom">
    <span class="form-hint">Aide optionnelle</span>
</div>

Tailles d'Input

<input type="text" class="form-control form-control-sm">
<input type="text" class="form-control">
<input type="text" class="form-control form-control-lg">

Types d'Input

<input type="email" class="form-control">
<input type="password" class="form-control">
<input type="number" class="form-control">
<input type="date" class="form-control">

Zone de Texte (Textarea)

Cette textarea ne peut pas être redimensionnée 
<textarea class="form-control" rows="4" 
    placeholder="Votre message"></textarea>

Sélection (Select)

<select class="form-control">
    <option>Option 1</option>
    <option>Option 2</option>
</select>

Cases à Cocher (Checkboxes)

Checkboxes Standards

Groupe de Checkboxes

<div class="form-check">
    <input type="checkbox" class="form-check-input" id="check1">
    <label class="form-check-label" for="check1">Label</label>
</div>

Boutons Radio

Radio Standards

Groupe de Radio

<div class="form-check">
    <input type="radio" class="form-check-input" name="group1" id="radio1">
    <label class="form-check-label" for="radio1">Option</label>
</div>

Interrupteurs (Switches)

<div class="form-switch">
    <input type="checkbox" class="form-switch-input" id="switch1">
    <label for="switch1">Activer</label>
</div>

Groupes d'Input (avec préfixe/suffixe)

CHF
https://
@ccb.ch
% 
<div class="input-group">
    <span class="input-group-text">CHF</span>
    <input type="number" class="form-control">
</div>

Upload de Fichier

<div class="form-file">
    <input type="file" class="form-file-input" id="file1">
    <label for="file1" class="form-file-label">
        Sélectionner un fichier
    </label>
</div>

États de Validation

Ce champ est valide !
Veuillez entrer une adresse email valide.
Ce champ est requis. 
<input type="text" class="form-control is-valid">
<span class="valid-feedback">Valide !</span>

<input type="text" class="form-control is-invalid">
<span class="invalid-feedback">Erreur !</span>

Champ de Recherche

<div class="form-search">
    <i class="fas fa-search form-search-icon"></i>
    <input type="search" class="form-control">
</div>

Curseur (Range Slider)

<input type="range" class="form-range" 
    min="0" max="100" value="50">

Exemple de Formulaire Complet

Inscription Utilisateur

Minimum 8 caractères

Bonnes Pratiques

Conseils pour les formulaires
  • Utilisez des labels clairs et descriptifs pour chaque champ
  • Indiquez les champs requis visuellement (astérisque *)
  • Fournissez des messages d'erreur clairs et constructifs
  • Groupez les champs liés ensemble (adresse, nom complet, etc.)
  • Utilisez le bon type d'input (email, tel, date, etc.)
  • Ajoutez des hints pour clarifier le format attendu
  • Testez l'accessibilité avec le clavier et lecteur d'écran