Stiilse reageeriva vormi loomine CSS3 ja HTML5 abil

CSS3-ga kodeerimine on dramaatiliselt muutnud frontend veebiarenduse maastikku. On rohkem võimalusi ainulaadsete liideste ehitamiseks gradientide, varjude ja ümarate nurkadega. Kõik need mõjud on aeglaselt vastu võetud igas suuremas veebibrauseris.

Selles juhendis tahan näidata paljusid neid lahedaid CSS3 efekte. Olen ehitanud lihtsa veebivormi, kasutades mõnda uuemat HTML5 sisendit. Plaan on ka reageeriv; see kohandub akna suuruse vähendamisel. See olukord sobib ideaalselt nutitelefoni kasutajate toetamiseks mõeldud veebivormide loomiseks.

Kontrollige lähtekoodi ja vaadake, kas saate failistruktuuris jälgida. Samuti võite vabalt kohandada neid elemente ja kopeerida need oma veebisaitidele.

Demo
Allika lähtekood

Vormistruktuuri ülesehitamine

Alustamiseks olen loonud põhifaili index.html koos kahe eraldi stiililehega. style.css sisaldab kõiki vaikimisi valikuid vastus.css tegeleb erinevate akna suurustega. Minu doctype on HTML5 ja ma olen kogu vormi pakendisse pakitud

See näide näitab ainult CSS3-s kodeerimisel ilmnevaid efekte. Seega ei ole meil kasutajate suunamiseks postituste saatmise skripti ega sihtkohta. Minu allolev kood sisaldab meie esimese paari vormi elementide avamise sisemärgiseid.

Esimene ploki ala on pakitud sektsiooni sildisse, et saaksime paigutust ujuda. Vasakus veerus on kõik need sisendid: tekst, e-post, URL ja telefoninumber. Kui telefonis klõpsate, peaks mobiilse klaviatuuri ekraan kohanduma sisenditüübi alusel. Nende funktsioonide toetamiseks mobiilile on olemas palju häid põhjusi, sest igaüks töötab nendel päevadel.

Textarea elemendil võib olla ka kohanäidiku tekst, mis on määratletud pageloadis. See on sarnane märgisega, mis kaob pärast seda, kui kasutaja sisestab väljale teksti. Atribuut, mida ei ole üle kantud, on automaatne lõpetamine sest textareas ei täida tavaliselt seotud sisu.

Külgriba juhtelemendid

Tahtsin selle vormi üles ehitada nii, et see vastaks asjakohaselt akna kuvamise suurusele. Kui aken on piisavalt täis, ujuvad mõlemad sisendkolonnid üksteise kõrval. Aga kui laius on veidi kärbitud, langeb parempoolne külgriba põhisisu alla.

Siin on minu külgriba ala HTML:

   Saaja:
  
  Prioriteet:
   Madal    Keskmine    Kõrge

See kood ei ole tegelikult liiga segane. Lihtsalt lihtne valik valida menüü ja mõned raadionupud. Peale selle panin need objektid pärast nullimist ja esitamise nuppu sektsiooni lõpus.

See kõik tundub hästi ja hea, nüüd liigume mõningate CSS-i omaduste juurde. Vormielementide töötlemisel saate rakendada nii palju kohandusi. Püüa mitte ennast liiga palju mõtelda ja lõbutseda!

Animeeritud kasti varjud

Te märkate, kui olete vahekaardi kaudu iga peamise sisendelemendi, mida ma olen värvinud värvilise välise varju. Google Chrome'il on omadus, mis teeb midagi sarnast, kuid mitte üsna ekstravagantset. See väike osa liidesest on ahvatlev esmakülastajatele.

 / ** vormielemendid ** / # hongkiat-forma box-sizing: border-box;  # hongkiat-form .txtinput display: block; font-pere: "Helvetica Neue", Arial, sans-serif; piiri-stiil: tahke; piiri laius: 1px; äärevärv: #dedede; margin-bottom: 20px; fondi suurus: 1.55EM; polsterdus: 11px 25px; polsterdatud: 55px; laius: 90%; värv: # 777; kasti vari: 0 1px 3px rgba (0, 0, 0, 0,1) sisend; -moz-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) sisend; -webkit-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) sisend; üleminek: piir 0,15s lineaarne 0s, kasti vari 0.15s lineaarne 0s, värv 0,15s lineaarne 0s; -webkit-üleminek: piir 0,15s lineaarsed 0s, kasti-vari 0.15s lineaarsed 0s, värv 0,15s lineaarsed 0s; -moz-üleminek: piir 0,15s lineaarne 0s, kasti-vari 0.15s lineaarne 0s, värv 0,15s lineaarne 0s; -o-üleminek: piiri 0,15s lineaarne 0s, kasti vari 0.15s lineaarne 0s, värv 0,15s lineaarne 0s;  # hongkiat-form .txtinput: focus color: # 333; äärevärv: rgba (41, 92, 161, 0,4); kast-vari: 0 1px 3px rgba (0, 0, 0, 0,1) sisestatud, 0 8px rgba (41, 92, 161, 0,6); -moz-box-vari: 0 1px 3px rgba (0, 0, 0, 0,1) sisestatud, 0 8px rgba (41, 92, 161, 0,6); -webkit-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) sisestatud, 0 8px rgba (41, 92, 161, 0,6); ülevaade: 0 puudub;

