Oppretter stilig, responsiv form med CSS3 og HTML5

Koding med CSS3 har dramatisk endret landskapet innen frontend webutvikling. Det er flere muligheter til å bygge unike grensesnitt med gradienter, slippe skygger og avrundede hjørner. Alle disse effektene blir sakte vedtatt i alle de store nettleserne.

I denne opplæringen vil jeg vise frem mange av disse kule CSS3-effektene. Jeg har laget et enkelt nettskjema ved hjelp av noen av de nyere HTML5-inngangstyper. Oppsettet er også lydhør; Det vil tilpasse seg ettersom vinduets størrelse er redusert. Denne situasjonen er perfekt for å bygge webskjemaer for å støtte smarttelefonbrukere.

Sjekk ut kildekoden og se om du kan følge med i filstrukturen. Du er også velkommen til å tilpasse disse elementene og kopiere dem til dine egne nettsteder.

Demo
Last ned kildekoden

Bygg opp formstrukturen

For å starte har jeg opprettet en hovedfil index.html sammen med to separate stilark. style.css inneholder alle standardvalgene mens responsive.css håndterer ulike vindu størrelser. Min doktype er HTML5 og jeg har pakket hele skjemaet i en container

Dette eksemplet demonstrerer bare effektene du kan manifestere når du koder i CSS3. Dermed har vi ikke innleggsskript eller destinasjon for å omdirigere brukeren. Koden min nedenfor inneholder åpningsinngangskodene for våre første få formelementer.

Det første blokkområdet er innpakket i en sektionskode, slik at vi kan flyte layoutet side om side. Den venstre kolonnen inneholder alle disse inngangene: tekst, e-post, nettadresse og telefonnummer. Når du klikker på telefonen din, bør den mobile tastaturvisningen tilpasse seg basert på inngangstypen. Det er mange gode grunner til å støtte disse funksjonene for mobil siden alle jobber på farten i disse dager.

Textarea-elementet kan også ha en plassholdertekst som er definert på pageload. Dette ligner en etikett som forsvinner når brukeren skriver inn noen tekst i feltet. Attributtet som ikke overføres er Autofullfør fordi tekstområder vanligvis ikke fyller ut relatert innhold.

Sidepanelkontroller

Jeg ønsket å bygge dette skjemaet slik at det ville reagere på riktig måte for å endre størrelsen på vinduet. Når vinduet er fullt nok, svinger begge inngangs kolonnene ved siden av hverandre. Men hvis bredden er kuttet litt, faller høyre sidebar ned under hovedinnholdet.

Her er min HTML for sidebarområdet:

   Mottaker:
  
  Prioritet:
   Lav    Medium    Høy

Denne koden er faktisk ikke noe for forvirrende. Bare et enkelt alternativ, velg meny og noen radioknapper. I tillegg, etter disse objektene, lagde jeg en tilbakestilling og send inn knappen mot slutten av seksjonen.

Alt ser bra ut, så nå går vi inn i noen CSS-egenskaper. Det er så mange tilpasninger du kan søke når du jobber med skjemaelementer. Prøv å ikke miste deg selv med for mye å tenke og ha det gøy!

Animerte bokseskygger

