Oprettelse af stilfuldt svarende formular med CSS3 og HTML5

Kodning med CSS3 har dramatisk ændret landskabet inden for frontend webudvikling. Der er flere muligheder for at opbygge unikke grænseflader med gradienter, drop skygger og afrundede hjørner. Alle disse effekter bliver langsomt vedtaget i hver større webbrowser.

I denne øvelse vil jeg fremvise mange af disse coole CSS3-effekter. Jeg har opbygget en simpel webformular med nogle af de nyere HTML5-inputtyper. Layoutet er også lydhør; det vil tilpasse sig, da vinduestørrelsen er reduceret. Denne situation er perfekt til opbygning af webformularer, der understøtter smartphone-brugere.

Tjek kildekoden og se om du kan følge med i filstrukturen. Du er også velkommen til at tilpasse disse elementer og kopiere dem til dine egne hjemmesider.

Demo
Download kildekode

Opbygning af formstruktur

For at starte har jeg lavet en hovedfil index.html sammen med to separate stylesheets. style.css indeholder alle standardvælgerne mens responsive.css håndterer forskellige vinduestørrelser. Min doktype er HTML5 og jeg har pakket hele formularen i en container

Dette eksempel demonstrerer kun de effekter, du kan manifestere, når du kodes i CSS3. Således har vi ikke et indlægsscript eller en destination for at omdirigere brugeren. Min kode nedenfor indeholder de indledende input tags for vores første par formelementer.

Det første blokområde er pakket ind i en sektionskode, så vi kan flyde layoutet side om side. Den venstre kolonne indeholder alle disse indgange: tekst, e-mail, URL og telefonnummer. Når du klikker på din telefon, skal det mobile tastaturdisplay tilpasses baseret på indtastningstypen. Der er mange gode grunde til at understøtte disse funktioner til mobil, da alle arbejder på farten i disse dage.

Textarea-elementet kan også have en pladsholdertekst defineret på pageload. Dette ligner en etiket, der forsvinder, når brugeren indtaster tekst i feltet. Attributten, som ikke overføres, er autofuldførelse fordi tekstområder normalt ikke udfylder relateret indhold.

Sidebjælkekontroller

Jeg ønskede at opbygge denne formular, så det ville reagere hensigtsmæssigt at ændre størrelsen på vinduesvisninger. Når vinduet er fuldt nok, flyder begge indgangskolonner ved siden af hinanden. Men hvis bredden skæres lidt ned, falder den højre sidebjælke under hovedindholdet.

Her er min HTML for sidebjælkeområdet:

   Modtager:
  
  Prioritet:
   Lav    Medium    Høj

Denne kode er faktisk ikke alt for forvirrende. Bare en simpel indstilling vælg menuen og nogle radioknapper. Desuden stillede jeg efter disse objekter en nulstilling og indsendte knappen i slutningen af sektionen.

Alt ser godt ud og godt, så nu skal vi flytte ind i nogle CSS egenskaber. Der er så mange tilpasninger, du kan anvende, når du arbejder på formelementer. Prøv ikke at mose dig selv med for meget at tænke og have det sjovt!

Animerede Box Shadows