Iga tekstielemendi sihtimiseks olen kasutanud klassi .txtinput. Iga ülemineku omadus töötab piiril, kasti varjul ja värvil. ma kasutan kastide suurus: piirikast; vormikonteineril polsterdamine ei segi meie tundlikku disaini.

Ma pidin kopeerima nende samade stiilide üle ja redigeerisin neid veidi teksti jaoks. Ma muutsin mõnda polsterdamist ja marginaali ning lisasin unikaalse tausta ikooni.

 # hongkiat-form textarea kuva: plokk; font-pere: "Helvetica Neue", Arial, sans-serif; piiri-stiil: tahke; piiri laius: 1px; äärevärv: #dedede; margin-bottom: 15px; fondi suurus: 1.5em; polsterdus: 11px 25px; polsterdatud: 55px; laius: 90%; kõrgus: 180 px; värv: # 777; kasti vari: 0 1px 3px rgba (0, 0, 0, 0,1) sisend; -moz-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) sisend; -webkit-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) sisend; üleminek: piir 0,15s lineaarne 0s, kasti vari 0.15s lineaarne 0s, värv 0,15s lineaarne 0s; -webkit-üleminek: piir 0,15s lineaarsed 0s, kasti-vari 0.15s lineaarsed 0s, värv 0,15s lineaarsed 0s; -moz-üleminek: piir 0,15s lineaarne 0s, kasti-vari 0.15s lineaarne 0s, värv 0,15s lineaarne 0s; -o-üleminek: piiri 0,15s lineaarne 0s, kasti vari 0.15s lineaarne 0s, värv 0,15s lineaarne 0s;  # hongkiat-form textarea: fookus värv: # 333; äärevärv: rgba (41, 92, 161, 0,4); kasti vari: 0 1px 3px rgba (0, 0, 0, 0,1) sisestatud, 0 8px rgba (40, 90, 160, 0,6); -moz-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) sisend, 0 8px rgba (40, 90, 160, 0,6); -webkit-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) sisestatud, 0 8px rgba (40, 90, 160, 0,6); ülevaade: 0 puudub;  # hongkiat-form textarea.txtblock taust: #fff url ('https://assets.hongkiat.com/uploads/responsive-css3-form/speech.png') 5px 4px kordusteta;

Külgriba sisendid

Raadionupud ja menüüvalikud on kujundatud palju lihtsamalt. Nendele elementidele saab rakendada väliseid hõõgumisefekte ja sarnaseid varjupaiku, kuid see ei pruugi alati hea välja näida. Alternatiivselt loovad disainerid kohandatud kasutajaliideseid ja lisavad need taustpildiks. Kuid see võib nõuda jQuery-lahendust, et valikud oleksid õigesti kuvatud.

 span.radiobadge display: block; margin-bottom: 8px;  span.radiobadge label font-size: 1.2em; polsterdatud: 4x;  select.selmenu font-size: 17px; värv: # 676767; polsterdus: 9px! piir: 1px tahke #aaa; laius: 200 px;

Ma ei ole teinud palju, et neid peamistest sisendelementidest eemale tõmmata. Palju täiendavaid polsterdusi on oluline, et teie kasutajad tunneksid end vormis suhtlemisel mugavalt. Kui tekst on väga väike, võib see olla vaid iga osa täitmine. Hoidke oma font suur, kuid mitte nii suur, et see lehest üle jõuaks.

Kohandatud nupud

Nullimis- ja esitamisnupud on kujundatud oma klassis. Ma olen ehitanud valgustugevuste komplekti, mis sobivad hästi meie vormiväljade siniste esiletõstmistega.