Du vil legge merke til når du går gjennom hvert av hovedinngangselementene som jeg har animert en fargerik ytre skygge. Google Chrome har en oversiktlig eiendom som gjør noe lignende, men ikke helt så ekstravagant. Denne lille delen av grensesnittet er tiltrekkende til første gangs besøkende.

 / ** formelementene ** / # hongkiat-form box-size: border-box;  # hongkiat-form .txtinput display: block; font-familie: "Helvetica Neue", Arial, sans-serif; border-style: solid; kantbredde: 1px; border-color: #dedede; margin-bunn: 20px; fontstørrelse: 1,55em; polstring: 11px 25px; polstring-venstre: 55px; bredde: 90%; farge: # 777; boks-skygge: 0 1px 3px rgba (0, 0, 0, 0,1) innsett; -moz-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) innsett; -webkit-boks-skygge: 0 1px 3px rgba (0, 0, 0, 0.1) innsett; overgang: grense 0.15s lineær 0s, boks-skygge 0.15s lineær 0s, farge 0.15s lineær 0s; -webkit-overgang: border 0.15s lineær 0s, box-shadow 0.15s lineær 0s, farge 0.15s lineær 0s; -moz-overgang: grense 0.15s lineær 0s, boks-skygge 0.15s lineær 0s, farge 0.15s lineær 0s; -o-overgang: grense 0.15s lineær 0s, boks-skygge 0.15s lineær 0s, farge 0.15s lineær 0s;  # hongkiat-form .txtinput: fokus color: # 333; border-farge: rgba (41, 92, 161, 0.4); boksskygge: 0 1px 3px rgba (0, 0, 0, 0,1) innsett, 0 0 8px rgba (41, 92, 161, 0,6); -moz-boks-skygge: 0 1px 3px rgba (0, 0, 0, 0,1) innsett, 0 0 8px rgba (41, 92, 161, 0,6); -webkit-boks-skygge: 0 1px 3px rgba (0, 0, 0, 0,1) innsett, 0 0 8px rgba (41, 92, 161, 0,6); oversikt: 0 ingen;

For å målrette mot hvert tekstelement har jeg brukt klassen .txtinput. Hver av overgangseiendommene arbeider på grense, boksskygge og farge. jeg bruker boks-størrelse: border-box; På formbeholderen gjør det ikke røff på vårt responsive design.

Jeg måtte kopiere over disse samme stilene og redigere dem litt for tekstområdet. Jeg endret noe av polstring og marginer, og vedlagt et unikt bakgrunnsikon.

 # hongkiat-form textarea display: block; font-familie: "Helvetica Neue", Arial, sans-serif; border-style: solid; kantbredde: 1px; border-color: #dedede; margin-bunn: 15px; skriftstørrelse: 1.5em; polstring: 11px 25px; polstring-venstre: 55px; bredde: 90%; høyde: 180px; farge: # 777; boks-skygge: 0 1px 3px rgba (0, 0, 0, 0,1) innsett; -moz-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) innsett; -webkit-boks-skygge: 0 1px 3px rgba (0, 0, 0, 0.1) innsett; overgang: grense 0.15s lineær 0s, boks-skygge 0.15s lineær 0s, farge 0.15s lineær 0s; -webkit-overgang: border 0.15s lineær 0s, box-shadow 0.15s lineær 0s, farge 0.15s lineær 0s; -moz-overgang: grense 0.15s lineær 0s, boks-skygge 0.15s lineær 0s, farge 0.15s lineær 0s; -o-overgang: grense 0.15s lineær 0s, boks-skygge 0.15s lineær 0s, farge 0.15s lineær 0s;  # hongkiat-form textarea: fokus color: # 333; border-farge: rgba (41, 92, 161, 0.4); boksskygge: 0 1px 3px rgba (0, 0, 0, 0,1) innsett, 0 0 8px rgba (40, 90, 160, 0,6); -moz-boks-skygge: 0 1px 3px rgba (0, 0, 0, 0,1) innsett, 0 0 8px rgba (40, 90, 160, 0,6); -webkit-boks-skygge: 0 1px 3px rgba (0, 0, 0, 0,1) innsett, 0 0 8px rgba (40, 90, 160, 0,6); oversikt: 0 ingen;  # hongkiat-form textarea.txtblock bakgrunn: #fff url ('https://assets.hongkiat.com/uploads/responsive-css3-form/speech.png') 5px 4px no-repeat;

Sidepanelinnganger

