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
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">
< for="defaultCheck1" label><input id="defaultCheck1" type="checkbox" value="">Option 1</label>
</div>
// Cases à cocher incorporées :
<div class="checkbox-inline">
< for="inlineCheck1" label><input id="inlineCheck1" 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">
< for="radio1" label><input id="radio1" type="radio" name="optradio">Option 1</label>
</div>
// Boutons radio incorporés :
<div class="radio-inline">
< for="inlineRadio1" label><input id="inlineRadio1" 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
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">
< for="remember1" label><input id="remember1" 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">
< for="remember2" label><input id="remember2" 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">
< for="unchecked" label>
<input id="unchecked" 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
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
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
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.
- Correctif « datalist » (saisie automatique)
- Correctif « datalist » (saisie automatique) – dynamique
- Sélecteur de date
- Validation de formulaires
Une partie du code et des documents pour cette page est tirée de Bootstrap (lien externe).
- Date de modification: