Le guide des formulaires de l'interface utilisateur de Kendo

L'équipe Kendo UI for Angular a créé un guide de formulaires non seulement pour être les enfants les plus branchés du quartier, mais aussi pour aider les développeurs avec quelque chose qui est si commun et qui pourrait souvent être amélioré. Nos conseils sur les formulaires proviennent d'années de création de formulaires, de travail avec des partenaires sur leurs formulaires et de toujours lutter pour répondre à tous les besoins d'accessibilité et de référencement qui surviennent dans un tel domaine.

Notre guide des formulaires couvre un large gamme de sujets, de la façon de structurer un formulaire horizontal avec des étiquettes en ligne au lieu de l'empilement par défaut, comment séparer les composants du formulaire en blocs logiques, la meilleure façon de gérer les messages d'indication et de validation, afficher le contenu dans un formulaire basé sur l'état un élément de formulaire et bien plus encore. Nous avons rassemblé toutes ces informations pour vous aider à créer les meilleures formes angulaires possibles, même si vous n'utilisez pas Kendo UI for Angular . Je vais plonger dans quelques-uns des conseils les plus juteux de cet article. N'oubliez pas de consulter le Guide complet des formulaires pour voir notre liste complète de conseils en matière de formes sémantiques et bien comportées!

«Mise en page horizontale» → aka Inline Labels

pour créer des formulaires et afficher des étiquettes est vertical, comme le formulaire ci-dessous. Ceci est créé en faisant en sorte que les étiquettes et les entrées soient de niveau bloc et de pleine largeur, de sorte qu'elles s'empilent toutes bien dans une colonne. (C'est par défaut, btw, avec les composants de formulaire de l'interface utilisateur Kendo à l'intérieur d'un parent kendo-formfield .)

Cependant, il est simple d'avoir un côté -à côté ou étiquettes en ligne pour une «mise en page horizontale»:

• attribue la classe k-form-horizontal à l'élément form
• définit l'orientation propriété de FormField à forme horizontale

Vérifiez les différences ici dans ce StackBlitz .

Accessibilité et sémantique Gagner avec les contrôles de formulaire de regroupement

Une bonne astuce à retenir pour le référencement et l'accessibilité est de regrouper vos contrôles de formulaire de manière logique et d'entourer les groupes avec les éléments legend et fieldset .

A la légende est un moyen de créer une étiquette pour un groupe de contenu (le fieldset).

Parfois, il peut être difficile de savoir quand nous devrions utiliser des éléments comme celui-ci dans nos formulaires. Le blog d'accessibilité pour Gov.UK vous conseille de les utiliser chaque fois que vous avez plusieurs questions relatives au même sujet ou une question à choix multiple avec des boutons radio qui doivent être regroupés sous une seule légende.

Lorsqu'ils sont utilisés correctement, le champ et la légende Les éléments lient les champs de formulaire associés de manière accessible aux personnes qui ne peuvent pas voir la disposition visuelle du formulaire. – Gov.UK

Le référencement et l'accessibilité sont deux éléments auxquels les gens ne pensent pas toujours pour les formulaires, mais une solution pour faire progresser votre formulaire vers un être plus accessible consiste à utiliser ces deux éléments.

Formulaire de séparation Contrôles avec sauts de ligne

Une autre solution super simple et sous-utilisée pour le découpage des formulaires est le saut de ligne!

Les séparateurs ajoutent un saut de ligne à la mise en page et améliorent le taux de conversion du formulaire. La séparation des sections vous permet de rendre les formulaires longs plus faciles à manipuler. Pour ajouter un séparateur, ajoutez la classe k-form-separator sur un élément span .

Regardez simplement comment une si petite chose peut vraiment élever une forme:

C'est une si petite chose mais cela peut vraiment aider à diviser le contenu et à créer un flux plus fluide pour l'utilisateur. En utilisant Kendo UI, c'est aussi simple que d'ajouter un k-form-separator !

Validation de formulaire et messages d'erreur

Indicateurs d'erreur – Quelque chose ne va pas avec votre saisie

Un autre problème nos formulaires guide entre dans la validation du formulaire. Il est important de donner des commentaires aux utilisateurs lorsqu'ils parcourent un formulaire. Non seulement les indicateurs de couleur du champ de formulaire ou les messages d'erreur sont importants, mais aussi le moment de l'erreur. Il est préférable que les erreurs n'apparaissent qu'après avoir touché ou modifié le champ ( dirty ).

Il est important de ne pas valider uniquement vos formulaires, mais que cela se produise au bon moment. Juste après que l'utilisateur a mal rempli quelque chose, il est temps de l'alerter, pas lorsque le formulaire est soumis.

Le composant FormField de Kendo UI vous permet de contrôler quand et comment les messages de validation seront affichés, facilement, conformément à la Guide de validation de forme angulaire . Pour en savoir plus sur le composant FormField, consultez nos documents pour plus de détails.

Outre les consignes d'accessibilité, la segmentation logique des formulaires et la validation des formulaires, notre guide des formulaires décrit également plusieurs de nos éléments de formulaire couramment utilisés et explique comment pour les construire correctement ensemble sous une forme angulaire. Consultez-le pour tous vos besoins en matière de formulaires: Guide des formulaires .

Comme toujours, nous adorons les commentaires d'amour ici sur l'équipe de Kendo UI! S'il vous plaît laissez-nous savoir si cette application de démonstration vous a été utile et quel type d'autres applications de démonstration vous aimeriez voir!

Interface utilisateur de Kendo pour Angular Feedback Portal

Alyssa est l'avocat du développeur angulaire pour l'interface utilisateur de Kendo. Si vous aimez Angular, React, Vue ou jQuery et que vous aimez aussi les composants magnifiques et très détaillés, consultez Kendo UI . Vous pouvez trouver l'interface utilisateur de Kendo pour la bibliothèque angulaire ici ou simplement sauter dans un essai gratuit de 30 jours aujourd'hui. Bon codage!