Skip to main content

# Formulaires

# Eléments de formulaires

Champ de saisie
Commentaire
Liste de de sélection
Première case à cocher Deuxième case à cocher Troisième case à cocher

    <div class="form-group row">
      <label for="input-text" class="col-form-label col-md-3 labelClass">Champ de saisie</label>
      <div class="div col-md-9">
        <input id="input-text" type="text" class="form-control">
      </div>
    </div>

    <div class="form-group row">
      <label for="textArea" class="col-md-3 col-form-label">Commentaire</label>
      <div class="col-md-9">
        <textarea rows="3" id="textArea" class="form-control"></textarea>
      </div>
    </div>

    <div class="form-group row">
      <label for="exemple-select-simple" class="col-md-3 col-form-label">Liste de de sélection</label>
      <div class="col-md-9">
        <select id="exemple-select-simple" class="form-control">
          <option>1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
          <option>5</option>
        </select>
      </div>
    </div>

    <div class="form-group row">
      <div class="col-md-9 offset-md-3">
        <div class="form-check-group-inline">
          <label class="checkbox">
            <input type="checkbox"><span>Première case à cocher</span>
          </label>
          <label class="checkbox">
            <input type="checkbox"><span>Deuxième case à cocher</span>
          </label>
          <label class="checkbox">
            <input type="checkbox" disabled=""><span>Troisième case à cocher</span>
          </label>
        </div>
      </div>
    </div>

# Tailles des champs de saisie

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

     <select class="form-control form-control-lg">
       <option>Large select</option>
     </select>
     <select class="form-control">
       <option>Default select</option>
     </select>
     <select class="form-control form-control-sm">
       <option>Small select</option>
     </select>

# Lecture seule et consultation

Champ verrouillé
Consultation
Liste de sélection filtrable en consultation

    <div class="form-group row">
      <label for="input-readonly" class="col-form-label col-md-3">Champ verrouills</label>
      <div class="col-md-9">
        <input id="input-readonly" type="text" class="form-control" value="Valeur en lecture seule (readonly)" aria-disabled="true" readonly="" tabindex="-1">
      </div>
    </div>
    <div class="form-group row">
      <label for="input-readonly-text" class="col-form-label col-md-3">Consultation</label>
      <div class="col-md-9">
        <input id="input-readonly-text" type="text" class="form-control form-control-plaintext" value="Valeur en consultation (readonly + .form-control-plaintext)" aria-disabled="true" readonly="" tabindex="-1">
      </div>
    </div>

# Feedback d'erreur

Saisie erronée
L'identifiant comprend 13 chiffres.

    <div class="form-group row">
      <label for="input-erreur" class="col-form-label col-md-3">Saisie erronée</label>
      <div class="div col-md-9">
        <input id="input-erreur" type="text" class="form-control is-invalid">
        <div class="invalid-feedback">L'identifiant comprend 13 chiffres.</div>
      </div>
    </div>

# État inactif

Champ désactivé
Liste de sélection native désactivée
Liste de sélection filtrable désactivée
Liste de sélection multiple désactivée

    <div class="form-group row">
      <label for="input-disabled" class="col-form-label col-md-3">Champ désactivé</label>
      <div class="col-md-9">
        <input id="input-disabled" type="text" class="form-control" value="Valeur non modifiable disabled)" disabled tabindex="-1">
      </div>
    </div>
    ...
        <select id="select-disabled" class="form-control" disabled tabindex="-1">
          ...
        </select>
    ...
        <select id="chosenselect-disabled" class="form-control chosen-select" disabled tabindex="-1">
          ...
        </select>

# Cases à cocher et boutons radio

Premier libellé de case à cocher cnam
Deuxième libellé de case à cocher cnam
Troisième de case à cocher désactivée

Libellé de case à cocher cnam
Libellé de case à cocher cnam
Libellé de case à cocher désactivée

    <div class="cnam-check">
      <input type="checkbox" id="input_id" checked>
      <label class="cnam-check-label" for="input_id">...</label>
    </div>
    <div class="cnam-check">...</div>

    <div class="form-inline">
      <div class="cnam-check">
        <input type="checkbox" id="input_id" checked>
        <label class="cnam-check-label" for="input_id">...</label>
      </div>
      <div class="cnam-check">...</div>
    </div>

Première option
Deuxième option
Troisième option désactivée

