Un champ de saisie est un composant dans lequel les utilisateurs peuvent taper des informations. Il prend en charge des formats de texte, ainsi que du format numérique.
Localisation :
La zone de texte peut être placée dans diverses parties de l'interface utilisateur en fonction de son utilisation spécifique. Voici quelques exemples d'emplacements courants :
- Formulaires: Intégrez la zone de texte dans les formulaires lorsque vous avez besoin que les utilisateurs saisissent des informations détaillées
- Boîtes de dialogue : telles que les modales ou les fenêtres contextuelles
- Pages de profil utilisateur : Si vous avez besoin que les utilisateurs fournissent des informations détaillées sur leur profil
- Zones de commentaires ou de discussion : Dans les interfaces où les utilisateurs peuvent laisser des commentaires, ou participer à des discussions.
Assistance utilisateur
Les éléments d'assistance fournissent des détails supplémentaires sur le texte saisi dans les champs de saisie.
Infobulle
L'option infobulle permet d'afficher une icône à côté du label qui fournit des informations contextuelles lorsqu'elle est survolée (ou au focus) ou cliquée à l'aide du composant infobulle.
Texte d'aide
Le texte d'aide donne des indications supplémentaires sur le champ de saisie, comme la manière dont il sera utilisé. Il ne doit occuper qu'une seule ligne pour simplifier sa compréhension.
Il doit décrire le format attendu, si celui-ci est spécifique.
Message d'erreur
Le message d'erreur vient apporter des informations supplémentaires à l'utilisateur lors de la complétion ou lors de la validation d'un formulaire.
Il doit expliciter la cause de l'erreur, et fournir une suggestion de correction si nécessaire.
Compteur de caractères
Lorsqu’un nombre de caractères maximum est défini pour un champ de saisie, un compteur de caractères peut être affiché pour indiquer le nombre de caractères saisis. Il est toujours précédé par le texte d'aide : "X caractères autorisés".
Lors de la saisie, le nombre de caractères est affiché en temps réel. Si le nombre de caractères autorisés est atteint, le compteur est mise en avant par une courte animation pour alerter l’utilisateur. La saisie est alors bloquée, l’utilisateur ne peut pas rajouter de caractères supplémentaires. En cas de copier-coller d’un texte qui dépasse la limite de caractères, celui-ci est tronqué.
Le compteur de caractères doit être utilisé uniquement lorsqu’il y a une bonne raison de limiter le nombre de caractères et que l’utilisateur est susceptible de dépasser cette limite.
Si un nombre et un format précis de caractère est attendu, préféré l’utilisation d’un champ avec formatage.
Comportement général
Le comportement général d'un champ de texte comprend les aspects suivants :
Saisie de texte :
Les utilisateurs peuvent entrer du texte dans le champ en utilisant le clavier ou d'autres dispositifs d'entrée appropriés. Le texte saisi s'affiche en temps réel dans le champ de texte.
Édition de texte :
Les utilisateurs peuvent sélectionner, copier, couper et coller du texte à l'intérieur du champ. Ils peuvent également déplacer le curseur de texte pour effectuer des modifications ou naviguer à travers le contenu.
Réactivité au clavier :
Les champs de texte doivent permettre la navigation au clavier en utilisant les touches de tabulation pour passer d'un champ à l'autre et les touches de direction pour déplacer le curseur de texte à l'intérieur du champ.
Retour visuel :
Les champs de texte doivent fournir un retour visuel clair pour indiquer l'état du champ, tel que la mise en évidence lorsque le champ a le focus ou lorsqu'il y a une erreur de saisie.
Effacement du contenu :
Les utilisateurs doivent avoir la possibilité d'effacer ou de supprimer le contenu du champ de texte, que ce soit en utilisant la touche de suppression ou en cliquant sur un bouton d'effacement intégré.
Validation de saisie :
Les champs de texte peuvent inclure des mécanismes de validation pour vérifier que la saisie répond à certaines conditions, par exemple en vérifiant la longueur du texte, le format ou l'exactitude des données saisies.
Compatibilité avec les dispositifs tactiles :
Les champs de texte doivent prendre en charge les interactions tactiles pour les utilisateurs qui interagissent avec l'interface via des écrans tactiles, en permettant la saisie et la modification du texte de manière intuitive.