Saisie de texte
Réduire la table des matières
Développer la table des matières

Recommandations en matière de saisie de texte

Les zones de saisie de texte permettent à l’utilisateur d’entrer et de modifier des caractères à l’aide d’un clavier physique ou visuel. L’activation de l’habillage du texte permet à une zone de saisie de texte d’accepter plusieurs lignes de texte.

Exemple

Une zone de texte standard s’affiche dans quatre états différents : entrée de texte sur une ligne, sélection de texte, désactivé, entrée de texte sur plusieurs lignes.

Exemples de zones de saisie de texte

Est-ce le contrôle approprié ?

Les questions suivantes vous aideront à déterminer si une zone de texte standard ou un autre contrôle est la meilleure solution pour la saisie de texte.

  • Toutes les valeurs valides peuvent-elles être efficacement énumérées ? Si c’est le cas, envisagez d’utiliser les contrôles de sélection, par exemple une case à cocher, une liste déroulante, une zone de liste, une case d’option, un curseur, un bouton bascule, un sélecteur de dates ou un sélecteur d’heure.
  • L’ensemble de valeurs valides est-il restreint ? Si c’est le cas, utilisez plutôt une liste déroulante ou une zone de liste, en particulier si les valeurs contiennent un grand nombre de caractères.
  • Les données valides sont-elles affranchies de toute contrainte ? Ou sont-elles uniquement soumises à une contrainte de format (longueur ou type de caractères) ? Si c’est le cas, utilisez un contrôle de saisie de texte. Vous pouvez définir une limite du nombre de caractères autorisés dans la zone de saisie. Vous pouvez aussi sélectionner l’une des étendues d’entrées prédéfinies pour limiter les entrées à un jeu de caractères ou format spécifique (par exemple, un nombre, un URI ou une devise).
  • La valeur représente-t-elle un type de données auquel correspond un contrôle courant spécialisé ? Si c’est le cas, utilisez le contrôle approprié plutôt que le contrôle de saisie de texte. Utilisez, par exemple, un contrôle DatePicker plutôt qu’un contrôle de saisie de texte pour les saisies de date.
  • Si les données sont strictement numériques :
    • La valeur à entrer est-elle approximative et/ou relative à une autre quantité spécifiée sur la même page ? Si c’est le cas, utilisez un curseur.
    • L’utilisateur profitera-t-il du résultat instantané des modifications de ses paramètres ? Si c’est le cas, utilisez un curseur accompagné éventuellement d’un contrôle correspondant.
    • La valeur entrée risque-t-elle d’être ajustée en fonction du résultat obtenu (par exemple, le volume ou la luminosité) ? Si c’est le cas, utilisez un curseur.

Recommandations

  • Utilisez un texte d’étiquette ou d’espace réservé si l’objectif de la zone de texte n’est pas clair. Une étiquette reste toujours visible, qu’il y ait ou non une valeur dans la zone de saisie de texte. Le texte d’espace réservé s’affiche initialement dans la zone de saisie de texte, mais disparaît après qu’une valeur a été entrée.
  • Attribuez à la zone de texte une largeur appropriée pour la plage de valeurs qui peuvent être entrées. La longueur des mots varie selon la langue. Tenez compte de la localisation si vous souhaitez que votre application soit prête globalement.
  • Une zone de saisie de texte se compose généralement d’une seule ligne (fonctionnalité d’habillage du texte désactivée). Si les utilisateurs doivent entrer ou modifier une longue chaîne de caractères, utilisez une zone de saisie de texte de plusieurs lignes (fonctionnalité d’habillage du texte activée).
  • En règle générale, une zone de saisie de texte est utilisée pour du texte modifiable. Vous pouvez toutefois utiliser une zone de saisie de texte en lecture seule. Le contenu de la zone pourra être lu, sélectionné et copié, mais pas modifié.
  • Pour réduire l’encombrement de l’écran, vous pouvez choisir d’afficher certaines zones de saisie de texte uniquement lorsque la case de contrôle associée est cochée. Vous pouvez également lier l’état activé d’une zone de saisie de texte à un contrôle de type case à cocher.
  • Déterminez comment doit se comporter une zone de saisie de texte quand l’utilisateur appuie dessus alors qu’elle contient déjà une valeur. Le comportement par défaut prévoit la modification de la valeur plutôt que son remplacement. Le point d’insertion est inséré entre deux mots et aucune sélection de texte n’est faite. Si la valeur d’une zone de saisie de texte a toutes les chances d’être remplacée par l’utilisateur, modifiez le comportement de la zone de sorte que tout le texte existant soit sélectionné lorsque le contrôle reçoit le focus et que la sélection soit remplacée par la nouvelle valeur entrée.
  • Si vous souhaitez limiter les entrées à un jeu de caractères ou format spécifique (par exemple, un nombre, un URI ou une devise), sélectionnez l’étendue des entrées appropriée. Ce paramètre détermine quel clavier visuel est utilisé.