Première option
Deuxième option
Troisième option désactivée

    <div class="cnam-check">
      <input type="radio" name="radio_group" id="input_id" checked>
      <label class="cnam-check-label" for="input_id">...</label>
    </div>
    <div class="cnam-check">...</div>

    <div class="form-inline">
      <div class="cnam-check">
        <input type="radio" name="radio_group" id="input_id" checked>
        <label class="cnam-check-label" for="input_id">...</label>
      </div>
      <div class="cnam-check">...</div>
    </div>

Taille sm (.sm)
Taille standard
Taille large (.lg)
Taille extra large (.xlg)
Taille sm (.sm)
Taille standard
Taille large (.lg)
Taille extra large (.xlg)

    <div class="cnam-check check-sm">...</div>
    <div class="cnam-check">...</div>
    <div class="cnam-check check-lg">...</div>
    <div class="cnam-check check-xlg">...</div>

    OU

    <div class="check-sm">
      <div class="cnam-check">...</div>
      <div class="cnam-check">...</div>
    </div>

## Surlignement au survol

Les cases à cocher et boutons radio peuvent réagir au survol. Pour cela il faut les inclure dans un conteneur `.check-list`.

Première option
Deuxième option
Troisième option inactive
Première option
Deuxième option
Troisième option inactive

    <div class="check-list">
      <div class="cnam-check">...</div>
      <div class="cnam-check">...</div>
    </div>

## Dans un tableau

Lorsque la case à cocher ou le bouton de radio se trouve dans un tableau, la zone active peut occuper toute la cellule parente. Il suffit pour cela de placer sur le tableau la classe `.check-container`.

|  | Nir |
--- | --- | --- | ---
1 |  | 2 11 56 34 890 345 |
2 |  | 2 11 56 34 890 345 |

    <table class="table table-bordered table-striped table-centered check-container">
      <div class="cnam-check">...</div>
      <div class="cnam-check">...</div>
    </table>

# Switch

Switch checked
Switch inactif
Switch désactivé
Switch désactivé checked

Switch checked
Switch inactif
Switch désactivé
Switch désactivé checked

    <div class="cnam-check cnam-check-switch">
      <input type="checkbox" id="cnam_switch" checked>
      <label class="cnam-check-label" for="cnam_switch">...</label>
    </div>

    <div class="form-inline">
      <div class="cnam-check cnam-check-switch">
        <input type="checkbox" id="cnam_switch" checked>
        <label class="cnam-check-label" for="cnam_switch">...</label>
      </div>
      <div class="cnam-check cnam-check-switch">...</div>
    </div>

Switch taille sm
Switch taille standard
Switch taille lg
Switch taille xlg

    <div class="cnam-check cnam-check-switch check-sm">...</div>
    <div class="cnam-check cnam-check-switch check">...</div>
    <div class="cnam-check cnam-check-switch check-lg">...</div>
    <div class="cnam-check cnam-check-switch check-xlg">...</div>

    OU

    <div class=".check-sm">
      <div class="cnam-check">...</div>
      <div class="cnam-check">...</div>
    </div>

## Surlignement au survol

Les Switch peuvent également réagir au survol en ajoutant la classe `.check-list` à leur conteneur.

Switch checked
Switch inactif
Switch désactivé
Switch checked désactivé

    <div class="check-list">
      <div class="cnam-check cnam-check-switch">...</div>
      <div class="cnam-check cnam-check-switch">...</div>
    </div>

# Aide à la saisie

Aide
Une aide contextuelle qui peut prendre la forme d'un petit paragraphe explicatif. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

    <div class="form-group row">
      <label for="input-helptext" class="col-form-label col-md-3">Aide</label>
      <div class="div col-md-9">
        <input id="input-helptext" type="text" aria-describedby="input-helptext-helptext" class="form-control">
        <small id="input-helptext-helptext" class="form-text">Une aide contextuelle qui peut prendre la forme d'un petit paragraphe explicatif. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</small>
      </div>
    </div>

# Boutons d'aide contextuelle

Aide contextuelle

    <div class="form-group row">
      <label for="input-help" class="col-form-label col-md-3">Aide contextuelle</label>
      <div class="div col-md-9">
        <div class="input-group input-group-icon">
          <input id="input-help" type="text" class="form-control">
          <button class="btn btn-icon btn-icon-secondary"><span aria-hidden="true" class="am-icon icon-help-circle"></span></button>
        </div>
      </div>
    </div>