Du vil bemærke, at du faner gennem hvert af de vigtigste inputelementer, som jeg har animeret en farverig ydre skygge. Google Chrome har en dispositionsegenskab, der gør noget lignende, men ikke helt så ekstravagant. Denne lille del af grænsefladen er tiltrækkende til første gangs besøgende.

 / ** formularelementerne ** / # hongkiat-form box-size: border-box;  # hongkiat-form .txtinput display: block; font-familie: "Helvetica Neue", Arial, sans-serif; grænsestil: solid; kantbredde: 1px; border-color: #dedede; margin-bund: 20px; skrifttypestørrelse: 1,55em; polstring: 11px 25px; polstring-venstre: 55px; bredde: 90%; farve: # 777; boks-skygge: 0 1px 3px rgba (0, 0, 0, 0,1) input; -moz-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) input; -webkit-box-skygge: 0 1px 3px rgba (0, 0, 0, 0,1) input; overgang: grænsen 0,15s lineær 0s, box-shadow 0.15s lineær 0s, farve 0.15s lineær 0s; -webkit-overgang: border 0.15s lineær 0s, box-shadow 0.15s lineær 0s, farve 0.15s lineær 0s; -moz-overgang: grænsen 0,15s lineær 0s, boks-skygge 0,15s lineær 0s, farve 0,15s lineær 0s; -o-overgang: grænsen 0,15s lineær 0s, box-shadow 0.15s lineær 0s, farve 0.15s lineær 0s;  # hongkiat-form .txtinput: fokus color: # 333; randfarve: rgba (41, 92, 161, 0.4); boks-skygge: 0 1px 3px rgba (0, 0, 0, 0,1) input, 0 0 8px rgba (41, 92, 161, 0,6); -moz-box-skygge: 0 1px 3px rgba (0, 0, 0, 0,1) input, 0 0 8px rgba (41, 92, 161, 0,6); -webkit-boks-skygge: 0 1px 3px rgba (0, 0, 0, 0,1) input, 0 0 8px rgba (41, 92, 161, 0,6); omrids: 0 ingen;

For at målrette mod hvert tekstelement har jeg brugt klassen .txtinput. Hver af overgangsegenskaberne arbejder på grænse, boksskygge og farve. Jeg bruger box-dimensionering: border-box; På formularbeholderen betyder det ikke, at polstring ikke giver vores responsive design.

Jeg måtte kopiere over disse samme stilarter og redigere dem lidt for tekstområdet. Jeg ændrede nogle af polstring og margener og tilføjede et unikt baggrundsikon.

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

Sidebjælkeindgange

Radioknapperne og vælg menupunkter er stylet meget enklere. Du kan anvende ydre glødeffekter og lignende faldskygger på disse elementer, men det ser ikke altid godt ud. Alternativt vil designere oprette brugerdefinerede brugergrænseflader og vedhæfte disse som baggrundsbilleder. Men det kan kræve en jQuery løsning for at holde indstillingerne korrekt.

 span.radiobadge display: block; margin-bund: 8px;  span.radiobadge-etiket font-size: 1.2em; polstring-bund: 4px;  select.selmenu font-size: 17px; farve: # 676767; polstring: 9px! vigtigt; grænse: 1px solid #aaa; bredde: 200px;

Jeg har ikke gjort meget for at skubbe dem væk fra de vigtigste inputelementer. Masser af ekstra polstring er vigtigt, så dine brugere har det godt at interagere med formularen. Når teksten er super lille, kan det være en kamp bare for at udfylde hver enkelt del. Hold din skrifttype stor, men ikke så stor, at den overvælder siden.

Tilpassede knapper

Nulstil og sende knapper er designet i en egen klasse. Jeg har bygget et sæt lysgradienter, der passer fint sammen med de blå højdepunkter i vores formularer.