Zones de saisie d’une seule ligne

  • Utilisez plusieurs zones de texte d’une ligne pour la saisie de plusieurs éléments de texte de petite taille. Si les zones de texte sont de nature apparentées, regrouper-les.

  • Faites en sorte que la taille des zones de texte d’une ligne soit légèrement supérieure à l’entrée la plus longue prévue. Si cela rend le contrôle trop grand, divisez-le en deux contrôles. Par exemple, vous pouvez fractionner une entrée d’adresse unique en "ligne d’adresse 1" et "ligne d’adresse 2".
  • Définissez une longueur maximale de caractères qui peuvent être entrés. Si la source de données de stockage n’accepte pas les chaînes d’entrée longues, limitez la longueur des entrées et utilisez une fenêtre contextuelle de validation pour indiquer à l’utilisateur qu’il a atteint la limite.
  • Utilisez des contrôles de saisie de texte d’une ligne pour recueillir de petits éléments de texte.

    L’exemple suivant montre une zone de texte d’une ligne destinée à saisir une réponse à une question de sécurité. La réponse devant être brève, il convient d’utiliser ici une zone de texte d’une ligne. L’information collectée ne correspondant à aucun des types de saisie spécialisés reconnus dans Windows, le type de contrôle générique "Text" est approprié.

    Saisie de données élémentaires

  • Utilisez un ensemble de contrôles de saisie de texte d’une ligne courts et de taille fixe pour entrer des données ayant un format spécifique.

    Entrée de données formatées

  • Utilisez un contrôle de saisie de texte d’une ligne sans contraintes pour entrer ou modifier des chaînes, en association avec un bouton de commande qui permette aux utilisateurs de sélectionner les valeurs valides.

    Saisie de données assistée

  • Utilisez un contrôle de saisie de chiffres d’une ligne pour entrer ou modifier des nombres.
  • Utilisez un contrôle de saisie de mot de passe d’une ligne pour entrer les mots de passe et codes confidentiels en toute sécurité.

    Saisie de mots de passe et codes confidentiels
  • Utilisez le contrôle de saisie de courrier électronique d’une ligne pour entrer une adresse électronique.

    Saisie de courrier électronique

    Lorsque vous utilisez un contrôle de saisie de courrier électronique, vous obtenez automatiquement ceci :

    • Lorsque l’utilisateur accède à la zone de texte, le clavier tactile s’affiche avec la disposition de clavier spécifique pour la saisie de message électronique.
    • Lorsque l’utilisateur entre un format d’e-mail incorrect, une boîte de dialogue s’affiche pour l’avertir. Saisie du courrier électronique
  • Utilisez le contrôle de saisie d’URL pour entrer les adresses Web.
  • Utilisez le contrôle de saisie de numéros de téléphone pour entrer les numéros de téléphone.
  • Pour créer une zone de texte d’une ligne, n’utilisez pas un contrôle d’espace de texte défini avec une hauteur de ligne égale à 1. Utilisez plutôt la zone de texte.
  • N’utilisez pas de texte d’espace réservé pour pré-remplir le contrôle de texte. Les zones de texte effacent le texte d’espace réservé quand l’utilisateur utilise le contrôle. Utilisez l’attribut "value" à la place.
  • Ne placez pas d’autre contrôle juste à côté d’une zone de saisie de mot de passe. La zone de saisie de mot de passe comporte un bouton d’affichage du mot de passe permettant aux utilisateurs de vérifier les mots de passe qu’ils ont saisis, et le fait de prévoir un autre contrôle juste à côté peut amener les utilisateurs à révéler accidentellement leurs mots de passe quand ils tentent d’interagir avec l’autre contrôle. Pour empêcher que cela se produise, laissez suffisamment d’espace entre la zone de saisie du mot de passe et l’autre contrôle, ou placez celui-ci sur la ligne suivante.

