Hur man tämmer formen i webbdesign
Former anses ofta vara en av de mest smärtsamma HTML-elementen att programmera. Men formdesign och utveckling har utvecklats av språng det är inte så svårt som det en gång var.
Med detta sagt, medan branschen har gjort enorma framsteg, finns det fortfarande några hinder. I slutändan är tämningsformer möjliga; det tar bara lite arbete.
I det här inlägget tar vi en titt på några av de mest använda formulärkontrollerna och på olika verktyg och plugin som ska hjälpa dig med att distribuera formulär på dina webbplatser.
Om du har några andra tips eller länkar till andra användbara resurser kan du skicka in dem i kommentarerna.
Bryt ner kontrollerna
Låt oss börja med att dela dem i två hinkar, eftersom vissa formkontroller aldrig har varit mycket problem att arbeta med.
Vänliga kontroller
De kontroller som är enklaste att arbeta med är den grundläggande inmatningsrutan, textområdet och knappen. De fungerar bra med standard CSS och är lyckligtvis de vanligaste formelementen. Om du inte behöver använda de svårare, så har du tur.
Med utvecklingen av CSS3 rundade hörn, släpp skuggor och gradienter, är många av de vanligaste stilar nu ännu enklare. Du har inget att frukta med dessa kontroller.
Besvärliga kontroller
Vissa andra former kontroller kan vara en stor smärta i nacken. Om du till exempel designar en nedrullningskontroll som är extremt stiliserad, kommer utvecklaren sannolikt att prata med dig. Dina alternativ för styling kommer att vara ganska begränsade: gränsen färg, vaddering, bakgrundsfärg, den sorts saker. Om du behöver mer styling än detta, föreslår jag att du kontaktar utvecklaren för att du inte skapar ett stort problem för dem.
Besvärliga formulär kontroller inkluderar:
- välj flera,
- välj rullgardinsmenyn,
- kryssrutor,
- radioknappar,
- filuppladdning.
Moderna verktyg för former
Som nämnts finns ett antal otroliga verktyg som hjälper dig att piska formkontrollen i form.
Formalisera är ditt hemliga vapen för att få grundläggande formulär kontroller och stilar för att uppträda konsekvent över webbläsare. Och standardstilarna är rena och vackra. Detta fantastiska bibliotek fungerar också perfekt med ett brett utbud av JavaScript-bibliotek, till exempel jQuery , dojo och MooTools .
Formkontroll ersättning
Om du vill göra några radikala saker till en blankett finns användbara verktyg tillgängliga. En strålande taktik för att tämma webbformulär är att dölja den faktiska kontrollen och ersätta den helt med en tillverkad. Detta ger dig mycket större kontroll över hur formuläret gör.
Ett bra exempel på detta är Enhetlig , en jQuery-plugin-modul för att skapa smarta blanketter. Den kommer i tre olika teman. Och om du vill skapa ett anpassat tema, använd bara tjänsten CSS-generatorn för att enkelt skölja pluggen.
En annan jQuery-plugin Niceforms . Medan den inte har den praktiska omhöljningsfunktionen hos Uniform, erbjuder den en grundläggande stil som mycket väl passar dina behov.
Slutligen finns det den kommersiella jQuery-förlängningen Wijmo . Modulen vi är intresserad av här är form decorator , som faktiskt är fri att använda. Det hanterar några av de mer problematiska kontrollerna: kryssrutor, radioknappar och neddragningar. Att vara en del av ett större kommersiellt bibliotek ger detta verktyg några fördelar, de främsta är starka dokumentation och betalas Stöd . Slutligen älskar jag hur det hanterar skinning; det använder jQuery UI ThemeRoller , vilket gör det enkelt att göra egna design.
Invented form kontroller
Slutligen, om det inte finns någon formkontroll som gör vad du behöver, kan du uppfinna en! Vissa väldigt smarta människor har redan gjort mycket av detta, och kanske har ett av deras verktyg redan passat dina behov.
sliders
En sak som saknas från standard HTML (men ingår i HTML5) är en grundläggande reglage för reglaget. Det finns många svar på detta, inklusive en från Wijmo , som är baserat på jQuery UI-reglaget .
innehållsleverantörer
Medan du kan använda filinmatningskontrollen så att användarna kan välja en fil för uppladdning kanske du vill ha något lite snyggare, särskilt om filuppladdningar är avgörande för din webbplats. En av de bästa lösningarna är Uploadify . Det låter användare välja flera filer och visa framsteg. Den levereras med en mängd olika layout och funktionalitetsalternativ.
Rutrutor för skjutreglage och radioknappar
Ett populärt UI-element (tack vare iPhone) är på / av-knappen som glider från sida till sida. Med den här praktiska jQuery-plugin-modulen , kan du omvandla en grundläggande kryssruta eller radioknapp till en. Oavsett om du kallar detta en uppfunnad formulärstyrning eller ett formulärutbytesverktyg, är det ett bra sätt att aktivera användarna att slå på och av alternativ.
Kreativa knappar
jQuery UI är en annan intressant ta på grundläggande kontroller. Vad det heter som knappar kan också användas för att göra alternativuppsättningar baserade på knappar, radioknappar och kryssrutor. Genom att göra så omvandlar du dessa kontroller till en annan visuell form. I bilden nedan är en uppsättning radioknappar stylade som en rad knappar.
HTML5 formulär
HTML5 har väckt många spännande möjligheter till webbformulär. Medan det ligger utanför tillämpningsområdet för denna artikel är det fortfarande relevant. Här är några viktiga resurser som hjälper dig att gräva i:
- ” En form av galenskap , "Dyk till HTML5;
- ” Kul med HTML5 formulär , "Richard Shepherd;
- ” HTML5 formulär , "Wufoo;
- ” Ha en fältdag med HTML5 formulär , "Inayaili de León.
Sammanfattningsvis är formkontrollerna en av de mest kritiska hindren när det gäller att utveckla en grundläggande webbplats.
En designer som förstår begränsningarna, känner till verktygen och känner igen möjligheter till enkla tweaks kommer att kunna fatta välgrundade beslut som i slutändan förbättrar bottenlinjen.