# Icône calendrier

Calendrier

    <div class="form-group row">
      <label for="input-calendar" class="col-form-label col-md-5">Calendrier</label>
      <div class="div col-md-4">
        <div class="input-group input-group-icon">
          <input id="input-calendar" type="text" class="form-control">
          <button class="btn btn-icon"><span aria-hidden="true" class="am-icon icon-calendar"></span></button>
        </div>
      </div>
    </div>

# Layouts des formulaires

Nom de famille
Prénom
Date de début CMU
Identifiant
Nom d'usage
Date de naissance

    <div class="row">
      <div class="col-md-6">
        <div class="form-group row">
          <label for="input-name" class="col-form-label col-md-5">Nom de famille</label>
          <div class="col-md-7">
            <input id="input-name" type="text" class="form-control" placeholder="Nom de famille">
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <div class="form-group row">
          <label for="input-id" class="col-form-label col-md-5">Identifiant</label>
          <div class="col-md-7">
            <input id="input-id" type="text" class="form-control" placeholder="Identifiant à 13 chiffres">
          </div>
        </div>
    </div>

Nom
Prénom
Adresse

    <div class="form-row">
      <div class="col-md-6">
        <label for="inlineform-nom">Nom</label>
        <input type="text" id="inlineform-nom" class="form-control">
      </div>
      <div class="col-md-6">
        <label for="inlineform-prenom">Prénom</label>
        <input type="text" id="inlineform-prenom" class="form-control">
      </div>
    </div>
    <div class="form-row align-items-end">
      <div class="col-md-5">
        <label for="inlineform-adress1">Adresse</label>
        <input type="text" id="inlineform-adress1" placeholder="Numéro" class="form-control">
      </div>
      <div class="col-md-7">
        <input type="text" id="inlineform-adress2" placeholder="Rue, avenue ..." class="form-control">
      </div>
    </div>
    <div class="form-row">
      <div class="col">
        <input id="inlineform-adress3" placeholder="Appartement, étage ..." class="form-control">
      </div>
    </div>
    <div class="form-row">
      <div class="col">
        <input type="text" id="inlineform-adress-codepostal" placeholder="Code postal" class="form-control">
      </div>
      <div class="col-7">
        <input type="text" id="inlineform-adress-city" placeholder="Ville, localité, ..." class="form-control">
      </div>
      <div class="col">
        <select id="inlineform-adress-country" class="form-control">
          <option>france</option>
        </select>
      </div>
    </div>

Nir Date de naissance
Rechercher

    <div class="form-inline">
      <label for="inlineform-nir">Nir</label>
      <input type="text" id="inlineform-nir" class="form-control">
      <label for="inlineform-naissance">Date de naissance</label>
      <div class="input-group input-group-icon">
        <input type="text" id="inlineform-naissance" class="form-control">
        <div aria-hidden="true" class="btn btn-icon">
          <div class="am-icon icon-calendar"></div>
        </div>
      </div>
      <div class="button btn btn-primary">Rechercher </div>
    </div>

Champ de saisie
Champ de saisie
Champ de saisie

    <form class="form-condensed">
      <div class="form-group row">
        <label for="input-sm-text" class="col-form-label col-md-3 labelClass">Champ de saisie</label>
        <div class="div col-md-9">
          <input id="input-sm-text" type="text" class="form-control">
        </div>
      </div>
      ...
    </form>

# Champs de saisie alternatif

Libelle du champ
Libelle du champ

    <div class="input-alt" data-activate-by="required">
      <input type="text" required="" value="">
      <div class="outline">
        <label class="outline-body">
          <span class="floating-label">Libelle du champ</span>
        </label>
      </div>
    </div>
    <div class="input-alt is-filled" data-activate-by="required">
      <input type="text" required="" value="">
      <div class="outline">
        <label class="outline-body">
          <span class="floating-label">Libelle du champ</span>
        </label>
      </div>
    </div>

En mode consultation, le champ peut être construit avec un champs `input` doté de l'attribut `readonly` ou bien un `span` doté de la classe `.value`. La classe `.has-multiplelines` permet de construire des champs multi lignes.

