Formulaires

Chantier

Cette page est en chantier.

Veuillez transmettre un problème ou soumettre une demande de tirage s'il manque des renseignements ou des codes ou si la synchronisation est incorrecte ou déphasée avec le principal référentiel (wet-boew/wet-boew).

Usage

L'utiliser pour recueillir et transmettre, dans un format prédéfini, de l'information venant d'utilisateurs.

Conception et codage

Utilisation de base

Utilisez les formulaires avec les contrôles de formulaire. Les contrôles d'un formulaire individuel reçoivent automatiquement des styles globaux. Tous les éléments textuels <input>, <textarea>, et <select>, ainsi que les éléments accompagnés de .form-control, sont réglés à width: 100%; par défaut. Enveloppez les étiquettes et les contrôles dans .form-group pour assurer un espacement optimal.

Apparence
Bonne utilisation

Points de conformité :

Contexte du formulaire :
  • Avant d'inclure des zones d'entrée pour le formulaire, présentez un énoncé d'une ligne à propos de l'utilisation du formulaire en suivant le format suivant :
    • Utilisez ce formulaire pour
  • Cela assurance l'utilisateur que le formulaire qu'il remplit est le bon
Boutons :
  • Au moment de placer des boutons Soumettre et Effacer à la fin du formulaire, ne les placez pas l'un à côté de l'autre
  • Leurs fonctions sont directement opposées, et cela pourrait causer une erreur involontaire de la part d'un utilisateur en raison de la proximité du placement
Barre de progrès :
  • Lorsque le formulaire s'étend sur plusieurs écrans ou pages, présentez une barre de progrès pour indiquer à l'utilisateur à quel stade du processus d'achèvement il se situe
Code source
<form role="form" method="get" action="#">
  <div class="form-group">
    <label for="exampleInputEmail1">Adresse de courriel</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Inscrire le courriel" />
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Mot de passe</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Mot de passe" />
  </div>
  <div class="form-group">
    <label for="exampleInputFile">Saisie de fichier</label>
    <input type="file" id="exampleInputFile" />
  </div>
  <div class="checkbox">
    <label><input type="checkbox" /> Cochez-moi</label>
  </div>
  <button type="submit" class="btn btn-default">Soumettre</button>
</form>

Étiquettes

Utilisez des étiquettes (un titre) pour clairement indiquer quel est le type d'information qu'un utilisateur doit inscrire dans une zone de saisie.

Apparence
Option d'alignement 1 − Placement en haut


Option d'alignement 2 − Alignement à droite

Option d'alignement 3 − Alignement à gauche
Bonne utilisation

Points de conformité :

  • Abrégez le texte des étiquettes jusqu'au strict minimum
  • Utilisez la majuscule initiale, par exemple, utilisez « Nom de famille » et non « Nom de Famille »
  • Utilisez des étiquettes en tout temps
    • Les lecteurs d'écran ont de la difficulté avec les formulaires si une étiquette n'est pas incluse pour chaque saisie
    • Pour cacher l'étiquette, utilisez la classe .wb-inv
  • Utilisez des abréviations standards reconnues, et vérifiez les abréviations auprès d'utilisateurs non experts
  • Formulez un énoncé au lieu de poser une question
    • Par exemple, utilisez « Nom de l'enfant » au lieu de « Quel est le nom de l'enfant? »
  • Utilisez du texte d'étiquette unique sur une page donnée afin de respecter les normes d'accessibilité
  • Placez « (requis) » à la fin de l'étiquette de zone si l'information est requise. Consultez : Validation de formulaires (external link)

Conception de l'option d'alignement 1 :

  • Placez l'étiquette au-dessus de la zone de saisie. Conformément à la publication Web form design: Filling in the blanks (disponible en anglais seulement) (external link), il s'agit de la mise en page recommandée
    • Cette mise en page permet aux utilisateurs de saisir à la fois les étiquettes et les zones de saisie d'un seul coup d'œil. Bien qu'il s'agisse de la plus simple des mises en page, les utilisateurs peuvent traiter l'information dix fois plus vite que si l'information est alignée à gauche. Cela est montré dans l'« Option d'alignement 3 − Alignement à gauche ». Cette solution utilise plus d'espace vertical, mais n'a pas d'incidence sur l'expérience de l'utilisateur. Si elle ne convient pas à la mise en page particulière dont vous avez besoin, il est aussi acceptable d'utiliser l'« Option d'alignement 2 − Alignement à droite »