Radioknappene og velg menyelementene er stylet mye enklere. Du kan bruke ytre glødseffekter og lignende fallskygger på disse elementene, men det ser ikke alltid bra ut. Alternativt vil designere skape egendefinerte brukergrensesnitt og legge til disse som bakgrunnsbilder. Men dette kan kreve en jQuery løsning for å holde alternativene som vises riktig.

 span.radiobadge display: block; margin-bunn: 8px;  span.radiobadge-etiketten font-size: 1.2em; polstring-bunn: 4px;  select.selmenu font-size: 17px; farge: # 676767; polstring: 9px! viktig; grense: 1px solid #aaa; bredde: 200px;

Jeg har ikke gjort mye for å skyve disse bort fra de viktigste inngangselementene. Rikelig med ekstra polstring er viktig, slik at brukerne føler seg komfortabel i samspill med skjemaet. Når teksten er super liten, kan det være en kamp bare for å fylle ut hver del. Hold fonten stor, men ikke så stor at den overvelder siden.

Tilpassede knapper

Tilbakestillings- og innsendingsknappene er utformet i en egen klasse. Jeg har bygget et sett med lysgradienter som passer godt sammen med de blå høydepunktene i våre formfelt.

Nedenfor er min CSS-kode for send-knappen på standard og hover state.

 #buttons #submitbtn display: block; flyte: venstre; høyde: 3em; polstring: 0 1em; grense: 1px solid; oversikt: 0; font-weight: bold; skriftstørrelse: 1,3em; farge: #fff; tekstskygge: 0px 1px 0px # 222; white-space: nowrap; ord-wrap: normal; vertikaljustering: midt; markør: pointer; -moz-grense-radius: 2px; -webkit-grense-radius: 2px; border-radius: 2px; border-farge: # 5e890a # 5e890a # 000; -moz-boks-skygge: innsett 0 1px 0 rgba (256,256,256, .35); -ms-boks-skygge: innsett 0 1px 0 rgba (256,256,256, .35); -webkit-boks-skygge: innsett 0 1px 0 rgba (256,256,256, .35); boks-skygge: innsett 0 1px 0 rgba (256,256,256, .35); bakgrunnsfarge: rgb (226 238 175); bakgrunnsbilde: -moz-lineær-gradient (topp, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); bakgrunnsbilde: -webkit-gradient (lineær, venstre topp, venstre bunn, fargestopp (3%, rgb (226,238,175)), fargestopp (3%, rgb (188,216,77)), fargestopp %, RGB (144,176,38))); bakgrunnsbilde: -webkit-lineær gradient (topp, rgb (226.238.175) 3%, rgb (188.216,77) 3%, rgb (144.176,38) 100%); bakgrunnsbilde: -o-lineær gradient (topp, rgb (226.238.175) 3%, rgb (188.216,77) 3%, rgb (144.176,38) 100%); bakgrunnsbilde: -ms-lineær gradient (topp, rgb (226.238.175) 3%, rgb (188.216,77) 3%, rgb (144.176,38) 100%); bakgrunnsbilde: lineær gradient (topp, rgb (226.238.175) 3%, rgb (188.216,77) 3%, rgb (144.176,38) 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# e2eeaf", endColorstr = "# 90b026", GradientType = 0);  #buttons #submitbtn: svever, #buttons #submitbtn: aktiv border-color: # 7c9826 # 7c9826 # 000; farge: #fff; -moz-boks-skygge: innsett 0 1px 0 rgba (256,256,256,0,4), 0 1px 3px rgba (0,0,0,0,5); -ms-boks-skygge: innsett 0 1px 0 rgba (256,256,256,0,4), 0 1px 3px rgba (0,0,0,0,5); -webkit-boks-skygge: innsett 0 1px 0 rgba (256,256,256,0,4), 0 1px 3px rgba (0,0,0,0,5); boksskygge: innsett 0 1px 0 rgba (256,256,256,0,4), 0 1px 3px rgba (0,0,0,0,5); bakgrunn: rgb (228 237 189); bakgrunn: -moz-lineær gradient (topp, rgb (228.237.189) 2%, rgb (207.219.120) 3%, rgb (149.175,54) 100%); Bakgrunn: -webkit-gradient (lineær, venstre topp, venstre bunn, fargestopp (2%, rgb (228 237 189)), fargestopp (3%, rgb (207,219,120)), fargestopp (100%, rgb 149,175,54))); Bakgrunn: -webkit-lineær gradient (topp, rgb (228.237.189) 2%, rgb (207.219.120) 3%, rgb (149.175,54) 100%); Bakgrunn: -o-lineær gradient (topp, rgb (228.237.189) 2%, rgb (207.219.120) 3%, rgb (149.175,54) 100%); bakgrunn: -ms-lineær gradient (topp, rgb (228.237.189) 2%, rgb (207.219.120) 3%, rgb (149.175,54) 100%); bakgrunn: lineær gradient (topp, rgb (228.237.189) 2%, rgb (207.219.120) 3%, rgb (149.175,54) 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# e4edbd", endColorstr = "# 95af36", GradientType = 0);