Allpool on minu CSS kood edastusnupule standard- ja hover olekus.

 #buttons #submitbtn display: block; float: vasakule; kõrgus: 3em; polsterdus: 0 1em; piir: 1px tahke; ülevaade: 0; fondi kaal: rasvane; fondi suurus: 1.3em; värv: #fff; teksti-vari: 0px 1px 0px # 222; valge-ruum: nihutamine; sõnamähis: normaalne; vertikaalne joondamine: keskmine; kursor: pointer; -moz-border-radius: 2px; -webkit-border-radius: 2px; raadius: 2px; äärevärv: # 5e890a # 5e890a # 000; -moz-box-shadow: sisend 0 1px 0 rgba (256,256,256, .35); -ms-box-shadow: sisend 0 1px 0 rgba (256,256,256, .35); -webkit-box-shadow: sisend 0 1px 0 rgba (256,256,256, .35); box-shadow: sisend 0 1px 0 rgba (256,256,256, .35); taustavärv: rgb (226,238,175); taustapilt: -moz-lineaarne gradient (ülemine, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); taustapilt: -webkit-gradient (lineaarne, vasakul üleval, vasakul, värvipeatus (3%, rgb (226,238,175)), värvipeatus (3%, rgb (188,216,77)), värvipeatus (100 %, rgb (144,176,38))); taustapilt: -webkit-lineaarne gradient (ülemine, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); taustapilt: -o-lineaarne gradient (ülemine, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); taustapilt: -ms-lineaarne gradient (ülemine, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); taustapilt: lineaarne gradient (ülemine, 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: hover, #buttons #submitbtn: aktiivne border-color: # 7c9826 # 7c9826 # 000; värv: #fff; -moz-box-shadow: sisend 0 1px 0 rgba (256,256,256,0,4), 0 1px 3px rgba (0,0,0,0,5); -ms-box-shadow: sisend 0 1px 0 rgba (256,256,256,0,4), 0 1px 3px rgba (0,0,0,0,5); -webkit-box-shadow: sisend 0 1px 0 rgba (256,256,256,0,4), 0 1px 3px rgba (0,0,0,0,5); karp-vari: sisend 0 1px 0 rgba (256,256,256,0,4), 0 1px 3px rgba (0,0,0,0,5); taust: rgb (228,237,189); taust: -moz-lineaarne gradient (ülemine, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%); taust: -webkit-gradient (lineaarne, vasakul üleval, vasakul, värvipeatus (2%, rgb (228,237,189)), värvipeatus (3%, rgb (207,219,120)), värvipeatus (100%, rgb 149,175,54))); taust: -webkit-lineaarne gradient (ülemine, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%); taust: -o-lineaarne gradient (ülemine, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%); taust: -ms-lineaarne gradient (ülemine, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%); taust: lineaarne gradiend (ülemine, 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);

Seda tüüpi valijat on peaaegu võimatu hoida puhtana! Paljude vanemate vanemate brauserite loendamiseks ja toetamiseks on lihtsalt liiga palju omadusi. Internet Explorer suudab neid gradiente isegi sobiva filtriga muuta. Pange tähele, et lisaks taustgradientidele olen lisanud uue piiri värvi, ümardatud nurkade ja kasti varju.

