Share
Etterpå fra vårt blikk på knapper i Zurb's Foundation, la oss nå se på tilpassede skjemaer og brytere. Under denne opplæringen skal vi jobbe med en øvelse; et kontaktskjema som du kan legge til i prosjektene dine eller bare leke med. Når vi har bygget det, flyttes vi til andre formelementer.
Skjemaer, for meg i det minste, har alltid vært litt av en smerte, spesielt når de får dem til å passe inn i min altfor ambisiøse design. Foundation gjør denne hele prosessen enklere ved å inkludere et JavaScript-tilpasset skjema plugin. Det er veldig enkelt å sette opp og gir deg muligheten til enkelt å tilpasse skjemaelementene dine ved hjelp av CSS.
For å få de egendefinerte skjemaene til å fungere, må du inkludere foundation.forms.js. Du må også sørge for å inkludere zepto.js og foundation.js over skjemaets plugin.
Pluggen fungerer ved å gjemme hvert skjemaelement selv og spytte ut mer visuelt kontrollerbare elementer som divs og ankeretiketter. Det passerer så noen interaksjon med det opprinnelige skjulte elementet, noe som betyr at skjemaet fortsatt vil fungere som det var ment. La oss se på hvordan det fungerer akkurat.
Når det gjelder nettsteder, har den vanligste typen skjema sannsynligvis alltid vært kontaktskjemaet. I denne øvelsen tar vi standardinngangene du kan forvente å se, pluss ett eller to ekstra uvanlige eksempler som kan være nyttige for deg i prosjektene dine.
Ta din standard stikkord. For å starte pluginet for egendefinerte skjemaer må vi legge til en klasse av "egendefinert" slik: , gjort. Vi har nå vårt tilpassede skjema.
For å komme i gang trenger du skjemaetiketten som har en to kolonnerad, slik:
Nå begynner vi med den venstre kolonnen; I eksemplet har jeg brukt en rullegardin for å velge hilsen, etterfulgt av en innboks for navnet. Disse bruker standardkoder med en "collapse" klasse på rad. Vi følger dette opp med e-postfeltet og en "hvordan du fant oss".
Du må sørge for at ditt valgelement har et id, men bortsett fra det er merkingen virkelig rett frem. Så for å slå sammen dette med skjemaet koden vi først så på, må du sette den i den første diven med klassen "stor 6".
Neste opp er elementene for den andre kolonnen. Disse inkluderer tekstområdet, en "spam meg" -kryssrute og en bryter, etterfulgt av slutt på send-knappen.
Vi har ikke dekket brytere, så la oss gjøre det nå.
Brytere er en flott måte å visuelt vekslende innganger på. Deres struktur består av en div med en "bryter" klasse, etterfulgt av ditt valg av en størrelse. Disse størrelsene inkluderer "liten", "liten" og "stor". Du kan også sette bryteren avrundet med "avrundet" klassen. Strukturen selv har to innganger, en for hver bryterstilling. Disse har sine egne respektive etiketter som Foundation bruker for teksten i hver stat. Inngangene trenger ids og etikettene trenger det sammenfallende "for" -attributtet.
Det dekker stort sett vårt lille kontaktskjema, du kan ta dette og leke med det eller bruke det i ditt neste prosjekt.
Andre formelementer
Hva annet trenger du i et webskjema? For å starte har vi gode gamle radioer, som hver har samme navn og et "display: ingen" eiendom.
Merk: Jeg vet at dette er en fryktelig inline-stil, men det er tilrådelig i dette tilfellet, slik at du ikke får det flimmer når stilarket sparker inn.
En av de bedre ting om disse egendefinerte skjemaene er det raske alternativet til å lage et element som enten har et element som går foran det eller lykkes med det. Det er en fin måte å foreslå hva som allerede er til stede, eller hinting om hva slags brukermedvirkning er nødvendig.
Nedenfor kan du se at vi har et spenningselement med "prefiks" -kursen, etterfulgt av en rullegardin. Du må fortsatt sette disse elementene i en kolonnestruktur som "prefix og" postfix-klassene bare hindre at elementene blir skilt. Du kan også gjøre god bruk av klassen "postfix" i en gjenstand som en søkeboks, hvorved du har tekstinngangen etterfulgt av en knapp.
http: //webdesign.tutsplus
Feilmeldinger
De fleste skjemaer har minst ett felt som kreves, eller skjemaet mislykkes i å sende inn riktig. Stiftelsen tar hensyn til disse valideringssituasjonene med "feil" -kursen. Bare legg dette til en hvilken som helst innmatning, etikett, liten tag eller kolonne, og se etter at disse elementene tar en rød feilstil.
For å virkelig sette dette i kraft må du ta tak i jQuery-valideringspluggen og bruke den nødvendige parameteren til å vise disse tilstandene når en bruker feilaktig skriver inn informasjon.
Nyttig verktøy
Når det gjelder fargevalg i Foundation, er det ikke alltid lett å få en god kombinasjon uten hjelp av en designer. Heldigvis tilbyr Colourco.de en flott måte å finne et fargevalg for ditt neste design. Flytt markøren til høyre for å endre fargen, og opp eller ned for å endre lysstyrken. Menyen gir deg muligheter for forskjellige fargevalg, inkludert monokromatisk, anagogisk og komplementær.
Konklusjon
Skjemaer er en viktig del av hvert nettsted og Foundation legger til noen fine funksjoner for å gjøre skjemaene dine storslagne. Hvis du føler deg eventyrlystne, hvorfor ikke ta en titt på noen av Zburs andre formeksperimenter, inkludert deres AJAX-bildeopploader?
Accentsconagua
