Champ de saisie
<gcds-input>

Autres noms : saisie de texte, zone d'entrée.

Un champ de saisie est un espace permettant de saisir une courte réponse à une question ou à une directive.

• GitHub
• Figma

Examinez ce que font les champs de saisie pour déterminer s'ils répondent à vos besoins. Sélectionnez ensuite le meilleur type de champ de saisie qui répond à votre cas d'utilisation.

Problèmes résolus par les champs de saisie

Utilisez un champ de saisie lorsque vous attendez de l'utilisateur·rice une réponse d'une seule ligne, par exemple :

• une réponse individuelle ou unique.
• une courte réponse libre.
• une réponse avec des contraintes quant à la longueur du texte ou à son format.
• des renseignements essentiels d'identification ou des coordonnées.
• une date qu'elle connaît déjà, comme une date de naissance (pour la sélection d'une date inconnue, utilisez le sélecteur de dates).

Remarque : Ne recueillez que les renseignements que vous êtes autorisé·e à traiter et veillez à les protéger conformément aux normes du gouvernement du Canada.

Composants connexes

Zone de texte : lorsque vous cherchez à obtenir une réponse libre de plusieurs lignes.

Sélecteur de date : lorsque vous souhaitez que l'utilisateur·rice choisisse une date, comme pour la prise de rendez-vous.

Choisissez un type de champ de saisie

Définissez le type de champ de saisie en fonction de la méthode de validation des valeurs saisies par une personne. L’attribut input-type (type de champ de saisie) accepte les options suivantes :

Saisie textuelle

À utiliser lorsqu’aucun autre type de champ de saisie n'est approprié pour une saisie sur une seule ligne.

• Pour recueillir le nom d’une personne, le plus souvent son nom complet.
• En remplacement de la saisie numérique pour des choses comme :
  • des approximations pouvant inclure des valeurs non numériques;
  • des valeurs qui ne sont pas de véritables nombres, comme des numéros de compte, des numéros de carte de crédit ou des codes d’authentification;
  • des nombres avec décimales.

Saisie d'une adresse courriel

• Pour recueillir des adresses courriel.
• Pour exiger un format d’adresse courriel.

Saisie téléphone

• Pour recueillir des numéros de téléphone.
• Pour activer le clavier téléphonique sur les appareils mobiles.

Saisie de mot de passe

• Pour la collecte et la validation de mots de passe.
• Pour définir des contraintes spécifiques aux mots de passe.

Conseil : Indiquez toute contrainte liée au mot de passe dans le texte explicatif du champ de saisie afin que les personnes sachent exactement quelles sont les règles.

Saisie numérique

• Pour recueillir les nombres entiers qui peuvent augmenter ou diminuer, comme les quantités.
• Pour rejeter les valeurs qui ne sont pas numériques.

Conseil : Lorsque vous définissez une contrainte, comme une fourchette numérique, utilisez le texte explicatif pour transmettre une directive précise.

Saisie d'une clé de recherche

• Pour collecter une valeur à rechercher.

Saisie d'une URL

• Pour collecter une URL, comme une adresse Web ou un nom de domaine.