Hvordan Tame Skjemaer i Web Design
Skjemaer regnes ofte som en av de mest smertefulle HTML-elementene som skal programmeres. Men formutforming og utvikling har utviklet seg i hopp og grenser; det er ikke så vanskelig som det en gang var.
Når det blir sagt, mens industrien har gjort store fremskritt, er det fortsatt noen hindringer på plass. Til slutt er det mulig å tømme skjemaer; det tar bare litt arbeid.
I dette innlegget tar vi en titt på noen av de mest brukte skjemakontrollene og på forskjellige verktøy og plugin som skal hjelpe deg med distribusjon av skjemaer på nettstedene dine.
Hvis du har andre tips eller lenker til andre nyttige ressurser, kan du legge dem i kommentarene.
Bryter ned kontrollene
La oss starte med å dele dem i to bøtter, fordi noen formskontroller aldri har vært mye trøbbel for å jobbe med.
Vennlig kontroll
Kontrollene som er enkleste å jobbe med, er den grunnleggende innskriftsboksen, tekstområdet og knappen. De fungerer bra med standard CSS og er heldigvis de vanligste formelementene. Hvis du ikke trenger å bruke de vanskeligste, så er du heldig.
Med fremdriften av CSS3 avrundede hjørner, slipp skygger og gradienter, mange av de vanligste stilene er nå enda enklere. Du har ingenting å frykte med disse kontrollene.
Plagsomme kontroller
Visse andre former for kontroll kan være en stor smerte i nakken. For eksempel, hvis du designer en rullegardinkontroll som er ekstremt stilisert, vil utvikleren trolig ønske å ha en prat med deg. Dine valg for styling vil være ganske begrenset: border farge, polstring, bakgrunnsfarge, den slags ting. Hvis du trenger mer styling enn dette, foreslår jeg at du kontakter utvikleren for å sikre at du ikke skaper et stort problem for dem.
Besværlige formkontroller inkluderer:
- velg flere,
- velg rullegardinmenyen,
- boksene,
- radioknapper,
- filopplasting.
Moderne verktøy for skjemaer
Som nevnt finnes en rekke utrolige verktøy for å hjelpe deg med å peke formskontroller i form.
formal~~POS=TRUNC er ditt hemmelige våpen for å få grunnleggende skjermkontroller og stiler for å oppføre seg konsekvent på tvers av nettlesere. Og standardstilene er rene og vakre. Dette fantastiske biblioteket fungerer også perfekt med et bredt spekter av JavaScript-biblioteker, for eksempel jQuery , Dojo og MooTools .
Formkontroll erstatning
Hvis du vil gjøre noen radikale ting til et skjema, er nyttige verktøy tilgjengelige. En strålende taktikk for taming webskjemaer er å skjule den faktiske kontrollen og erstatte den helt med en produsert. Dette gir deg langt større kontroll over hvordan skjemaet gjøres.
Et godt eksempel på dette er Uniform , en jQuery-plugin for å lage smarte skjemaer. Den kommer i tre forskjellige temaer. Og hvis du vil lage et tilpasset tema, bruk bare tjenesten CSS generator for å lete på pluggen.
En annen jQuery-plugin Niceforms . Selv om den ikke har den praktiske re-skinning funksjonaliteten til Uniform, tilbyr den en grunnleggende stil som godt passer til dine behov som det er.
Til slutt er det den kommersielle jQuery-utvidelsen Wijmo . Modulen vi er interessert i her er form decorator , som faktisk er fri til bruk. Det takler noen av de mer problematiske kontrollene: avmerkingsbokser, radioknapper og nedtrekk. Å være en del av et større kommersielt bibliotek, gir dette verktøyet noen fordeler, de fremste som er sterke dokumentasjon og betalt Brukerstøtte . Til slutt elsker jeg måten det håndterer på huden; det bruker jQuery UI ThemeRoller , gjør det enkelt å jobbe med tilpassede design.
Invented form kontroller
Til slutt, hvis det ikke er skjemakontroll som gjør det du trenger, kan du oppfinne en! Noen veldig smarte mennesker har allerede gjort mye av dette, og kanskje et av verktøyene deres passer allerede til dine behov.
Sliders
En ting som mangler fra standard HTML (men er en del av HTML5) er en grunnleggende skyvekontroll. Det er mange svar på dette, inkludert en fra Wijmo , som er basert på jQuery UI-skyveknappen .
opplastere
Mens du kan bruke filinngangskontrollen slik at brukerne kan velge en fil for opplasting, vil du kanskje ha noe litt snazzier, spesielt hvis filopplastinger er kritiske for nettstedet ditt. En av de beste løsningene er Uploadify . Det lar brukerne velge flere filer og vise fremdrift. Den leveres med en rekke layout og funksjonalitet.
Avmerkingsbokser for glidebryter og radioknapper
Et populært UI-element (takket være iPhone) er på / av-bryteren som glir fra side til side. Med Denne praktiske jQuery-plugin-modulen , kan du forvandle en grunnleggende boks eller radioknapp til en. Enten du kaller dette en oppfunnet skjemakontroll eller et skjemautskiftingsverktøy, er det en fin måte å aktivere brukere på å slå alternativene på og av.
Kreative knapper
jQuery brukergrensesnitt er en annen interessant ta på grunnleggende kontroller. Hva det merker som knapper kan også brukes til å lage opsjonssett basert på knapper, radioknapper og boksene. Ved å gjøre det, forvandler du disse kontrollene til en annen visuell form. I bildet nedenfor er et sett med radioknapper utformet som en rad knapper.
HTML5 skjemaer
HTML5 har gitt mange spennende muligheter til webformer. Mens det er utenfor rammen av denne artikkelen, er det fortsatt relevant. Her er noen viktige ressurser for å hjelpe deg med å grave i:
- “ En form for galskap , "Dykk inn i HTML5;
- “ Morsomt med HTML5 skjemaer , "Richard Shepherd;
- “ HTML5 skjemaer , "Wufoo;
- “ Ha en feltdag med HTML5 skjemaer , "Inayaili de León.
Til slutt er formkontroller en av de mest kritiske hindringene i å utvikle en grunnleggende nettside.
En designer som forstår begrensningene, kjenner verktøyene og gjenkjenner muligheter for enkle tweaks vil kunne ta informerte beslutninger som til slutt forbedrer bunnlinjen.