Pour commencer

Accédez aux outils et aux éléments de base qui permettent de concevoir et de mettre au point des expériences cohérentes et accessibles.

Développer Conception

Formulaires

Les formulaires permettent aux utilisateurs de fournir des renseignements, de sélectionner des options et de réaliser des transactions.

Conseils

Les formulaires servent à collecter les données des utilisateurs et à permettre les transactions. Ils sont composés d’un ensemble de champs de saisie contenus dans un conteneur de formulaire <form>. Les ensembles de champs <fieldset> peuvent être utilisés pour diviser les formulaires qui présentent beaucoup de contenu. Ils permettent de regrouper les éléments dans des sections logiques qui ont un sens pour l’utilisateur, comme « Coordonnées » ou « Informations de paiement ».

Les formulaires doivent être clairs et faciles à comprendre et à utiliser. Le système de conception du GNB propose une vaste série de composants de formulaire. Ils sont tous conçus dans un objectif précis et tiennent compte des besoins des utilisateurs. Dans l’ensemble, il existe deux principaux types de saisies :

  • Saisies libres : Les champs de texte et les zones de texte permettent la saisie libre des données. Les champs de texte sont utilisés pour saisir du texte court, sur une seule ligne. Les zones de texte sont utilisées pour saisir des informations sur plusieurs lignes, comme des messages ou des commentaires.
  • Saisies de sélection : Ce type de saisie permet à l’utilisateur de choisir parmi des options prédéfinies. Pour les sélections uniques, utilisez des boutons radio, des listes de sélection ou des listes à saisie semi-automatique. Pour les sélections multiples, utilisez des cases à cocher.

À faire

  • Indiquez les champs obligatoires.
  • Utilisez les types de boîtes de saisie appropriés pour le texte, le courriel et le mot de passe.
  • Divisez les longs formulaires et groupez les champs connexes sous des titres de section (comme « Coordonnées »).
  • Utilisez for="id-de-l'entrée" pour associer chaque étiquette à son entrée correspondante.
  • Collectez uniquement les renseignements nécessaires à la prestation du programme ou du service.
  • Rédigez des messages d’erreur utiles qui guident les utilisateurs en cas d’erreur.
  • Permettez aux utilisateurs de vérifier leurs données avant de les soumettre.

À ne pas faire

  • N’utilisez pas tabindex.
  • Ne créez pas d’étiquettes en MAJUSCULES.
  • Ne créez pas d’étiquette avec le texte d’espace réservé.
  • Ne tentez pas de reproduire la mise en page d’un formulaire papier.
  • Ne masquez pas le texte d’aide.
  • N’utilisez pas de ponctuation dans les étiquettes.
  • Ne fixez pas de limite de temps.
  • N’exigez pas de salutations genrées comme Monsieur, Mademoiselle et Madame.

Composants du formulaire et conseils

Composants d'entrée de formulaire

Tous les composants dont vous avez besoin pour construire n'importe quelle forme.

Disposition des formulaires

Meilleures pratiques pour créer des formulaires bien conçus.

Messages d'erreur

Meilleures pratiques pour rédiger de bons messages d'erreur.