Conception de l'option d'alignement 2 :

  • Placez les objets de formulaire côte à côte seulement s'il faut réduire l'espace vertical
    • Alignez à droite les étiquettes côte à côte avec les objets de forme. Cette solution est préférable aux étiquettes alignées à gauche. Des études sur le suivi du regard montrent que cela crée une association claire entre l'étiquette et la zone. Cela réduit le nombre de fixations de l'utilisateur (l'œil qui saute d'un point à un autre) de près de moitié. Ainsi, les mouvements oculaires réduits et l'association claire permettent de réduire la fatigue oculaire et d'améliorer la cognition. Cela se traduit par une accélération de 50 % du taux d'achèvement des formulaires
Mauvaise utilisation

Points de conformité :

  • N'utilisez pas cet élément d'une façon qui entre en conflit avec les points de conformité précédents
  • N'utilisez pas le deux-points à la fin d'une étiquette de zone de saisie
  • N'utilisez pas d'abréviations, à moins ce que tout absolument nécessaire pour des raisons d'espace
  • N'abrégez pas les mots essentiels. Par exemple, utilisez « Cmpte restreint », et non « Compte restrt »

Conception de l'option d'alignement 3 :

  • N'alignez pas à gauche une étiquette de la zone de saisie, pour les raisons citées
Code source
//Option d'alignement 1 − Placement en haut
<form role="form">
   <div class="form-group">
     <label for="label-1-1">Étiquette 1</label>
       <input type="text" size="10" id="label-1-1" name="label-1-1" class="form-control" />
   </div>
   <div class="form-group">
     <label for="label-2-1">Étiquette 2</label>
       <input type="password" size="10" id="label-2-1" name="label-2-1" class="form-control" />
    </div>
</form>

//Option d'alignement 2 − Alignement à droite
<form action="#" method="get" role="form" class="form-horizontal">
<div class="form-group"> <label class="col-sm-4 control-label" for="label-1-2">Étiquette 1</label> <div class="col-md-8"> <input type="text" class="form-control" name="label-1-2" id="label-1-2" size="10"> </div> </div> <div class="form-group"> <label class="col-sm-4 control-label" for="label-2-2">Étiquette 2</label> <div class="col-md-8"> <input type="password" class="form-control" name="label-2-2" id="label-2-2" size="10"> </div> </div> </form>

Saisies

Utilisez des zones de saisie textuelle (le formulaire de contrôle le plus courant). Cela comprend la prise en charge de tous les types HTML5 : text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel et color.

Apparence
Zone de saisie
Zone de saisie avec bouton de recherche
Bonne utilisation

Points de conformité :

  • On l'utilise pour créer une case de texte simple qui permet la saisie d'une seule ligne de texte
  • Déclarez correctement le type pour établir complètement le style de la zone de saisie
  • Enveloppez les boutons par .input-group-btn dans les groupes de saisie
    • Cela est requis, puisque l'on ne peut pas écraser les styles par défaut des navigateurs
Mauvaise utilisation

Points de conformité :

  • N'utilisez pas cet élément d'une façon qui entre en conflit avec les points de conformité précédents
  • Ne mélangez pas directement des groupes de formulaires avec des groupes de saisie
    • Au lieu de cela, imbriquez le groupe à l'intérieur du groupe de formulaires
Code
// Zone de saisie :
<input type="text" class="form-control" placeholder="(texte substituable)" />

// Zone de saisie avec un bouton de recherche :
<label for="btngrp-search2" class="wb-inv">Recherche</label>
  <div class="input-group">
    <input type="text" class="form-control" id="btngrp-search2" placeholder="(texte substituable)" />
    <span class="input-group-btn">
     <button class="btn btn-default" type="button">Recherche</button>
    </span>
  </div>

Zone de texte

Utilisez la zone de texte pour que les utilisateurs puissent insérer plusiurs lignes de texte dans un formulaire.

Apparence
Bonne utilisation