Zones de saisie de texte de plusieurs lignes

  • Quand vous créez une zone de texte enrichi, proposez des boutons de style et implémentez leurs actions.
  • Utilisez une police cohérente avec le style de votre application.
  • Faites en sorte que la hauteur du contrôle de texte soit suffisante pour recevoir des entrées classiques.
  • Pour la saisie de longues chaînes de texte dont le nombre de mots ou de caractères est limité, utilisez une zone de texte brut et ajoutez un compteur en temps réel qui affiche à l’utilisateur le nombre de caractères ou de mots autorisés restants avant d’atteindre la limite. Vous devez créer le compteur vous-même. Placez-le sous la zone de texte en question et mettez-le à jour de façon dynamique à mesure que l’utilisateur entre chaque mot ou caractère.

    Texte long

  • Ne laissez pas les contrôles de saisie de texte s’allonger en hauteur lorsque les utilisateurs entrent le texte.
  • N’utilisez pas de zone de texte de plusieurs lignes quand les utilisateurs n’ont besoin que d’une seule ligne.
  • N’utilisez pas de contrôle de texte enrichi si un contrôle de texte brut est approprié.

Indications d’utilisation supplémentaires

Utilisez une zone de saisie de texte pour permettre à l’utilisateur d’entrer une valeur de texte ou de modifier une valeur existante. Vous pouvez ainsi limiter le nombre de caractères autorisés dans la zone de saisie, ou sélectionner l’une des étendues d’entrées prédéfinies pour limiter les entrées à un jeu de caractères ou à un format spécifique (par exemple, un nombre, un URI ou une devise).

Choix du contrôle de saisie de texte de plusieurs lignes approprié

Lorsque les utilisateurs ont besoin d’entrer ou de modifier de longues chaînes, utilisez un contrôle de saisie de texte de plusieurs lignes. Il existe deux types de contrôles de saisie de texte de plusieurs lignes : le contrôle de texte brut et le contrôle de texte enrichi.

  • Si l’objectif principal de la zone de texte de plusieurs lignes est de créer des documents (par exemple les entrées d’un blog ou le contenu d’un message électronique) et si ces documents nécessitent du texte enrichi, utilisez une zone de texte enrichi.
  • Si vous voulez permettre aux utilisateurs de mettre en forme leur texte, utilisez une zone de texte enrichi.
  • Pour saisir du texte qui sera uniquement utilisé et non réaffiché aux utilisateurs, utilisez un contrôle de saisie de texte brut.
  • Pour tous les autres cas de figure, utilisez un contrôle d’entrée de texte brut.

[Cet article contient des informations propres aux applications de plateforme Windows universelle (UWP) et à Windows 10. Pour obtenir de l’aide concernant Windows 8.1, téléchargez le document PDF de recommandations pour Windows 8.1 (en anglais).]

Rubriques associées

Pour les concepteurs
Recommandations en matière de vérification orthographique
Ajout de la fonctionnalité de recherche
Pour les développeurs (XAML)
TextBox class
Pour les développeurs (HTML)
input type=text element | input type=text object
textArea element
contenteditable
Pour les développeurs (autres)
Propriété String.Length

 

 

Afficher:
© 2018 Microsoft