Share
In navolging van onze blik op knoppen in Zurb's Foundation, gaan we nu kijken naar aangepaste formulieren en switches. Tijdens deze tutorial gaan we aan een oefening werken; een contactformulier dat u aan uw projecten kunt toevoegen of er gewoon mee kunt spelen. Zodra we dat hebben opgebouwd, gaan we verder met andere formulierelementen.
Formulieren, voor mij althans, zijn altijd een beetje lastig geweest, vooral wanneer ik ze in mijn overdreven ambitieuze ontwerpen paste. Foundation maakt dit hele proces eenvoudiger door een JavaScript-plug-in voor aangepaste formulieren op te nemen. Het is heel eenvoudig in te stellen en biedt u de mogelijkheid om uw formulierelementen gemakkelijk aan te passen met behulp van CSS.
Om de aangepaste formulieren te laten functioneren, moet u foundation.forms.js opnemen. Je moet ook zeker weten dat je zepto.js en foundation.js toevoegt boven de plug-in formulieren.
De plug-in werkt door elk formulierelement zelf te verbergen en meer visueel controleerbare elementen zoals divs en ankertags uit te spugen. Vervolgens geeft het elke interactie door aan het originele verborgen element, wat betekent dat de vorm nog steeds functioneert zoals het bedoeld was. Laten we eens kijken hoe dat precies werkt.
Qua websites is het meest voorkomende formulier waarschijnlijk altijd het contactformulier geweest. In deze oefening nemen we de standaardinputs die u mag verwachten te zien, plus een of twee ongewone voorbeelden die nuttig kunnen zijn voor u in uw projecten.
Neem je standaard label. Om de invoegtoepassing voor aangepaste formulieren te starten, moeten we een klasse "aangepast" toevoegen, zoals: , gedaan. We hebben nu ons aangepaste formulier.
Om aan de slag te gaan, hebt u de formuletag nodig die een rij met twee kolommen bevat, zoals deze:
Nu beginnen we met de linkerkolom; in het voorbeeld heb ik een vervolgkeuzelijst gebruikt om de aanhef te selecteren, gevolgd door een invoervak voor de naam. Deze gebruiken standaardtags met een "inklappen" -klasse op de rij. We volgen dit op met het e-mailveld en de vervolgkeuzelijst 'hoe u ons heeft gevonden'.
U moet ervoor zorgen dat uw select element een id heeft, maar afgezien daarvan is de markup echt recht toe recht aan. Dus om dit samen te voegen met de formuliercode die we eerst hebben bekeken, moet je deze in de eerste div zetten met de "large-6" -klasse.
De volgende zijn de elementen voor de tweede kolom. Deze omvatten het tekstgedeelte, een "spamme" -schuifje en een schakelaar, gevolgd door de verzendknop.
We hebben switches nog niet besproken, dus laten we dat nu doen.
Schakelaars zijn een geweldige manier om visueel te schakelen tussen ingangen. Hun structuur bestaat uit een div met een "switch" -klasse, gevolgd door je keuze voor een maat. Deze maten zijn "klein", "klein" en "groot". U kunt ook instellen dat de schakelaar moet worden afgerond met de klasse "afgerond". De structuur zelf heeft twee ingangen, één voor elke schakeltoestand. Deze hebben hun eigen respectievelijke labels die de Foundation gebruikt voor de tekst in elke staat. De ingangen hebben id's nodig en de labels hebben het samenvallende "voor" -attribuut nodig.
Dat bestrijkt bijna ons kleine contactformulier, je kunt dit nemen en ermee spelen of het gebruiken in je volgende project.
Andere formulierelementen
Wat heb je nog meer nodig in een webformulier? Om te beginnen hebben we goede oude radio's, elk met dezelfde naam en een eigenschap "display: none".
Notitie: Ik weet dat dit een vreselijke inline-stijl is, maar in dit geval is het aan te raden, zodat je die flikkering niet krijgt wanneer het stylesheet begint.
Een van de leukere dingen aan deze aangepaste formulieren is de snelle optie om een element te maken dat een element heeft dat eraan voorafgaat of dat eraan voorafgaat. Het is een goede manier om te suggereren wat al aanwezig is, of een indicatie te geven van wat voor soort gebruikersinteractie nodig is.
Hieronder ziet u dat we een spanelement hebben met de klasse "prefix", gevolgd door een vervolgkeuzelijst. U moet deze elementen nog steeds in een kolomstructuur plaatsen, omdat de klassen "prefix en postfix" voorkomen dat de elementen worden gescheiden. U kunt ook goed gebruik maken van de klasse "postfix" in een object, zoals een zoekvak, waarbij je hebt je tekstinvoer gevolgd door een knop.
http: //webdesign.tutsplus
Foutmeldingen
De meeste formulieren hebben minimaal één veld nodig of het formulier kan niet correct worden ingediend. Foundation verzorgt deze validatiesituaties met de klasse "error". Voeg dit gewoon toe aan elke invoer, label, kleine tag of kolom en kijk hoe deze elementen een rode foutstijl aannemen.
Om dit echt te realiseren, moet je de plug-in voor jQuery-validatie pakken en de vereiste parameter gebruiken om deze toestanden te tonen wanneer een gebruiker onjuist informatie invoert.
Nuttig instrument
Als het gaat om de kleurkeuzes in Foundation, is het niet altijd gemakkelijk om een goede combinatie te krijgen zonder de hulp van een ontwerper. Gelukkig biedt Colourco.de een geweldige manier om kleurenschema's te vinden voor uw volgende ontwerp. Beweeg je cursor van links naar rechts om de tint te wijzigen en omhoog of omlaag om de helderheid te wijzigen. Het menu biedt opties voor verschillende kleurenschema's, waaronder monochromatisch, anagogisch en aanvullend.
Conclusie
Formulieren vormen een essentieel onderdeel van elke website en Foundation voegt enkele leuke functies toe om uw formulieren solide te maken. Als je avontuurlijk bent, neem dan eens een kijkje naar enkele andere vormexperimenten van Zurb, inclusief hun AJAX image uploader?
Accentsconagua
