Sådan tæmmer du formularer i webdesign
Former anses ofte for at være et af de mest smertefulde HTML-elementer til at programmere. Men form design og udvikling har udviklet sig i spring og grænser; det er ikke så hårdt som det engang var.
Når det er sagt, mens industrien har gjort enorme fremskridt, er der stadig nogle forhindringer. I sidste ende er tamingformer mulige; det tager bare noget arbejde.
I dette indlæg tager vi et kig på nogle af de mest anvendte formularkontroller og på forskellige værktøjer og plugins, der skal hjælpe dig med udbredelsen af formularer på dine hjemmesider.
Hvis du har andre tip eller link til andre nyttige ressourcer, er du velkommen til at skrive dem i kommentarerne.
Bryder kontrollerne ned
Lad os begynde med at dele dem i to spande, fordi nogle formularkontroller aldrig har været meget svært at arbejde med.
Venlige kontroller
De knapper, der er enkleste at arbejde med, er den grundlæggende inputboks, tekstområde og knap. De arbejder godt med standard CSS og er heldigvis de mest almindelige formelementer. Hvis du ikke behøver at bruge de vanskeligere, så er du heldig.
Med udviklingen af CSS3 afrundede hjørner, slip skygger og gradienter, er mange af de mest almindelige stilarter nu endnu nemmere. Du har intet at frygte med disse kontroller.
Besværlige kontroller
Visse andre formkontroller kan være en massiv smerte i nakken. For eksempel, hvis du designer en drop-down-kontrol, der er ekstremt stiliseret, vil udvikleren sandsynligvis gerne have en chat med dig. Dine muligheder for styling vil være ret begrænsede: border farve, polstring, baggrundsfarve, den slags ting. Hvis du har brug for mere styling end dette, foreslår jeg, at du konsulterer udvikleren for at sikre, at du ikke skaber et stort problem for dem.
Besværlige formkontroller omfatter:
- vælg flere,
- vælg drop-down,
- afkrydsningsfelter,
- radioknapper,
- fil upload.
Moderne værktøjer til formularer
Som nævnt er der en række utrolige værktøjer til rådighed, der hjælper dig med at piske formskontroller i form.
formalisere er dit hemmelige våben til at få grundlæggende formkontroller og stilarter til at opføre sig konsekvent på tværs af browsere. Og dens standardstile er rene og smukke. Dette fantastiske bibliotek fungerer også perfekt sammen med en bred vifte af JavaScript-biblioteker, f.eks jQuery , Dojo og MooTools .
Udskiftning af formkontrol
Hvis du vil gøre nogle radikale ting til en formular, er nyttige værktøjer tilgængelige. En strålende taktik til taming webformularer er at skjule den faktiske kontrol og erstatte den helt med en fremstillet. Dette giver dig langt større kontrol over, hvordan formularen gør.
Et godt eksempel på dette er Uniform , en jQuery-plugin til oprettelse af smarte formularer. Den kommer i tre forskellige temaer. Og hvis du vil oprette et brugerdefineret tema, skal du blot bruge tjenesten CSS generator for nem at beskytte plug-in'en.
En anden jQuery-plugin Niceforms . Selv om det ikke har den praktiske re-skinning funktionalitet af Uniform, det tilbyder en grundlæggende stil, der meget vel passer til dine behov som det er.
Endelig er der den kommercielle jQuery udvidelse Wijmo . Modulet her er interesseret i form decorator , som faktisk er gratis at bruge. Det tackler nogle af de mere problematiske kontroller: afkrydsningsfelter, radioknapper og drop-downs. At være en del af et større kommercielt bibliotek, giver dette værktøj nogle fordele, hvis fremtrædende er stærke dokumentation og betalt support . Endelig elsker jeg den måde, den håndterer på huden; det bruger jQuery UI ThemeRoller , gør det nemt at arbejde med brugerdefinerede designs.
Forventede formkontroller
Endelig, hvis der ikke er en formular kontrol, der gør hvad du har brug for, kan du opfinde en! Nogle meget kloge mennesker har allerede gjort meget af dette, og måske er et af deres redskaber allerede i overensstemmelse med dine behov.
sliders
En ting, der mangler fra standard HTML (men er en del af HTML5), er en grundlæggende skyderkontrol. Der er mange svar på dette, herunder en fra Wijmo , som er baseret på jQuery UI skyderen .
uploadere
Mens du kunne bruge filindgangskontrollen til at gøre det muligt for brugerne at vælge en fil til upload, kan det være, at du vil have noget lidt snazzier, især hvis filoploader er afgørende for din hjemmeside. En af de bedste løsninger er Uploadify . Det giver brugerne mulighed for at vælge flere filer og for at se fremskridt. Den leveres med en række forskellige layout og funktionalitetsindstillinger.
Afkrydsningsfelter til skyderen og radioknapper
Et populært UI-element (takket være iPhone) er tænd / sluk-kontakten, der glider fra side til side. Med Denne praktiske jQuery-plugin , kan du omdanne en grundlæggende afkrydsningsfelt eller radioknap til en. Uanset om du kalder dette en opfindsom formularkontrol eller et formularudskiftningsværktøj, er det en fantastisk måde at aktivere brugerne til at tænde og slukke for valgmuligheder.
Kreative knapper
jQuery UI er en anden interessant tage på grundlæggende kontrol. Hvad det mærker som knapper kan også bruges til at lave indstillingssæt baseret på knapper, radioknapper og afkrydsningsfelter. Dermed omdanner du disse kontroller til en anden visuel form. I billedet nedenfor er et sæt radioknapper stylet som en række knapper.
HTML5-formularer
HTML5 har bragt mange spændende muligheder for webformularer. Selv om det er uden for denne artikels anvendelsesområde, er det stadig relevant. Her er nogle vigtige ressourcer til at hjælpe dig med at grave i:
- ” En form for galskab , "Dive Into HTML5;
- ” Sjov med HTML5-formularer "Richard Shepherd;
- ” HTML5-formularer , "Wufoo;
- ” Få en feltdag med HTML5-formularer , "Inayaili de León.
Afslutningsvis er formkontrol en af de mest kritiske hindringer i udviklingen af en grundlæggende hjemmeside.
En designer der forstår begrænsningerne, kender værktøjerne og anerkender muligheder for nemme tweaks vil kunne træffe velinformerede beslutninger, der i sidste ende forbedrer bundlinjen.