Nedenfor er min CSS kode for indsender knappen på standard og hover tilstand.

 #buttons #submitbtn display: block; flyde: venstre; højde: 3em; polstring: 0 1em; grænse: 1px solid; omrids: 0; font-weight: bold; skrifttypestørrelse: 1.3em; farve: #fff; tekstskygge: 0px 1px 0px # 222; hvid-rum: nowrap; ord-wrap: normal; vertikaljustering: midt; markør: pointer; -moz-grænse-radius: 2px; -webkit-grænse-radius: 2px; grænse-radius: 2px; border-farve: # 5e890a # 5e890a # 000; -moz-box-shadow: input 0 1px 0 rgba (256.256.256, .35); -ms-box-shadow: input 0 1px 0 rgba (256,256,256, .35); -webkit-box-skygge: input 0 1px 0 rgba (256,256,256, .35); box-skygge: input 0 1px 0 rgba (256,256,256, .35); baggrundsfarve: rgb (226.238.175); baggrundsbilde: -moz-lineær gradient (top, rgb (226.238.175) 3%, rgb (188.216,77) 3%, rgb (144.176,38) 100%); baggrundsbillede: -webkit-gradient (lineær, venstre top, venstre bund, farve stop (3%, rgb (226,238,175)), farve stop (3%, rgb (188,216,77)), farve stop %, rgb (144,176,38))); baggrundsbillede: -webkit-lineær gradient (top, rgb (226.238.175) 3%, rgb (188.216,77) 3%, rgb (144.176,38) 100%); baggrundsbilde: -o-lineær gradient (top, rgb (226.238.175) 3%, rgb (188.216,77) 3%, rgb (144.176,38) 100%); baggrundsbillede: -ms-lineær gradient (top, rgb (226.238.175) 3%, rgb (188.216,77) 3%, rgb (144.176,38) 100%); baggrundsbilde: lineær gradient (top, 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; farve: #fff; -moz-box-skygge: input 0 1px 0 rgba (256,256,256,0,4), 0 1px 3px rgba (0,0,0,0,5); -ms-boks-skygge: input 0 1px 0 rgba (256,256,256,0,4), 0 1px 3px rgba (0,0,0,0,5); -webkit-boks-skygge: indsæt 0 1px 0 rgba (256,256,256,0,4), 0 1px 3px rgba (0,0,0,0,5); box-skygge: indsæt 0 1px 0 rgba (256,256,256,0,4), 0 1px 3px rgba (0,0,0,0,5); baggrund: rgb (228.237.189); baggrund: -moz-lineær gradient (top, rgb (228.237.189) 2%, rgb (207.219.120) 3%, rgb (149.175,54) 100%); Baggrund: -webkit-gradient (lineær, venstre top, venstre bund, farve stop (2%, rgb (228.237.189)), farve stop (3%, rgb (207.219.120)), farve stop (100%, rgb 149,175,54))); baggrund: -webkit-lineær gradient (top, rgb (228.237.189) 2%, rgb (207.219.120) 3%, rgb (149.175,54) 100%); baggrund: -o-lineær gradient (top, rgb (228.237.189) 2%, rgb (207.219.120) 3%, rgb (149.175,54) 100%); baggrund: -ms-lineær gradient (top, rgb (228.237.189) 2%, rgb (207.219.120) 3%, rgb (149.175,54) 100%); baggrund: lineær gradient (top, 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 næsten umuligt at holde denne type vælger ren! Der er simpelthen for mange egenskaber, du skal liste ud og støtte til mange ældre legacy browsere. Internet Explorer kan endda gøre disse gradienter med det rigtige filter. Bortset fra baggrundsgradienterne har jeg også medtaget en ny grænsekvalitet, afrundede hjørner og en bokseskygge på svæver.

Nulstillingsknappen ligner hinanden, men jeg har gået helt anderledes med farveskemaet. Lysegrå tendens til at falde i baggrunden i forhold til de lyse grønne farver. Vores reset-knap sandsynligvis vil ikke blive brugt meget, så det behøver ikke al opmærksomhed.

 #buttons #resetbtn display: block; flyde: venstre; farve: # 515151; tekstskygge: -1px 1px 0px #fff; margin-højre: 20px; højde: 3em; polstring: 0 1em; omrids: 0; font-weight: bold; skrifttypestørrelse: 1.3em; hvid-rum: nowrap; ord-wrap: normal; vertikaljustering: midt; markør: pointer; -moz-grænse-radius: 2px; -webkit-grænse-radius: 2px; grænse-radius: 2px; baggrundsfarve: #fff; baggrundsbillede: -moz-lineær gradient (top, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); baggrundsbillede: -webkit-gradient (lineær, venstre top, venstre bund, farve stop (2%, rgb (255,255,255)), farve stop (2%, rgb (240,240,240)), farve stop rgb (222.222.222))); baggrundsbillede: -webkit-lineær gradient (top, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); baggrundsbillede: -o-lineær gradient (top, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); baggrundsbillede: -ms-lineær gradient (top, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); baggrundsbilde: lineær gradient (top, 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); grænse: 1px fast # 969696; box-skygge: 0 1px 2px rgba (144, 144, 144, 0.4); -moz-box-shadow: 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: svinge text-shadow: 0 1px 1px rgba (255, 255, 255, 0.75); farve: # 818181; baggrundsfarve: #fff; baggrundsbillede: -moz-lineær gradient (top, rgb (255,255,255) 2%, rgb (244.244.244) 2%, rgb (229.229.229) 100%); Baggrundsbillede: -webkit-gradient (lineær, venstre top, venstre bund, farve stop (2%, rgb (255,255,255)), farve stop (2%, rgb (244.244.244)), farve stop rgb (229.229.229))); baggrundsbillede: -webkit-lineær gradient (top, rgb (255,255,255) 2%, rgb (244.244.244) 2%, rgb (229.229.229) 100%); baggrundsbilde: -o-lineær gradient (top, rgb 255.255.255) 2%, rgb (244.244.244) 2%, rgb (229.229.229) 100%); baggrundsbillede: -mins-lineær gradient (top, rgb (255,255,255) 2%, rgb (244.244.244) 2%, rgb (229.229.229) 100%); baggrundsbilde: lineær gradient (top, 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-farve: #aeaeae; box-skygge: indsæt 0 1px 0 rgba (256,256,256,0,4), 0 1px 3px rgba (0,0,0,0,5);