Det er nesten umulig å holde denne typen selector ren! Det er rett og slett for mange egenskaper du må liste opp og støtte for mange eldre eldre weblesere. Internet Explorer kan til og med gjøre disse gradienter med riktig filter. Legg merke til bortsett fra bakgrunnsgradienter, har jeg også tatt med en ny kantfarge, avrundede hjørner og en bokseskygge på hover.

Tilbakestillingsknappen ligner, men jeg har gått en helt annen rute med fargeskjemaet. Lysegrå har en tendens til å falle inn i bakgrunnen i forhold til de lyse grønne farger. Vår reset-knapp sannsynligvis vil ikke bli brukt veldig mye, så det trenger ikke all oppmerksomhet.

 #buttons #resetbtn display: block; flyte: venstre; farge: # 515151; tekstskygge: -1px 1px 0px #fff; margin-høyre: 20px; høyde: 3em; polstring: 0 1em; oversikt: 0; font-weight: bold; skriftstørrelse: 1,3em; white-space: nowrap; ord-wrap: normal; vertikaljustering: midt; markør: pointer; -moz-grense-radius: 2px; -webkit-grense-radius: 2px; border-radius: 2px; bakgrunnsfarge: #fff; bakgrunnsbilde: -moz-lineær gradient (topp, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); bakgrunnsbilde: -webkit-gradient (lineær, venstre topp, venstre bunn, fargestopp (2%, rgb (255,255,255)), fargestopp (2%, rgb (240,240,240)), fargestopp (100% RGB (222,222,222))); bakgrunnsbilde: -webkit-lineær gradient (topp, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); bakgrunnsbilde: -o-lineær gradient (topp, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); bakgrunnsbilde: -ms-lineær gradient (topp, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); bakgrunnsbilde: lineær gradient (topp, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# ffffff", endColorstr = "# dedede", GradientType = 0); border: 1px solid # 969696; boks-skygge: 0 1px 2px rgba (144, 144, 144, 0.4); -moz-boks-skygge: 0 1px 2px rgba (144, 144, 144, 0.4); -webkit-boks-skygge: 0 1px 2px rgba (144, 144, 144, 0.4); tekstskygge: 0 1px 1px rgba (255, 255, 255, 0,75);  #buttons #resetbtn: svever text-shadow: 0 1px 1px rgba (255, 255, 255, 0.75); farge: # 818181; bakgrunnsfarge: #fff; bakgrunnsbilde: -moz-lineær gradient (topp, rgb (255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); bakgrunnsbilde: -webkit-gradient (lineær, venstre topp, venstre bunn, fargestopp (2%, rgb (255,255,255)), fargestopp (2%, rgb (244.244.244)), fargestopp (100% RGB (229,229,229))); bakgrunnsbilde: -webkit-lineær gradient (topp, rgb (255,255,255) 2%, rgb (244.244.244) 2%, rgb (229.229.229) 100%); bakgrunnsbilde: -O-lineær gradient (topp, rgb 255 255 255) 2%, rgb (244 244 244) 2%, rgb (229 229 229) 100%); bakgrunnsbilde: -ms-lineær gradient (topp, rgb (255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); bakgrunnsbilde: lineær gradient (topp, rgb (255,255,255) 2%, rgb (244.244.244) 2%, rgb (229.229.229) 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# ffffff", endColorstr = "# e5e5e5", GradientType = 0); border-farge: #aeaeae; boksskygge: innsett 0 1px 0 rgba (256,256,256,0,4), 0 1px 3px rgba (0,0,0,0,5);