Champ input readonly
Champ en consultation (span)
Valeur en consultation
Champ en consultation (span)
Champ en consultation sans input multiligne avec texte très long et
retour à la ligne

    <div class="input-alt is-filled">
      <input type="text" readonly value="">
      <div class="outline">
        <label class="outline-body">
          <span class="floating-label">...</span>
        </label>
      </div>
    </div>

    <div class="input-alt is-filled">
      <div class="outline">
        <span class="outline-body">
          <span class="floating-label">...</span>
        </span>
      </div>
      <span class="value">...</span>
    </div>

    <div class="input-alt is-filled has-multiplelines">
      <div class="outline">
        <span class="outline-body">
          <span class="floating-label">...</span>
        </span>
      </div>
      <span class="value">
        ...
        <br/>
        ...
      </span>
    </div>

## États

Consultation seule (disabled)
Consultation seule vide (disabled)

    <div class="input-alt is-filled">
      <input type="text" placeholder=" " value="..." disabled="">
      <div class="outline">
        <label class="outline-body">
          <span class="floating-label">...</span>
        </label>
      </div>
    </div>

Consultation seule (readonly)
Consultation seule vide (readonly)

    <div class="input-alt is-filled">
      <input type="text" placeholder=" " value="..." readonly="">
      <div class="outline">
        <label class="outline-body">
          <span class="floating-label">...</span>
        </label>
      </div>
    </div>
    <div class="input-alt is-filled">
      <input type="text" placeholder=" " value="..." readonly="">
      <div class="outline">
        <label class="outline-body">
          <a href="..." class="floating-label">...</a>
        </label>
      </div>
    </div>

Consultation avec libellé lien sur base de champ input
Valeur restituée
Consultation avec libellé lien sans éléments de formulaires

    <div class="input-alt is-filled">
      <a class="block-link" href="#input-alt" title="afficher la rubrique état civil"></a>
      <input type="text" placeholder="" value="..." readonly="">
      <div class="outline">
        <label class="outline-body">
          <span class="floating-label">...</span>
        </label>
      </div>
    </div>
    <div class="input-alt is-filled">
      <div class="value">...</div>
      <div class="outline">
        <div class="outline-body">
          <a href="#input-alt" class="floating-label">...</a>
        </div>
      </div>
    </div>

Les classes `.is-filled`, `.is-empty`, `.has-focus` permettent de modifier l'affichage du champs selon l'état souhaité.

Classe rempli (.is-filled)
Classe vide (.is-empty)

    <div class="input-alt is-filled">
      <input type="text" placeholder=" " value="...">
      <div class="outline">
        <label class="outline-body">
          <span class="floating-label">...</span>
        </label>
      </div>
    </div>

classe focus (.has-focus)
classe emphasis (.has-emphasis)

    <div class="input-alt has-focus">
    ...
    </div>
    <div class="input-alt has-emphasis is-filled">
    ...
    </div>

Saisie invalide (.is-invalid)
L'identifiant comprend 13 chiffres.

    <div class="input-alt is-invalid is-filled">
      <input type="text" value="...">
      <div class="outline">
        <label class="outline-body">
          <span class="floating-label">...</span>
        </label>
      </div>
    </div>
    <div class="invalid-feedback">...</div>

## Taille des champs

Libellé du champ de saisie sm
Libellé du champ de saisie default
Libellé du champ de saisie lg

    <div class="input-alt input-alt-sm is-filled">
    ...
    </div>
    <div class="input-alt input-alt-lg is-filled">
    ...
    </div>

## Addons

Requis

    <div class="input-alt is-required">
    ...
    </div>

Avec icones

    <div class="input-alt is-filled">
      <input type="text" placeholder=" " value="Valeur saisie">
      <div class="outline">
        <label class="outline-body">
          <span class="floating-label">...</span>
        </label>
      </div>
      <span class="am-icon icon-lg icon-wizard"></span>
      <a href="#">
        <span class="am-icon icon-lg icon-more-circle"></span>
      </a>
      <div class="btn btn-icon btn-icon-secondary">
        <span class="am-icon icon-lg icon-help-circle"></span>
      </div>
    </div>

Calendrier

    <div class="input-alt is-filled">
      <input type="text" placeholder=" " value="Valeur saisie">
      <div class="outline">
        <label class="outline-body">
          <span class="floating-label">...</span>
        </label>
      </div>
      <div class="btn btn-icon">
        <span class="am-icon icon-lg icon-calendar"></span>
      </div>
    </div>

Avec Aide
Une aide contextuelle qui peut prendre la forme d'un petit paragraphe explicatif. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

    <div class="input-alt">
    ...
    </div>
    <small class="form-text">...</small>