Points de conformité :

  • Utilisez .form-control pour créer un espace à structure libre qui permet à l'utilisateur de taper du contenu
  • Changez l'attribut rows="*" pour refléter le nombre de rangées par défaut à afficher
  • Limitez le nombre de rangées pour correspondre à la quantité de renseignements que désire(nt) le(s) destinataire(s)
Mauvaise utilisation

Points de conformité :

  • N'utilisez pas cet élément d'une façon qui entre en conflit avec les points de conformité précédents
  • Ne l'utilisez pas lorsque les utilisateurs doivent inscrire une réponse précise prédéfinie
Code
<textarea class="form-control" rows="3"></textarea>

Cases à cocher

Utilisez les cases à cocher pour que les utilisateurs puissent sélectionner une ou plusieurs options.

Apparence
Cases à cocher par défaut

Cases à cocher incorporées
Bonne utilisation

Points de conformité :

  • Utilisez .checkbox pour que les utilisateurs puissent choisir un ou plusieurs ensembles prédéfinis d'options
  • Utilisez .checkbox-inline pour faire apparaître les cases à cocher sur la même ligne
Mauvaise utilisation

Points de conformité :

  • N'utilisez pas cet élément d'une façon qui entre en conflit avec les points de conformité précédents
  • Ne l'utilisez pas si les utilisateurs doivent inscrire une réponse détaillée
Code
// Cases à cocher par défaut :
<div class="checkbox">
   <label><input type="checkbox" value="">Option 1</label>
</div>

// Cases à cocher incorporées :
<div class="checkbox-inline">
   <label><input type="checkbox" value="">Option 1</label>
</div>

Boutons radio

Utilisez des boutons radio pour que les utilisateurs ne puissent choisir qu'une seule option parmi plusieurs.

Apparence
Boutons radio

Boutons radio incorporés
Bonne utilisation

Points de conformité :

  • Utilisez .radio pour que les utilisateurs ne puissent choisir qu'un seul ensemble prédéfini d'options
  • Utilisez .radio-inline pour faire apparaître les boutons radio sur la même ligne
Mauvaise utilisation

Points de conformité :

  • N'utilisez pas cet élément d'une façon qui entre en conflit avec les points de conformité précédents
  • Ne l'utilisez pas si les utilisateurs doivent sélectionner plus d'une option
Code
// Boutons radio :
<div class="radio">
   <label><input type="radio" name="optradio">Option 1</label>
</div>

// Boutons radio incorporés :
<div class="radio-inline">
   <label><input type="radio" name="optradio">Option 1</label>
</div>

Sélections

On utilise les sélections pour permettre aux utilisateurs de ne sélectionner qu'une seule des options dans une liste. On peut afficher en même temps un seul élément ou bien plusieurs options dans une liste déroulante.

Apparence
Liste déroulante avec vue à une seule option

Liste déroulante avec vue à plusieurs options
Bonne utilisation

Points de conformité :

  • Utilisez .form-control pour créer une liste de sélection, de laquelle l'utilisateur peut sélectionner une seule option
  • Ajoutez multiple pour montrer plusieurs options en même temps
  • Placez l'option de sélection la plus probable en tant que texte par défaut de la liste déroulante
Mauvaise utilisation

Points de conformité :

  • N'utilisez pas cet élément d'une façon qui entre en conflit avec les points de conformité précédents
  • Ne l'utilisez pas pour les éléments non liés
Code
// Liste déroulante avec vue à une seule option :
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>

// Liste déroulante avec vue à plusieurs options :
<select multiple="multiple" class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>

Utilisation avancée

Formulaire horizontal

Utilisez les classes des grilles prédéfinies de Bootstrap pour aligner les étiquettes et les groupes de contrôles de formulaire dans une mise en page horizontale en ajoutant .form-horizontal au formulaire. Cette action a pour effet de changer .form-group pour adopter le comportement d'une rangée de grille. Il ne sera donc pas nécessaire d'utiliser .row.