Nulli nupp näeb välja sarnane, kuid ma olen värviskeemiga täiesti erinev. Helehall kaldub langema taustale, võrreldes helerohelise värvusega. Meie nullimisnuppu tõenäoliselt ei kasutata, nii et see ei vaja kogu tähelepanu.

 #buttons #resetbtn display: block; float: vasakule; värv: # 515151; teksti-vari: -1px 1px 0px #fff; parempoolne: 20px; kõrgus: 3em; polsterdus: 0 1em; ülevaade: 0; fondi kaal: rasvane; fondi suurus: 1.3em; valge-ruum: nihutamine; sõnamähis: normaalne; vertikaalne joondamine: keskmine; kursor: pointer; -moz-border-radius: 2px; -webkit-border-radius: 2px; raadius: 2px; taustavärv: #fff; taustapilt: -moz-lineaarne gradient (ülemine, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); taustapilt: -webkit-gradient (lineaarne, vasakul üleval, vasakul, värvipeatus (2%, rgb (255,255,255)), värvipeatus (2%, rgb (240,240,240)), värvipeatus (100%, rgb (222,222,222))); taustapilt: -webkit-lineaarne gradient (ülemine, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); taustapilt: -o-lineaarne gradient (ülemine, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); taustapilt: -ms-lineaarne gradient (ülemine, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); taustapilt: lineaarne gradient (ülemine, 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); piir: 1px tahke # 969696; kasti vari: 0 lpx 2px rgba (144, 144, 144, 0,4); -moz-box-shadow: 0 1px 2px rgba (144, 144, 144, 0,4); -webkit-box-shadow: 0 1px 2px rgba (144, 144, 144, 0.4); teksti vari: 0 1px 1px rgba (255, 255, 255, 0,75);  #buttons #resetbtn: hover text-shadow: 0 1px 1px rgba (255, 255, 255, 0,75); värv: # 818181; taustavärv: #fff; taustapilt: -moz-lineaarne gradient (ülemine, rgb (255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); taustapilt: -webkit-gradient (lineaarne, vasakul üleval, vasakul, värvipeatus (2%, rgb (255,255,255)), värvipeatus (2%, rgb (244,244,244)), värvipeatus (100%, rgb (229,229,229))); taustapilt: -webkit-lineaarne gradient (ülemine, rgb (255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%), taustapilt: -o-lineaarne gradient (ülemine, rgb ( 255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); taustapilt: -ms-lineaarne gradient (ülemine, rgb (255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); taustapilt: lineaarne gradient (ülemine, 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); äärevärv: #aeaeae; karp-vari: sisend 0 1px 0 rgba (256,256,256,0,4), 0 1px 3px rgba (0,0,0,0,5);

Võite isegi nullida lähtestamise tüübi ja kasutada seda valge / hall värvi skeemi peamise esitamise nupuna. Olen kasutanud paljusid samu gradientstiile ja varjuefekte ning sisemärgise teksti varju. See annab kasutajate kogemustele kindlasti erineva tunde.

Reageerivad paigutuse muudatused

Teisele CSS-failile liikudes saame vaadata lihtsaid reageerivaid meediaküsimusi, mida ma olen seadistanud. Iga brauseriaken üle 800 px kogeb kogu külgriba liidest. Selle künnise allapoole jõudes laieneb vasak veerg 100% laiuseni ja allpool on näha külgriba elemendid.

 @media ekraan ja (max-width: 800px) body padding: 10px 15px;  #konteiner laius: 100%;  # hongkiat-form #aligned laius: 100%; float: mitte; kuva: plokk;  # hongkiat-form #aside laius: 100%; kuva: plokk; float: mitte;  # hongkiat-form .txtinput, # hongkiat-form textarea laius: 85%;  #prioritycase float: vasakul; kuva: plokk;  #recipientcase float: vasakule; kuva: plokk; parempoolne: 55 px;

Suurenedes lähenedes püüan kohandada iga sisendvormi. Laiusomadused võivad lõppeda veebilehe pikemast ajast ja seejärel on meil servadest väljapoole jäävad sisendvormid. See juhtub umbes 550 pikseliga, mis on järgmine, kui murdan järgmise päringu koos mõlema iPhone'i ekraani resolutsiooniga portree ja maastiku jaoks.

 / * väiksema ekraani väljalülitamine ******* / @media ainult ekraan ja (max-width: 550px) # hongkiat-vormi .txtinput, # hongkiat-form textarea laius: 80%;  / * iPhone'i maastik ******** / @media ainult ekraan ja (max-width: 480px) body padding: 10px 0px;  select.selmenu laius: 190px;  / * iPhone'i portree ******* / @media ainult ekraan ja (max-width: 320px) body padding: 10px 0px;  # hongkiat-form .txtinput, # hongkiat-form textarea laius: 70%;  # hongkiat-form #aligned ülevool: peidetud;  select.selmenu laius: 160 px;  #recipientcase margin-right: 30px;

Horisontaalne maastikurežiim hoiab kõike koos hästi. Olen teinud rippmenüüst valiku menüüst vaid peenema, et teha raadionuppude jaoks ruumi. Portree vaates olen ma kõik elemendid muutnud palju väiksemaks. Nüüd ei kao meie kood isegi suurusega brauseriaknas. Aga see on tore toetada iOS / Android nutitelefonid samuti.

Demo
Allika lähtekood

Järeldus

Loodan, et see juhendaja on olnud informatiivne, selgitades, kui palju saab teie veebivormides teha. Uued CSS3 omadused on piisavalt võimsad, et ehitada täielikult toimivaid animatsioone, millel on vaid paar rida koodi. See on tõeliselt põnev aeg töötada veebiarenduses ja järgida neid trende.

Kui teil on õpikoodi kohta ideid või soovitusi, jagage neid meiega allpool olevas kommentaarikastis.