Du kan endda tabe nulstilletype og bruge dette hvide / grå farveskema som din primære indsende knap. Jeg har brugt mange af de samme gradient stilarter og drop shadow effekter sammen med en tekstskygge for den indre label. Det giver helt sikkert en anden følelse af brugeroplevelsen.

Responsive Layout Changes

At flytte ind i min anden CSS-fil kan vi se på de enkle responsive medieforespørgsler, jeg har installeret. Ethvert browservindue over 800 px vil opleve fuld sidebar-grænseflade. Når du kommer under denne tærskel, udvides den venstre kolonne til 100% bredde, og du kan se sidebjælkeelementerne falde ned nedenfor.

 @media skærm og (maxbredde: 800px) krop polstring: 10px 15px;  #container width: 100%;  # hongkiat-form #aligned bredde: 100%; flyde: ingen; display: blok;  # hongkiat-form #aside width: 100%; display: blok; flyde: ingen;  # hongkiat-form .txtinput, # hongkiat-form textarea bredde: 85%;  #prioritycase float: left; display: blok;  #recipientcase float: left; display: blok; margin-højre: 55px;

Når vi kommer tættere på størrelse, forsøger jeg at tilpasse hver af inputformularerne. Bredden egenskaben kan ende længere end selve websiden, og så har vi input-formularer, der stikker ud over kanten. Dette sker omkring 550px, hvilket er hvor jeg bryder den næste forespørgsel sammen med både iPhone skærm skærmopløsninger til portræt og landskab.

 / * mindre skærm dropoff ******* / @media only screen og (maxbredde: 550px) # hongkiat-form .txtinput, # hongkiat-form textarea bredde: 80%;  / * iPhone Landskab ******** / @media eneste skærm og (maxbredde: 480px) body padding: 10px 0px;  select.selmenu bredde: 190px;  / * iPhone portræt ******* / @media only screen og (maxbredde: 320px) body padding: 10px 0px;  # hongkiat-form .txtinput, # hongkiat-form textarea bredde: 70%;  # hongkiat-form #aligned overløb: skjult;  select.selmenu bredde: 160px;  #recipientcase margin-right: 30px;

Horisontal landskabstilstand holder alt sammen meget godt. Jeg har kun lavet dropdown-menuen en smule tyndere for at gøre plads til radioknapperne. I portrætvisningen har jeg ændret alle elementer til meget mindre bredder. Nu vil vores kode ikke brydes selv i størrelsen på browservinduer. Men det er rart at have support til iOS / Android smartphones også.

Demo
Download kildekode

Konklusion

Jeg håber, at denne vejledning har været informativ i at forklare, hvor meget der kan gøres på dine webforms. De nye CSS3-egenskaber er kraftige nok til at opbygge fuldt funktionsdygtige animationer med blot nogle få linjer kode. Det er virkelig en spændende tid at arbejde i webudvikling og følge disse tendenser.

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