Share
Ved å bruke Matt Smiths mobilformsinteraksjonsdesign som en veiledning, vil vi skape en imponerende skjemainteraksjon for nettet som er både vakker og tilgjengelig ved hjelp av HTML, CSS og JavaScript.
Formdesign og interaksjon på nettet kan være et følsomt emne. En rekke formtilgjengelighet bekymringer og beste praksis kan gjøre utformingen av en overbevisende form-interaksjon svært vanskelig, i motsetning til å danne design på innfødte plattformer.
Matt Smith har nylig opprettet en overbevisende form interaksjon han postet til Dribbble:
Selv om det er designet for et innfødt iOS-program, kan dette skjemainteraksjonen bli gjenopprettet på nettet ved hjelp av HTML, CSS og Javascript, samtidig som det appeserer om formtilgjengelighet.
Float-etikettkonseptet har fått litt oppmerksomhet, noe som fører til diskusjon og eksperimenter over hele nettet.
Virkelig kult demo av @zelph http://t.co/Szw1bE2tib implementere super awesome float label form interaksjon http://t.co/NhKfErgd2Q av @mds
- Brad Frost (@brad_frost) 23. oktober 2013
I stedet for å bruke de samme skjema feltene i Matts design, vil vi lage et enkelt kontaktskjema du kan bruke på ditt eget nettsted. Så la oss dykke inn!
Først, la oss observere og registrere formvekslingen Matt har skapt. Dette vil tillate oss å forhåndsbestemme hvordan skjemaet skal merkes opp. Det vil også gi oss en god forståelse av hvordan du stiler skjemaet og lager samspill med JavaScript.
Skjemaet har følgende elementer vi kan oversette til HTML:
Accentsconagua
Her oppretter vi en formbeholder med et overskrift "Kontakt meg" og de tilsvarende formelementene som er strukturert innenfor listelementene. Legg merke til at vi også tildelt e-postfeltet type = "email". Dette gir kontekstuelle virtuelle tastaturer for enheter som støtter dem, så vel som enkel, nettleserstøttet validering for de nettleserne som støtter HTML5-inputtyper. For de som ikke gjør det, blir det et enkelt tekstfelt.
Det vi har nå er selve grunnleggende om et skjema som vil fungere hvor som helst og er riktig strukturert for enkel tilgjengelighet.
Merk: Vi dekker ikke server sideformular innsending i denne opplæringen, så vær så snill å endre skjemaets innsendelsesmetode etter behov.
Vi har nå et arbeidsform i HTML. Nå skal vi gjøre vårt første skritt i progressiv forbedring: søknad CSS stiler. La oss lage stiler for å gjøre skjemaet mer visuelt tiltalende samtidig som vi husker å holde skjemaet funksjonelt og tilgjengelig.
La oss lage noen grunnleggende styling for siden og form containeren. I av dokumentet vi opprettet en lenke til en fil som heter styles.css, så vi vil lage den filen nå og lagre den til roten til prosjektet vårt.
Vi begynner med å importere stilene fra Eric Meyer CSS Tilbakestill inn i vår egen fil. Du kan ta tak i disse stilene her og kopiere dem til ditt eget stilark.
Deretter la vi opprette noen generelle sidestiler:
/ * Generelt ==================================== * / *, *: før, *: etter -moz-box-size: border-box; -webkit-boks-størrelse: border-box; boks-størrelse: border-box; kropp bakgrunn: # eaedf1; kropp, input, textarea font: 1em / 1.5 Arial, Helvetica, sans-serif; .container maks-bredde: 25em; margin: 2em auto; bredde: 95%; .title font-size: 1.5em; polstring: .5em 0; tekst-align: center; bakgrunn: # 323a45; farge: hvit; border-radius: 5px 5px 0 0;
Du vil legge merke til at vi bruker Paul Irlands foreslåtte tilnærming til boksemodellen når styling former: boks-størrelse: border-box;.
Nå har vi noe noe bedre, men det kommer til å trenge litt mer arbeid.
La oss bruke noen stiler til våre skjemaelementer. Disse vil gjøre at vårt skjema ser mer ut som Matts.
Først vil vi utforme listelementene som inneholder våre formelementer.
/ * Form =================================== * / .form ul bakgrunn: hvit; margin-bunn: 1em; .form li border: 1px solid #ccc; grensebunn: 0; margin-bunn: 0px; stilling: relativ; .form li: første barn border-top: 0; .form li: siste barn border-bottom: 1px solid #ccc;
Nå har vi alle våre formelementer visuelt inneholdt. Du burde ha noe slikt:
La oss fortsette å utforme våre formelementer for å matche Matts design samtidig som vi tar hensyn til tilgjengelighetsbegrensningene på nettet.
Stil inntastingsfeltene som store blokknivåelementer i skjemaet:
label, input, textarea display: block; grense: 0; input, textarea bredde: 100%; høyde: 100%; polstring: 2.25em 1em 1em; oversikt: 0; textarea høyde: 16em; endre størrelse: ingen;
Du burde ha noe slikt:
Deretter stiler du skjemaet elementene skal sitte plassert omtrent en tredjedel av veien fra toppen av hver inngangsblokk.
etikett font-size: .8125em; / * 13/16 * / stilling: absolutt; topp: 1.23em; igjen: 1.23em; farge: # f1773b; opasitet: 1;
Merk: la du merke til opasitet regel? Vi vil bruke den egenskapen (sammen med topp eiendom) for å animere element senere på bruk av JavaScript.
Du bør ha noe som begynner å se mye ut som Matts formdesign.
Deretter må du stille inn skjemaet for å sende inn skjema.
input [type = "submit"] bakgrunn: # f1773b; margin-bunn: 1em; farge: hvit; border-radius: 3px; polstring: .75em; -webkit-utseende: ingen; / * fjern standard nettleser
Legg merke til at vi brukte attributtvelgeren for å målrette kun innleveringsknappen. Vi la til noen grunnleggende stiler sammen med en enkel samhandling på :sveve og :aktiv stater (eldre nettlesere som ikke støtter CSS forvandler vil ikke ha en fancy samhandling, men skjemaet fungerer fortsatt). Du burde nå ha noe slikt:
Vårt skjema er utformet på en måte som ligner Matts design, men også skreddersydd for å appease tilgjengelighetshensynet til nettet. Legg merke til hvordan, uten JavaScript, skjemaet fremdeles er tilgjengelig når skjemafeltene vises til enhver tid. For brukere med eldre nettlesere som ikke støtter plassholder attributt, vil de fortsatt kunne se skjemafeltene og finne ut hvilken informasjon som kreves av dem.
i tillegg og elementene dekker hele skjemafeltet blokk, så målområdet for hver inngang er ganske stort og tilgjengelig.
For eksempel, dette er hva skjemaet ville se ut på dette tidspunktet i Internet Explorer 8:
Vi shold begynner nå å tenke på hvordan å implementere samspillet Matt opprettet ved hjelp av JavaScript. Vi oppnår dette i stor grad ved å legge til og fjerne CSS klasser.
Du vil legge merke til rett før avslutningen tag vi legger en lenke til vår egendefinerte JavaScript-fil kalt scripts.js. Vi kan lage den filen nå og fortelle nettleseren å kjøre koden når DOM er klar:
$ (dokument) .ready (funksjon () // Vår kode her);
plassholder BrukerstøtteHvis du ikke har lagt merke til, er denne samspillet svært avhengig av stedholderstøtte. Stedholderattributtet støttes mye i moderne nettlesere. Fordi vårt formularinteraksjon er så avhengig av stedholderstøtte, vil vi først teste for å se om nettleseren støtter plassholdertekst. Hvis det gjøres, vil vi gjennomføre form-interaksjonen. Hvis det ikke gjør det (IE8 og IE9), vil vi bare gi grunnskjemaet uten JavaScript-interaksjon. Progressiv forbedring for seieren!
La oss først bruke jQuery's $ Støtte () for å se om nettleseren støtter plassholdertekst. Dette vil angi $ .support.placeholder til sann eller falsk, avhengig av nettleserens støtte til plassholdertekst.
// Test for plassholderstøtte $ .support.placeholder = (function () var i = document.createElement ('input'); returner 'plassholder' i i;) (); Hvis plassholdertekst støttes, kan vi gjemme elementer på sidebelastning. Som nevnt før, skjuler etikettene med JavaScript etter at siden laster, sikrer at nettlesere med JavaScript slått av (og de uten plassholderstøtte) kan fortsatt bruke skjemaet.
// Skjul etiketter som standard hvis plassholderne støttes hvis ($. Support.placeholder) $ ('form li'). Hver (funksjon () $ (dette) .addClass ('js-hide-label'); ); // Kode for å legge til / fjerne klasser her Legg merke til at vi har lagt til en klasse for hver listeelement som heter js-hide-label. Dette skyldes at, i henhold til samspillreglene i begynnelsen av opplæringen, har standardfeltetikettene skjult standardutseende på skjemaet. De js-hide-label klassen vil bli brukt til foreldre elementer når etterkommeren elementet er tomt for brukerinnhold.
For å hjelpe til med forståelse og kodeunderholdbarhet preger vi klassene vi legger til eller fjerner med JavaScript med 'js-'. La oss legge til den klassen i stilarket og bruke den til å skjule alle etterkommere merkelapp elementer fra visning. Husk hvordan vi skulle bruke opasitet regel? Det er her vi bruker det til å skjule elementer:
.js-hide-label-etikett opacity: 0; toppen: 1.5em
Merk: De opasitet Eiendommen støttes i alle moderne nettlesere. IE8 vil ikke gjenkjenne det, men det er greit fordi IE8 ikke støtter plassholderegenskaper heller, så vi kjører ikke JavaScript for å bruke klassen i IE8. Vinn-vinn!
Hvis du ser nøye, viser Matts interaksjonsdesign at formfeltetiketter ikke bare vises og forsvinner, men gjør det med litt opp og ned bevegelse. Fordi våre etikettelementer er plassert helt, når vi legger til en klasse som endrer topplasseringen (eller venstre, høyre eller nederst), kan nettleseren overgå denne effekten. Alt vi trenger å gjøre er å legge til en overgangseiendom til selve etiketten.
La oss gå tilbake til vår merkelapp element i CSS og legg til en overgangseiendom for topp og opasitet eiendommer:
Etikett -webkit-overgang: .333s enkel topp, .333s enkel dekning; Overgang: .333s enkel topp, .333s lett opacity;
Dette gjør at etikettene ikke bare kan vises og forsvinne jevnt, men å boble opp og ned når de blir helt ugjennomsiktig eller gjennomsiktig, slik som:
Du bør nå ha noe slikt når du laster inn siden (i en moderne nettleser selvfølgelig).
Som nevnt før legger vi til og fjerner klasser fra elementer og målretter alle barn som trenger styling. På dette tidspunktet (på sidebelastning) har vi lagt til en klasse av js-hide-label som skjuler alle etiketter i skjemaet. Nå trenger vi en annen klasse for å fjerne høydepunktsfargen fra elementer:
.js-unhighlight-label etikett farge: # 999
Nå har vi et skjema som gradvis forbedres og er klar for noe JavaScript-interaksjon (i moderne nettlesere) når brukeren begynner å samhandle med skjemaet.
Inne i plassholderen hvis uttalelse vi skrev over, la oss begynne å legge til og fjerne vår js- klasser i riktig øyeblikk. Først velger vi våre skjemaelementer og legger til en hendelseslytter på uklarhet, fokus, og keyup hendelser (vi bruker keyup heller enn keydown eller tastetrykk som disse hendelsene vil brenne for tidlig):
$ ('.form li'). finne ('input, textarea'). (() () nøkkelfokusering, funksjon (e) // Cache våre selektorer var $ this = $ (dette), $ foreldre = $ dette .parent (); // Legg til eller fjern klasser hvis (e.type == 'keyup') // nøkkelkode her annet hvis (e.type == 'uskarphet') // uklar kode her annet hvis (e.type == 'fokus') // fokuskode her); Her er en kort forklaring på hva vi gjør her:
$ ('.form li'). Deretter finner vi alt i dette valget