Former kan vara en av de mest komplexa aspekterna av ditt front-end-utvecklingsarbete. De är mycket mer komplicerade än de flesta av de artiklar som du ska arbeta med från både ett HTML- och CSS-perspektiv.
Om du har blivit frustrerad med former tidigare, oroa dig inte, det finns hopp! Idag ska vi gå över några verktyg och ramar som hjälper dig att få jobbet utan huvudvärk.
Två sätt att skina denna katt
Vi tar en titt på två olika typer av verktyg idag som kan hjälpa dig att bygga fantastiska former: ramar och webbapps.
Ramar representerar DIY-rutten, de ger dig förbyggd styling och funktionalitet samtidigt som du fortfarande tillåter den typ av fri reglering som endast kodning för hand kan erbjuda. Nivån på kunskap och talang här är fortfarande ganska hög, men lönen är att du inte betalar en cent och du behåller fullständig frihet att göra vad du vill.
I motsats härtill utgör formverktygsprogram en automatiserad lösning. Dessa drivs ofta av WYSIWYG-designsystem som hindrar dig från att skriva en enda karaktär av kod. Vidare är de vanligtvis bundna med en tjänst som accepterar och kataloger utgör formulär, vilket är en enorm förmån. Nackdelen är att de inte alltid är lediga och att dina anpassningsalternativ är mer begränsade än om du kodade för hand.
Låt oss ta en titt på några av de mest populära och effektiva versionerna av båda typerna av formulärverktyg.
ramar
Först upp är ramrutan. Alla dessa är namn som du kommer att känna igen, men har du någonsin tittat på deras formulärfunktioner? De tenderar att vara ganska omfattande och hjälpsamma.
bootstrap
Twitter Bootstrap har blivit en enormt populär verktygslåda och utgångspunkt för utvecklare. Det ger dig en stenig, solid bas för att fungera från och kan raka timmar och timmar utanför fronten av ditt arbetsflöde.
Form styling i Bootstrap är oerhört omfattande. Du kan lägga dina formuläretiketter på toppen eller sidan, dina fält kan kvadras eller avrundas, lägga till kryssrutor och välja menyer. allt detta och mer i en mängd olika stilar att välja mellan.
Precis som med allt i Bootstrap, är det lika lätt att dra av det här som en del grundläggande HTML med några noggrant placerade klasser. Dokumentationen är ganska noggrann, men här är ett exempel som ger dig en smak av hur man bygger former med Bootstrap-verk.
Ganska enkelt! Tänk på att alla dessa artiklar kommer att komma ut pre-styled, vilket betyder att vi inte behöver gå in och fina med en massa CSS. De ser bra ut ur lådan!
Återigen finns det tillräckligt med funktioner här så att du kan bygga någon form av form som du vill ha med mycket liten ansträngning. Det finns till och med ett snyggt autokomplett JavaScript-bibliotek med namnet kallat? Typeahead ?.
Låt oss nu säga att du inte vill använda Bootstrap för att bygga din webbplats, men skulle fortfarande vilja utnyttja dessa fantastiska funktioner, är det möjligt? Det kan du ge dig på. Hoppa enkelt över till den anpassade nedladdningsbyggaren och avmarkera allt utom formulärmodulen. Detta kommer att trimma din nedladdning till bara de element som är nödvändiga för skapandet av formulär.
fundament
Foundation by Zurb har också massor av bra formfunktioner. Du kan bygga några riktigt avancerade former med mycket liknande tekniker som vi just såg i Bootstrap.
Koden för genomförande av formulär i stiftelsen borde se ganska lik den som vi såg tidigare. Vi brukar bara använda de grundläggande elementen som HTML5 själv ger oss med några specialklassnamn:
Som du kan se, med antingen Bootstrap eller Foundation, finns det inte mycket att lära utöver vilka HTML-element att använda och var. Den medföljande CSS-filen kommer att göra allt arbete som kapar dessa element och gör dem snygga.
Stiftelsens blankettstöd är inte ganska som djupgående och omfattande som Bootstrap, men kom ihåg att detta kan vara bra. Om du bygger enkla former behöver du inte alltid fluffen.
En sak som Foundation har som är ganska cool är ett JavaScript som låter dig implementera dina egna formelement. Till exempel, om du vill skapa en anpassad kryssruta design gör Foundation det lika enkelt som några klasser och en liten JavaScript-kod.
52 ramar
52 Framework var en av de allra första HTML5-ramarna för att träffa webben. Jag är inte säker på hur aktivt utvecklad det är idag, men det har faktiskt några grundläggande formfunktioner som ingår.
Du kan se en demosida här och en videoguide går igenom funktionaliteten här.
I slutändan tror jag att du är mycket bättre med antingen Basecamp eller Foundation, som är mycket mer imponerande, grundlig och uppdaterad. Men om du har använt 52 Framework tidigare och redan är bekant med det, kanske du vill titta på formulärfunktionerna.
Formalisera
Formalisera är en CSS-ram som syftar till att göra formulärformning konsekvent över alla större webbläsare. Du kopplar upp det med ditt favorit JavaScript-bibliotek och det gör allt tungt för dig.
Formaliserades skapades av Nathan Smith, som också skapade 960 Grid System. Självklart, eftersom det här är fallet, vet du att Formalize är toppklass och hjälper de flesta webbläsare att stödja de senaste HTML5-formulärfunktionerna.
Formee
Formee är en annan stor ram som endast är avsedd att hjälpa dig att bygga perfekta former.
Formee har tre huvudmål. Det första målet är att göra layout enklare. Formee bygger på idéerna från 960.gs och låter dig använda liknande konventioner för att utforma dina former. Det andra målet är kompatibilitet med webbläsare. Formee normaliserar utseendet på dina formulär över alla större webbläsare. Det tredje målet är att få blanketterna att se fantastiska ut.Attraktiv standard styling tillämpas och kan anpassas helt efter dina behov.
Formbyggare
Nu när vi har sett några av de bästa formulärramarna runt, låt oss flytta på ett par riktigt stjärnformade byggare och tjänster.
Wufoo
Om du pratar om formbyggare kan du helt enkelt inte misslyckas med att ta fram Wufoo, vilket är överlägset en av de bästa alternativen i det här utrymmet.
Wufoo gör det oerhört enkelt att skapa webbformulär av alla slag, oavsett om du känner till lite kod eller inte. Allt du behöver göra är att dra ut de förformaterade, förkodade formelementen på din duk, där du kan ändra och ordna dem med drag och släpp lätt.
Jag kan verkligen inte säga tillräckligt om hur bra Wufoo är som både en byggmästare och en allmän webbhanteringsservice. Även om du har det bra med stylingformulär för hand finns det alla backend-utvecklare saker som blir väldigt komplicerade riktigt snabbt. E-postmeddelanden, meddelanden, betalningsaccept, analytics, filuppladdning, om du inte vet vad du gör, kan det här vara en mardröm. Wufoo handtag Allt av det för dig. I stället för huvudvärk får du en strömlinjeformad service och en fin instrumentbräda för att hantera alla dina formulär.
Wufoo har ett trevligt litet gratis konto för att komma igång, och om dina behov är grundläggande kan det vara allt du någonsin behöver. När du är redo för de stora ligorna ser du dock någonstans mellan $ 15 och $ 200 per månad.
JotForm
Om du letar efter ett bra Wufoo-alternativ, kolla in JotForm. Denna fantastiska tjänst har funnits länge, jag personligen använde den i flera år innan jag någonsin hört talas om Wufoo.
För det mesta är JotForms funktioner jämförbara med Wufoo. Formverktyget och rapporteringsfunktionerna är inte lika trevliga som Wufoo, men de är fortfarande helt funktionella och så lätt att använda att vem som helst kan bygga bra former med dem.
Liksom Wufoo, kan JotForm hantera alla dina komplicerade behov som betalning via PayPal eller stripe, CAPTCHAs, auto-complete och mer.
En sak som JotForm verkligen har för det är en bra prisstruktur. De ger alla användare obegränsade blanketter med obegränsade fält, sedan uppskattar kostnaden baserat på hur många inlägg du får, lagring du behöver etc. Premiumplanen är bara $ 9,95 per månad och den professionella planen är bara $ 49,95, vilket kan spara Du är en förmögenhet om du tittar på $ 200 / månad Wufoo planen.
Vad använder du?
Formbyggnad, styling och rapportering har en tendens att driva uppenbart grundläggande webbdesignprojekt till utvecklingsområde på hög nivå. Oroa dig inte, du är inte ensam om att vara förvirrad om det här, det är därför det finns så många bra verktyg som ovan för att hjälpa dig med.
Lämna en kommentar nedan och berätta vad du tycker om dessa alternativ och vilken metod eller tjänst du använder för formulär.