Choix de la langue

Chercher

Chercher

Eléments de formulaire

Regroupement d’éléments de formulaire

FLEX

Les intertitres permettent de regrouper des éléments de formulaire en fonction du contenu. On utilise pour cela la balise fieldset.

Legend of fieldset

Champs de saisie

FLEX

Les champs de saisie permettent l’entrée de contenu (p. ex. le nom).

Pour entrer une date, une solution HTLM5 est proposée. Dans les navigateurs qui ne sont pas compatibles HTML5, la date doit être saisie manuellement.

**Accessibilité

Afin d’assurer l’accessibilité, les formulaires et encadrés de saisie doivent être marqués avec des étiquettes. Un identifiant d’étiquette ne doit être utilisé qu’une seule fois par page. Il convient de désigner les champs de manière compréhensible, de préférence on respectera la WAI.

Un feedback peut être donné aux utilisateurs grâce aux classes .has-error, .has-warning ou .has-success.

Types de saisie HTML5: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, et color

Fields marked with a * are compulsory

Email
Password
Warning, this is not a correct info!
Select date
Use format "DD/MM/YYYY"
Website
Use format "http://www.example.com"
Document
Terms
Terms
Terms
Terms
Dropdown
Dropdown 
// Code duplicated in footer to make the datepicker work in the styleguide
// Load Pikaday on date fields
if ($(window).width() > 767) {

  $('[type=date]').each(function(){
    // We need to change to type text to be able to write in another format
    // Just uncomment the following line:
    // $(this).prop('type', 'text');

    var picker = new Pikaday({
      field: $(this)[0],
      format: 'YYYY-MM-DD', // must be a input[type=text] to change this, see above
      firstDay: 1, // sets monday as first day
      theme: 'admin-theme',
      i18n: {
        previousMonth : 'Previous Month',
        nextMonth     : 'Next Month',
        months        : ['January','February','March','April','May','June','July','August','September','October','November','December'],
        weekdays      : ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'],
        weekdaysShort : ['Sun','Mon','Tue','Wed','Thu','Fri','Sat']
      }
    });
  });

}

Listes de sélection

FLEX

Une liste déroulante permet d’effectuer une sélection à partir d’une liste prédéfinie. Cette liste apparaît dans un menu après avoir cliqué sur l’élément. Après avoir effectué une sélection, le résultat est affiché. S’il existe plus de dix options, un champ de recherche est proposé en début de liste.

Listes de sélection multiple

FLEX

Les listes de sélection multiple se comportent de la même manière que les listes de sélection simple. Mais il est possible de sélectionner plus d'une option.

Cases à cocher

FLEX

Les cases à cocher sont utilisées lorsqu’un ou plusieurs éléments doivent être sélectionnés dans une liste prédéfinie.

(Optional) Question

Boutons radio

FLEX

Les boutons radio permettent aux utilisateurs de faire un choix unique dans une liste prédéfinie. Les boutons radio peuvent être regroupés. Un seul élément peut être choisi à l’intérieur d’un groupe.

(Optional) Question

Boutons

FLEX

Une distinction est faite entre le bouton principal et secondaire. Le bouton principal est utilisé pour l’action principale (p. ex. envoyer) qui peut également être déclenchée par la touche Entrée du clavier. Le bouton secondaire est utilisé pour les actions moins importantes (p. ex. Annuler).

Le bouton standard peut être utilisé pour diverses actions. Les boutons peuvent également être combinés dans un groupe de boutons. Comme dans les groupes de boutons radio, on ne peut choisir qu’un seul élément à l’intérieur d’un tel groupe.

La classe .btn permet de concevoir les boutons. La classe peut être utilisée pour les éléments <input>, <button> ou <a>. Il existe quatre variantes de design:

Buttons Markup

<button type="button" class="btn">Unstyled</button>

<button type="button" class="btn btn-primary">Primary</button>

<button type="button" class="btn btn-secondary">Secondary</button>

<button type="button" class="btn" disabled>Disabled</button>

<button type="button" class="btn btn-link">Button link</button>

Print button

<button type="button" class="btn btn-link hidden-xs"><span class="icon icon--print"></span></button>

Groupes de boutons

FIX