Du kan til og med slippe nullstiltypen og bruke denne hvite / grå fargevalg som din viktigste sendeknap. Jeg har brukt mange av de samme gradientstilene og slippe skyggeeffekter, sammen med en tekstskygge for den indre etiketten. Det gir definitivt en annen følelse til brukeropplevelsen.

Responsive Layout Changes

Hvis du flytter inn i min andre CSS-fil, kan vi se på de enkle, responsive medieforespørgene jeg har satt opp. Ethvert nettleservinje over 800 px vil oppleve det fulle sidebar-grensesnittet. Når du kommer under denne terskelen, utvides den venstre kolonnen til 100% bredde, og du ser elementene i sidefeltet ned under.

 @media skjerm og (maks bredde: 800px) body polstring: 10px 15px;  #container width: 100%;  # hongkiat-form #aligned bredde: 100%; flyte: ingen; skjerm: blokk;  # hongkiat-form #aside width: 100%; skjerm: blokk; flyte: ingen;  # hongkiat-form .txtinput, # hongkiat-form textarea bredde: 85%;  #prioritycase float: left; skjerm: blokk;  #recipientcase float: left; skjerm: blokk; margin-høyre: 55px;

Når vi kommer nærmere ned i størrelsen, prøver jeg å tilpasse hver av inntastingsskjemaene. Bredden av eiendommen kan ende opp lenger enn selve websiden, og vi har innskrivingsformer som stikker ut over kanten. Dette skjer rundt 550px som er der jeg bryter den neste spørringen, sammen med begge iPhone-skjermoppløsninger for stående og liggende.

 / * mindre skjermavfall ******* / @media bare skjerm og (maksimal bredde: 550px) # hongkiat-form .txtinput, # hongkiat-form textarea bredde: 80%;  / * iPhone Landskap ******** / @media bare skjerm og (maksimal bredde: 480px) body padding: 10px 0px;  select.selmenu bredde: 190px;  / * iPhone portrett ******* / @media bare skjerm og (maks bredde: 320px) body padding: 10px 0px;  # hongkiat-form .txtinput, # hongkiat-form textarea bredde: 70%;  # hongkiat-form #aligned overflow: hidden;  select.selmenu bredde: 160px;  #recipientcase margin-right: 30px;

Horisontal landskapsmodus holder alt godt sammen. Jeg har bare gjort dropdown-valgmenyen litt tynnere for å gi plass til radioknappene. I portrettvisningen har jeg endret alle elementene til mye mindre bredder. Nå krasjer ikke koden vår i kalkulerte nettleservinduer. Men det er fint å ha støtte for iOS / Android-smarttelefoner også.

Demo
Last ned kildekoden

Konklusjon

Jeg håper denne opplæringen har vært informativ i å forklare hvor mye som kan gjøres på webformene dine. De nye CSS3-egenskapene er kraftige nok til å bygge fullt fungerende animasjoner med bare noen få linjer med kode. Det er virkelig en spennende tid å jobbe i webutvikling og følge disse trendene.

Hvis du har ideer eller forslag til veiledningskoden, kan du dele dem med oss via kommentarfeltet nedenfor.