Apparence
Code source
<form class="form-horizontal" role="form" method="get" action="#">
  <div class="form-group">
	<label for="inputEmail3" class="col-sm-2 control-label">Courriel</label>
	<div class="col-sm-10">
		<input type="email" class="form-control" id="inputEmail3" placeholder="Courriel" />
	</div>
  </div>
 <div class="form-group">
	<label for="inputPassword3" class="col-sm-2 control-label">Mot de passe</label>
	<div class="col-sm-10">
		<input type="password" class="form-control" id="inputPassword3" placeholder="Mot de passe" />
	</div>
  </div>
  <div class="form-group">
	<div class="col-sm-offset-2 col-sm-10">
		<div class="checkbox">
			<label><input type="checkbox" /> Se souvenir de moi</label>
		</div>
	</div>
  </div>
  <div class="form-group">
	<div class="col-sm-offset-2 col-sm-10">
		<button type="submit" class="btn btn-default">Ouvrir une session</button>
	</div>
  </div>
</form>

Formulaire incorporé

Utilisez le formulaire incorporé et réglez une largeur sur les contrôles de formulaire. Pour une mise en page comprimée, ajoutez .form-inline pour les contrôles de l'alignement de gauche et « inline-block ». Les saisies, les sélections et les zones de texte ont une largeur par défaut de 100 % dans Bootstrap.

Apparence
Code source
<form class="form-inline" role="form" method="get" action="#">
  <div class="form-group">
	<label class="wb-inv" for="exampleInputEmail2">Adresse de courriel</label>
	<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Inscrire le courriel" />
  </div>
  <div class="form-group">
	<label class="wb-inv" for="exampleInputPassword2">Mot de passe</label>
	<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Mot de passe" />
  </div>
  <div class="checkbox">
	<label><input type="checkbox" /> Se souvenir de moi</label>
  </div>
  <button type="submit" class="btn btn-default">Ouvrir une session</button>
</form>

Contrôle statique

Utilisez ce contrôle lorsqu'il faut placer une zone en lecture seule dans le formulaire; utilisez readonly="readonly".

Apparence
Code source
<form class="form-horizontal" role="form" method="get" action="#">
  <div class="form-group">
	<label for="emailReadonly" class="col-sm-2 control-label">Courriel</label>
	<div class="col-sm-10">
		<input type="email" readonly="readonly" id="emailReadonly" value="courriel@exemple.com" />
	</div>
  </div>
</form>

État désactivé

Cet état sert à empêcher la saisie par l'utilisateur et à déclencher une apparence légèrement différente. Ajoutez disabled="disabled" à une zone de saisie.

Ajouter l'attribut disabled à <fieldset> pour désactiver tous les contrôles en même temps dans le <fieldset>.

La fonctionnalité de lien de <a> n'est pas touchée. Cette classe change uniquement l'apparence des boutons <a class="btn btn-default">, et non leur fonctionnalité. Utilisez un code JavaScript personnalisé pour désactiver les liens.

Compatibilité multinavigateur : Même si Bootstrap applique ces styles dans tous les navigateurs, Internet Explorer 9 et les versions inférieures ne prennent pas en charge l'attribut disabled dans <fieldset>. Appliquez disabled="disabled" à toutes les zones qui se trouvent à l'intérieur de l'attribut « fieldset » désactivé pour corriger le problème dans ces navigateurs.

Apparence
Code source
<form role="form" method="get" action="#">
  <fieldset disabled="disabled">
	<div class="form-group">
		<label for="disabledTextInput">Saisie désactivée</label>
		<input type="text" id="disabledTextInput" class="form-control" placeholder="Saisie désactivée" />
	</div>
	<div class="form-group">
		<label for="disabledSelect">Menu de sélection désactivé</label>
		<select id="disabledSelect" class="form-control">
			<option>Sélection désactivée</option>
		</select>
	</div>
	<div class="checkbox">
		<label>
		<input type="checkbox" /> Impossible de cocher</label>
	</div>
	<button type="submit" class="btn btn-primary">Soumettre</button>
  </fieldset>
</form>

Régler la hauteur

Utilisez cette fonction pour créer des contrôles de formulaire plus grands ou plus petits qui font correspondre la taille des bouttons avec les classes .input-lg ou .input-sm. La taille moyenne est celle par défaut.

