Comment apprivoiser les formulaires dans la conception Web
Les formulaires sont souvent considérés comme l'un des éléments HTML les plus douloureux à programmer. Mais la conception et le développement de la forme ont progressé à pas de géant; ce n'est pas aussi difficile qu'auparavant.
Cela étant dit, même si l’industrie a réalisé d’énormes progrès, certains obstacles demeurent. En fin de compte, les formulaires d'apprivoisement sont possibles; ça prend juste du travail.
Dans cet article, nous examinerons quelques-uns des contrôles de formulaire les plus utilisés et différents outils et plug-ins qui peuvent vous aider à déployer des formulaires sur vos sites Web.
Si vous avez d'autres conseils ou des liens vers d'autres ressources utiles, n'hésitez pas à les publier dans les commentaires.
Briser les contrôles
Commençons par les diviser en deux compartiments, car certains contrôles de formulaire n'ont jamais été très difficiles à utiliser.
Contrôles amicaux
Les contrôles les plus faciles à utiliser sont la zone de saisie de base, la zone de texte et le bouton. Ils fonctionnent bien avec les CSS standard et sont heureusement les éléments de forme les plus courants. Si vous n'avez pas besoin d'utiliser les plus difficiles, alors vous avez de la chance.
Avec les progrès des coins arrondis CSS3, des ombres portées et des dégradés, la plupart des styles les plus courants sont désormais encore plus faciles. Vous n'avez rien à craindre avec ces contrôles.
Contrôles gênants
Certains autres contrôles de la forme peuvent être une douleur massive dans le cou. Par exemple, si vous concevez un contrôle déroulant extrêmement stylisé, le développeur voudra probablement discuter avec vous. Vos options de style seront assez limitées: couleur de la bordure, remplissage, couleur de fond, etc. Si vous avez besoin de plus de style, je vous suggère de consulter le développeur pour vous assurer de ne pas créer un problème majeur pour eux.
Les contrôles de formulaire problématiques incluent:
- sélectionnez multiple,
- sélectionnez le menu déroulant,
- cases à cocher,
- boutons radio,
- téléchargement de fichiers.
Des outils modernes pour les formulaires
Comme mentionné, un certain nombre d'outils incroyables sont disponibles pour vous aider à mettre en forme les contrôles de formulaire.
Formaliser est votre arme secrète pour que les contrôles de base et les styles de base se comportent de manière cohérente entre les navigateurs. Et ses styles par défaut sont propres et beaux. Cette bibliothèque géniale fonctionne également parfaitement avec une large gamme de bibliothèques JavaScript, telles que jQuery , Dojo et MooTools .
Remplacement du contrôle de forme
Si vous voulez faire des choses radicales, des outils utiles sont disponibles. Une tactique brillante pour apprivoiser les formulaires Web consiste à masquer le contrôle réel et à le remplacer entièrement par un modèle fabriqué. Cela vous donne un plus grand contrôle sur le rendu du formulaire.
Un bon exemple de ceci est Uniforme , un plug-in jQuery pour créer des formulaires complexes. Il se décline en trois thèmes différents. Et si vous voulez créer un thème personnalisé, utilisez simplement le service Générateur CSS pour habiller facilement le plug-in.
Un autre plug-in jQuery Niceforms . Bien qu'il ne soit pas doté de la fonctionnalité de re-découpage pratique d'Uniform, il offre un style de base qui pourrait parfaitement répondre à vos besoins.
Enfin, il y a l'extension commerciale jQuery Wijmo . Le module qui nous intéresse ici est le décorateur de formulaire , qui est en fait gratuit à utiliser. Il aborde quelques-uns des contrôles les plus problématiques: cases à cocher, boutons radio et menus déroulants. Faisant partie d'une plus grande bibliothèque commerciale, cet outil apporte des avantages, dont les principaux sont solides Documentation et payé soutien . Enfin, j'adore la façon dont il gère le skinning; il utilise le jQuery UI ThemeRoller , facilitant le travail de designs personnalisés.
Contrôles de formulaire inventés
Enfin, s’il n’ya pas de contrôle de formulaire qui fasse ce dont vous avez besoin, vous pouvez en inventer un! Certaines personnes très intelligentes en ont déjà fait beaucoup, et l'un de leurs outils répond peut-être déjà à vos besoins.
Sliders
Une chose qui manque au HTML standard (mais fait partie de HTML5) est un contrôle de curseur de base. Il y a beaucoup de réponses à cela, y compris un de Wijmo , qui est basé sur le Curseur jQuery UI .
Uploaders
Bien que vous puissiez utiliser le contrôle de saisie de fichier pour permettre aux utilisateurs de sélectionner un fichier à télécharger, vous souhaiterez peut-être obtenir un résultat un peu plus sophistiqué, en particulier si le téléchargement de fichiers est essentiel pour votre site Web. L'une des meilleures solutions est Uploadify . Il permet aux utilisateurs de sélectionner plusieurs fichiers et de voir les progrès. Il est livré avec une variété d'options de disposition et de fonctionnalité.
Cases à cocher de style curseur et boutons radio
Un élément d'interface utilisateur populaire (grâce à l'iPhone) est l'interrupteur marche / arrêt qui glisse d'un côté à l'autre. Avec ce plug-in pratique jQuery , vous pouvez transformer une case de base ou un bouton radio en un seul. Que vous appeliez ceci un contrôle de formulaire inventé ou un outil de remplacement de formulaire, c'est un excellent moyen de permettre aux utilisateurs d'activer et de désactiver les options.
Boutons créatifs
jQuery UI est une autre prise intéressante sur les contrôles de base. Ce qu'il appelle comme boutons pourrait également être utilisé pour créer des ensembles d'options basés sur des boutons, des boutons radio et des cases à cocher. Ce faisant, vous transformez ces contrôles en une autre forme visuelle. Dans l'image ci-dessous, vous trouverez un ensemble de boutons radio conçus comme une rangée de boutons.
HTML5 Forms
HTML5 a apporté beaucoup de possibilités intéressantes aux formulaires Web. Bien que cela dépasse le cadre de cet article, il est toujours pertinent. Voici quelques ressources clés pour vous aider à creuser:
- " Une forme de folie , "Plongez dans HTML5;
- " Fun avec les formulaires HTML5 , "Richard Shepherd;
- " HTML5 Forms , "Wufoo;
- " Passez une journée sur le terrain avec les formulaires HTML5 , "Inayaili de León.
En conclusion, les contrôles de formulaire constituent l’un des obstacles les plus critiques dans le développement d’un site Web de base.
Un concepteur qui comprend les limites, connaît les outils et reconnaît les possibilités d'ajustement facile sera en mesure de prendre des décisions éclairées qui amélioreront finalement les résultats.