Share
Dans la continuité de notre étude des boutons de la Fondation Zurb, examinons maintenant les formulaires et les commutateurs personnalisés. Pendant ce tutoriel, nous allons travailler sur un exercice. un formulaire de contact que vous pouvez ajouter à vos projets ou tout simplement jouer avec. Une fois que nous avons construit cela, nous allons passer à d'autres éléments de formulaire.
Les formes, du moins pour moi, ont toujours été un peu pénibles, surtout pour les intégrer à mes conceptions trop ambitieuses. Foundation facilite tout ce processus en incluant un plugin de formulaire personnalisé JavaScript. C'est très simple à configurer et vous donne la possibilité de personnaliser facilement vos éléments de formulaire à l'aide de CSS.
Pour que les formulaires personnalisés fonctionnent, vous devez inclure foundation.forms.js. Vous devrez également vous assurer d’inclure zepto.js et foundation.js au-dessus du plugin Forms..
Le plugin fonctionne en masquant chaque élément de formulaire lui-même et en crachant davantage d'éléments contrôlables visuellement, comme les div et les balises d'ancrage. Il transmet ensuite toute interaction à l'élément caché d'origine, ce qui signifie que le formulaire fonctionnera toujours comme prévu. Voyons comment cela fonctionne exactement.
En ce qui concerne les sites Web, le type de formulaire le plus courant a probablement toujours été le formulaire de contact. Dans cet exercice, nous allons prendre les entrées standard que vous pouvez espérer voir, ainsi qu'un ou deux autres exemples inhabituels qui pourraient vous être utiles dans vos projets..
Prenez votre standard étiquette. Pour lancer le plugin de formulaires personnalisés, nous devons ajouter une classe de "custom" comme ceci: , terminé. Nous avons maintenant notre formulaire personnalisé.
Pour commencer, vous aurez besoin de la balise de formulaire qui contient une ligne de deux colonnes, comme ceci:
Nous allons maintenant commencer par la colonne de gauche. Dans l'exemple, j'ai utilisé un menu déroulant pour sélectionner la salutation, suivi d'une zone de saisie pour le nom. Ceux-ci utilisent des balises standard avec une classe "collapse" sur la ligne. Nous suivons cela avec le champ email et un menu déroulant "comment vous nous avez trouvés".
Vous devez vous assurer que votre élément select a un identifiant, mais à part cela, le balisage est vraiment simple. Donc, pour fusionner cela avec le code de formulaire que nous avons d'abord examiné, vous devrez le mettre dans la première div avec la classe "large-6".
Ensuite, les éléments de la deuxième colonne. Ceux-ci incluent la zone de texte, une case à cocher "spam me" et un commutateur, suivis enfin par le bouton de soumission.
Nous n'avons pas encore couvert d'interrupteurs, alors faisons-le maintenant.
Les commutateurs sont un excellent moyen de basculer les entrées visuellement. Leur structure comprend une div avec une classe "switch", suivie de votre choix de taille. Ces tailles incluent "minuscule", "petit" et "grand". Vous pouvez également configurer le commutateur pour qu’il soit arrondi avec la classe "arrondi". La structure elle-même a deux entrées, une pour chaque état de commutateur. Ceux-ci ont leurs propres étiquettes respectives que Foundation utilise pour le texte à l'intérieur de chaque état. Les entrées ont besoin d'identifiants et les étiquettes ont besoin de l'attribut "pour" qui coïncide.
Cela couvre à peu près notre petit formulaire de contact, vous pouvez le prendre et le jouer ou l’utiliser dans votre prochain projet..
Autres éléments de formulaire
De quoi d'autre auriez-vous besoin dans un formulaire Web? Pour commencer, nous avons de bonnes vieilles radios, qui doivent toutes porter le même nom et une propriété "display: none".
Remarque: Je sais que c'est un style en ligne horrible, mais dans ce cas, il est conseillé de ne pas avoir ce scintillement lorsque la feuille de style entre en jeu..
L’un des avantages de ces formulaires personnalisés est l’option rapide permettant de créer un élément qui est précédé ou suivi d’un élément. C'est un excellent moyen de suggérer ce qui est déjà présent, ou d'indiquer quel type d'interaction utilisateur est requis..
Vous pouvez voir ci-dessous que nous avons un élément span avec la classe "prefix", suivi d'un menu déroulant. Vous aurez toujours besoin de placer ces éléments dans une structure de colonnes en tant que classes "préfixe" et "postfix", afin d'éviter que les éléments ne soient séparés. Vous pouvez également utiliser la classe "postfix" dans un objet tel qu'un champ de recherche, dans lequel vous avez votre saisie de texte suivi d'un bouton.
http: //webdesign.tutsplus
Messages d'erreur
La plupart des formulaires ont au moins un champ obligatoire, sinon le formulaire ne sera pas envoyé correctement. Foundation prend en charge ces situations de validation avec la classe "erreur". Ajoutez-le simplement à n'importe quelle entrée, étiquette, petite balise ou colonne et observez le style d'erreur de ces éléments.
Pour vraiment mettre cela en pratique, vous devez saisir le plug-in de validation jQuery et utiliser le paramètre requis pour afficher ces états lorsqu'un utilisateur saisit des informations de manière incorrecte..
Outil utile
En ce qui concerne les choix de couleurs dans Foundation, il n'est pas toujours facile d'obtenir une bonne combinaison sans l'aide d'un designer. Heureusement, Colourco.de offre un excellent moyen de trouver un jeu de couleurs pour votre prochain dessin. Déplacez votre curseur de gauche à droite pour modifier la teinte et de haut en bas pour modifier la luminosité. Le menu vous offre des options pour différents coloris, notamment monochromes, anagogiques et complémentaires..
Conclusion
Les formulaires sont une partie essentielle de chaque site Web et Foundation ajoute quelques fonctionnalités intéressantes pour rendre vos formulaires solides. Si vous vous sentez aventureux, pourquoi ne pas jeter un coup d'œil aux autres expériences de formulaire de Zurb, y compris leur téléchargeur d'image AJAX?
Accentsconagua