Apparence
Classe Classe Classe Classe
Code source
<label for="form-input-lg" class="wb-inv">classe <code>input-lg</code> sur un élément de saisie</label>
<input name="text2" type="text" class="form-control input-lg mrgn-bttm-md" id="form-input-lg" placeholder="input-lg" />

<label for="form-input-md" class="wb-inv">Saisie par défaut element</label>
<input type="text" class="form-control mrgn-bttm-md" id="form-input-md" placeholder="Saisie par défaut" />

<label for="form-input-sm" class="wb-inv">classe <code>input-sm</code> sur un élément de saisie</label>
<input class="form-control input-sm mrgn-bttm-md" type="text" id="form-input-sm" placeholder="input-sm" />


<label for="form-select-lg" class="wb-inv">classe <code>input-lg</code> sur un élément de sélection</label>
   <select class="form-control input-lg mrgn-bttm-md" id="form-select-lg">
      <option value="">.input-lg</option>
</select>

<label for="form-select-md" class="wb-inv">Élément de sélection par défaut</label>
   <select class="form-control mrgn-bttm-md" id="form-select-md">
      <option value="">Sélection par défaut</option>
   </select>

<label for="form-select-sm" class="wb-inv">classe <code>input-sm</code> sur un élément de sélection</label>
   <select class="form-control input-sm mrgn-bttm-md" id="form-select-sm">
      <option value="">.input-sm</option>
   </select>

Régler la largeur

Utilisez cette fonction pour envelopper les saisies dans des colonnes de grille comme .col-xs-4 ou .col-xs-8 (ou tout élément parent personnalisé) afin d'appliquer facilement les largeurs désirées.

Apparence
Classe
Classe
Code source
<div class="row">
  <div class="col-xs-4">
	<label for="form-input-col-xs-4" class="wb-inv">classe <code>col-xs-4</code> sur l'élément parent</label>
	<input type="text" class="form-control" id="form-input-col-xs-4" placeholder="col-xs-4" />
  </div>
  <div class="col-xs-8">
	<label for="form-input-col-xs-8" class="wb-inv">classe <code>col-xs-8</code> sur l'élément parent</label>
	<input type="text" class="form-control" id="form-input-col-xs-8" placeholder="col-xs-8" />
  </div>
</div>

Bordures de Légende

Par défaut, une seule balise fieldset/legend n’a pas de bordure au-dessus. Chaque fieldset après la première balise fieldset/legend auront une bordure pour séparer les deux fieldsets. Cela peut être changer en utilisant la classe .legend-brdr-bttm sur la balise <fieldset> pour créer une bordure sous chaque <legend>.

Appearance
Compte
Coordonnées
Source code
<form class="form-horizontal" role="form" method="get" action="#">
<fieldset class="legend-brdr-bttm">
<legend>Compte</legend>
<div class="form-group">
	<label for="inputFullName" class="col-sm-4 control-label">Nom complet</label>
	<div class="col-sm-8">
	<input type="text" class="form-control" id="inputFullName" placeholder="Full Name" />
	</div>
</div>
<div class="form-group">
	<label for="dob" class="col-sm-4 control-label">Date de naissance<span  class="datepicker-format"> (YYYY-MM-DD)</span></label>
	<input class="form-control" id="dob" name="dob" type="date" />
</div>
</fieldset>
<fieldset class="legend-brdr-bttm">
<legend>Coordonnées</legend>
<div class="form-group">
	<label for="tel1" class="col-sm-4 control-label">Numéro de téléphone</label>
	<div class="col-sm-8">
		<input class="form-control" id="tel1" name="tel1" type="tel" />
	</div>
</div>
<div class="form-group">
	<label for="inputEmail3" class="col-sm-4 control-label">Adresse électronique</label>
	<div class="col-sm-8">
		<input type="email" class="form-control" id="inputEmail3" placeholder="Email" />
	</div>
</div>
</fieldset>
<div class="form-group">
	<div class="col-sm-offset-2 col-sm-10">
		<button type="submit" class="btn btn-default">Souscrire</button>
	</div>
</div>
</form>

Fonctions complémentaires

Des fonctions et des comportements complémentaires sont disponibles.

Une partie du code et des documents pour cette page est tirée de Bootstrap (lien externe).

Date de modification :