Crearea unui formular elegant cu CSS3 și HTML5

Codarea cu CSS3 a modificat în mod dramatic peisajul în cadrul dezvoltării web frontend. Există mai multe oportunități de a construi interfețe unice cu gradiente, umbre și colțuri rotunjite. Toate aceste efecte se transformă încet în fiecare browser web major.

În acest tutorial vreau să prezint multe dintre aceste efecte interesante pentru CSS3. Am construit un simplu formular web folosind câteva dintre cele mai noi tipuri de intrări HTML5. Schema este de asemenea receptiv; se va adapta la diminuarea dimensiunii ferestrei. Această situație este perfectă pentru crearea unor formulare web pentru a sprijini utilizatorii de smartphone-uri.

Verificați codul sursă și vedeți dacă puteți urmări în structura fișierului. De asemenea, nu ezitați să personalizați aceste elemente și să le copiați pe propriile dvs. site-uri web.

Demo
Descărcați codul sursă

Construirea structurii formularului

Pentru a începe, am creat un fișier principal index.html împreună cu două foi de stil separate. style.css conține toți selectorii impliciți în timp ce responsive.css se ocupă de diferite dimensiuni ale ferestrelor. Doctype-ul meu este HTML5 și am împachetat întregul form într-un container

Acest exemplu demonstrează doar efectele pe care le puteți manifesta la codarea în CSS3. Astfel, nu avem niciun script sau destinație de postare pentru a redirecționa utilizatorul. Codul meu de mai jos conține etichetele de intrare de deschidere pentru primele noastre elemente de formular.

Prima zonă de bloc este înfășurată într-o etichetă de secțiune, astfel încât să putem flotă aspectul unul lângă celălalt. Coloana din stânga conține toate aceste intrări: text, e-mail, URL și număr de telefon. Pe măsură ce faceți clic pe telefonul dvs., afișajul tastaturii mobile trebuie să se adapteze în funcție de tipul de intrare. Există o mulțime de motive bune pentru a susține aceste caracteristici pentru dispozitive mobile, deoarece toată lumea lucrează în deplasare în aceste zile.

Elementul textarea poate avea, de asemenea, un text substituent definit pe pageload. Acest lucru este similar cu o etichetă care dispare odată ce utilizatorul introduce un text în câmp. Atributul care nu este reportat este Completare automată pentru că textarea nu în mod obișnuit completează conținuturi similare.

Controalele barei laterale

Am vrut să construiesc această formă, astfel încât să răspundă în mod adecvat la redimensionarea ecranelor de ferestre. Când fereastra este suficient de plină, ambele coloane de intrare plutesc una lângă cealaltă. Dar dacă lățimea este tăiată ușor, atunci bara laterală din dreapta coboară sub conținutul principal.

Iată HTML-ul meu pentru zona laterală:

   Destinatar:
  
  Prioritate:
   Scăzut    Mediu    Înalt

De fapt, acest cod nu este prea confuz. Doar o opțiune de selectare simplă și câteva butoane radio. În plus, după aceste obiecte am plasat un buton de resetare și trimiteți spre sfârșitul secțiunii.

Toate acestea arata bine si bine, asa ca acum sa ne mutam in cateva proprietati CSS. Există atât de multe personalizări pe care le puteți aplica atunci când lucrați la elemente de formă. Încercați să nu vă bateți cu gândul prea mult și să vă distrați!

Animate Box Shadows

Veți observa pe măsură ce treceți prin fiecare dintre elementele principale de intrare pe care le-am animat o umbra exterioară colorată. Google Chrome are o proprietate contur care face ceva similar, dar nu atât de extravagant. Această mică parte a interfeței este atrăgătoare pentru vizitatorii pentru prima dată.

 / ** elementele formularului ** / # hongkiat-form box-size: border-box;  # hongkiat-form .txtinput afișare: bloc; font-family: "Helvetica Neue", Arial, sans-serif; stilul frontal: solid; lățimea frontală: 1px; culoarea frontală: #dedede; margin-bottom: 20px; font-size: 1.55; padding: 11px 25px; padding-left: 55px; lățime: 90%; culoare: # 777; box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1) inset; -moz-box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1) inset; -webkit-box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1) inset; tranziție: frontieră 0.15s liniare 0s, cutie-umbre 0.15s liniare 0s, culoare 0.15s liniare 0s; -webkit-tranziție: limita 0.15s liniare 0s, box-shadow 0.15s liniare 0s, culoare 0.15s liniare 0s; -moz-tranziție: limită 0.15s liniare 0s, cutie-umbre 0.15s liniare 0s, culoare 0.15s liniare 0s; -o-tranziție: limita 0.15s liniare 0s, cutie-umbra 0.15s liniare 0s, culoare 0.15s liniare 0s;  # hongkiat-form .txtinput: focalizare culoare: # 333; culoare frontală: rgba (41, 92, 161, 0,4); box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1) inset, 0 0 8px rgba (41, 92, 161, 0.6); -moz-box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1) inset, 0 0 8px rgba (41, 92, 161, 0.6); -webkit-box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1) inset, 0 0 8px rgba (41, 92, 161, 0.6); schiță: 0 niciunul;

Pentru a direcționa fiecare element de text am folosit clasa .txtinput. Fiecare dintre proprietățile de tranziție funcționează la marginea, umbra cutiei și culoarea. eu folosesc dimensiunea cutiei: caseta de margine; pe containerul de formă, astfel încât umplutura nu ne încurcă designul receptiv.

Trebuia să copiez aceste stiluri și să le modific ușor pentru textarea. Am schimbat o parte din umplutură și margini și am adăugat o pictogramă de fundal unică.

 # hongkiat-form textarea afișare: bloc; font-family: "Helvetica Neue", Arial, sans-serif; stilul frontal: solid; lățimea frontală: 1px; culoarea frontală: #dedede; margin-bottom: 15px; font-size: 1.5; padding: 11px 25px; padding-left: 55px; lățime: 90%; înălțime: 180px; culoare: # 777; box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1) inset; -moz-box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1) inset; -webkit-box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1) inset; tranziție: frontieră 0.15s liniare 0s, cutie-umbre 0.15s liniare 0s, culoare 0.15s liniare 0s; -webkit-tranziție: limita 0.15s liniare 0s, box-shadow 0.15s liniare 0s, culoare 0.15s liniare 0s; -moz-tranziție: limită 0.15s liniare 0s, cutie-umbre 0.15s liniare 0s, culoare 0.15s liniare 0s; -o-tranziție: limita 0.15s liniare 0s, cutie-umbra 0.15s liniare 0s, culoare 0.15s liniare 0s;  # hongkiat-forma textarea: focus culoare: # 333; culoare frontală: rgba (41, 92, 161, 0,4); box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1) inset, 0 0 8px rgba (40, 90, 160, 0.6); -moz-box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1) inset, 0 0 8px rgba (40, 90, 160, 0.6); -webkit-box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1) inset, 0 0 8px rgba (40, 90, 160, 0.6); schiță: 0 niciunul;  # hongkiat-forma textarea.txtblock fundal: #fff url ('https://assets.hongkiat.com/uploads/responsive-css3-form/speech.png') 5px 4px no-repeat;

Intrări ale barei laterale

Butoanele radio și selectarea elementelor de meniu sunt mult mai simple. Puteți aplica efecte de strălucire exterioară și umbre asemănătoare pe aceste elemente, dar nu arată întotdeauna bine. Alternativ, designerii vor crea interfețe utilizator personalizate și le vor atașa ca imagini de fundal. Dar acest lucru poate necesita o soluție jQuery pentru a păstra opțiunile afișate corect.

 span.radiobadge display: bloc; margin-bottom: 8px;  eticheta span.radiobadge font-size: 1.2em; padding-bottom: 4px;  selectați.setmenul font-size: 17px; culoare: # 676767; padding: 9px! important; frontieră: 1px solid #aaa; lățime: 200px;

Nu am făcut prea multe pentru a împinge aceste elemente de la principalele elemente de intrare. O mulțime de elemente suplimentare sunt importante, astfel încât utilizatorii dvs. să se simtă confortabil interacționând cu formularul. Atunci când textul este foarte mic, poate fi o luptă doar pentru a completa fiecare parte. Păstrați fontul mare, dar nu atât de mare încât să copleșească pagina.

Butoane personalizate

Butoanele de resetare și trimitere sunt proiectate într-o clasă proprie. Am construit un set de gradienți de lumină pentru a se potrivi bine cu culorile albastre din câmpurile formularului nostru.

Mai jos este codul meu CSS pentru butonul de trimitere în starea standard și de hover.

 #buttons #submitbtn display: bloc; plutește la stânga; înălțime: 3cm; umplutura: 0 1em; frontieră: 1px solid; contur: 0; font-weight: bold; font-size: 1.3; culoare: #fff; text-shadow: 0px 1px 0px # 222; spațiu alb: acum; cuvânt-wrap: normal; vertical-aliniere: mijloc; cursor: pointer; -moz-border-radius: 2px; -webkit-border-radius: 2px; raza de graniță: 2 pixeli; culoarea frontală: # 5e890a # 5e890a # 000; -moz-box-shadow: inset 0 1px 0 rgba (256,256,256, .35); -ms-box-shadow: inset 0 1px 0 rgba (256,256,256, .35); -webkit-box-shadow: inset 0 1px 0 rgba (256,256,256, .35); box-shadow: inset 0 1px 0 rgba (256,256,256, .35); fundal-culoare: rgb (226,238,175); fundal-imagine: -moz-linear-gradient (top, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); (3%, rgb (226,238,175)), stop color (3%, rgb (188,216,77)), stop color (100% %, rgb (144,176,38))); fundal-imagine: -webkit-gradient linear (top, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); fundal-imagine: -o-gradient linear (top, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); fundal-imagine: -ms-gradient liniar (top, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); fundal-imagine: gradient liniar (top, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); filtru: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# e2eeaf", endColorstr = "# 90b026", GradientType = 0);  #buttons #submitbtn: hover, #buttons #submitbtn: activ border-color: # 7c9826 # 7c9826 # 000; culoare: #fff; -moz-box-shadow: inset 0 1px 0 rgba (256,256,256,0.4), 0 1px 3px rgba (0,0,0,0,5); -ms-box-shadow: inserție 0 1px 0 rgba (256,256,256,0,4), 0 1px 3px rgba (0,0,0,0,5); -webkit-box-shadow: inset 0 1px 0 rgba (256,256,256,0,4), 0 1px 3px rgba (0,0,0,0,5); box-shadow: inset 0 1px 0 rgba (256,256,256,0,4), 0 1px 3px rgba (0,0,0,0,5); fundal: rgb (228,237,189); fundal: -moz-linear-gradient (top, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%); fundal: -webkit-gradient (liniar, stânga sus, jos stânga, oprire de culoare (2%, rgb (228,237,189)), stop culoare (3%, rgb (207.219,120) 149,175,54))); fundal: -webkit-gradient linear (top, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%); fundal: -un-gradient linear (top, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%); fundal: -ms-gradient linear (top, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%); fundal: gradient liniar (top, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%); filtru: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# e4edbd", endColorstr = "# 95af36", GradientType = 0);

Este aproape imposibil să păstrați acest tip de selector curat! Există pur și simplu prea multe proprietăți pe care trebuie să le afișezi și suport pentru multe browsere vechi vechi. Internet Explorer poate face chiar și aceste gradiente cu filtrul potrivit. Observați în afară de gradientele de fundal am inclus și o nouă culoare a marginilor, colțuri rotunjite și o umbră cutie pe hover.

Butonul de resetare arată similar, dar am parcurs un traseu complet diferit cu schema de culori. Gri deschis are tendința de a cădea în fundal în comparație cu culorile verzi verde. Butonul nostru de resetare probabil nu va fi folosit foarte mult, deci nu are nevoie de toată atenția.

 #buttons #resetbtn display: bloc; plutește la stânga; culoare: # 515151; text-shadow: -1px 1px 0px #fff; margin-dreapta: 20px; înălțime: 3cm; umplutura: 0 1em; contur: 0; font-weight: bold; font-size: 1.3; spațiu alb: acum; cuvânt-wrap: normal; vertical-aliniere: mijloc; cursor: pointer; -moz-border-radius: 2px; -webkit-border-radius: 2px; raza de graniță: 2 pixeli; fundal-culoare: #fff; fundal-imagine: -moz-linear-gradient (top, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); (2%, rgb (255.255.255)), oprire culori (2%, rgb (240.240.240)), oprire culori (100% rgb (222,222,222))); fundal-imagine: -webkit-gradient liniar (top, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); fundal-imagine: -o-gradient linear (top, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); fundal-imagine: -ms-gradient liniar (top, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); fundal-imagine: gradient liniar (top, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); filtru: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# ffffff", endColorstr = "# dedede", GradientType = 0); frontieră: 1px solid # 969696; box-shadow: 0 1px 2 pixeli 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); text-shadow: 0 1px 1px rgba (255, 255, 255, 0.75);  #buttons #resetbtn: hover text-shadow: 0 1px 1px rgba (255, 255, 255, 0.75); culoare: # 818181; fundal-culoare: #fff; fundal-imagine: -moz-linear-gradient (top, rgb (255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); (2%, rgb (255.255.255)), oprire culori (2%, rgb (244.244.244)), oprire culori (100%, rgb (229,229,229))); - fundal-image: -webkit-linear-gradient (top, rgb (255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100% 255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); fundal-imagine: -ms-gradient linear (top, rgb (255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); fundal-imagine: gradient linear (top, rgb (255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); filtru: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# ffffff", endColorstr = "# e5e5e5", GradientType = 0); culoarea frontală: # aeaeae; box-shadow: inset 0 1px 0 rgba (256,256,256,0,4), 0 1px 3px rgba (0,0,0,0,5);

Puteți să renunțați la tipul de resetare și să utilizați această schemă de culori alb / gri ca principal buton de trimitere. Am folosit multe stiluri de gradient și efecte de umbră, împreună cu o umbră de text pentru eticheta interioară. Oferă cu siguranță un sentiment diferit față de experiența utilizatorului.

Schimbări de aspect modificate

Mergând în celălalt fișier CSS, am putea să aruncăm o privire la interogările simple pe care le-am instalat. Orice fereastră de browser de peste 800 px va experimenta întreaga interfață a barei laterale. Pe măsură ce ajungeți sub acest prag, coloana din stânga se extinde la lățimea de 100% și vedeți elementele barei laterale derulată mai jos.

 Ecranul @media și (max-width: 800px) body padding: 10px 15px;  #container width: 100%;  # hongkiat-form #aligned lățime: 100%; float: nici unul; afișare: bloc;  # hongkiat-form #aside lățime: 100%; afișare: bloc; float: nici unul;  # hongkiat-form .txtinput, # hongkiat-form textarea lățime: 85%;  #prioritycase float: left; afișare: bloc;  #recipientcase float: left; afișare: bloc; margin-dreapta: 55px;

Pe măsură ce ne apropiem de dimensiune, încerc să adaptez fiecare dintre formularele de intrare. Proprietatea de lățime poate ajunge mai mult decât pagina web în sine și apoi avem forme de intrare care se lipesc peste margine. Acest lucru se întâmplă în jurul valorii de 550px, unde am rupe următoarea interogare, împreună cu ambele rezoluții ale ecranului iPhone pentru portret și peisaj.

 / * ecranul de dimensiuni reduse ******* / @media numai ecran și (max-width: 550px) # hongkiat-form .txtinput, # hongkiat-form textarea lățime: 80%;  / * iPhone Peisaj ******** / numai pentru @media și (max-width: 480px) body padding: 10px 0px;  select.service width: 190px;  / * iPhone portret ******* / numai pentru ecran @media și (max-width: 320px) body padding: 10px 0px;  # hongkiat-form .txtinput, # hongkiat-form textarea lățime: 70%;  # hongkiat-form #aligned overflow: ascuns;  selectați text width: 160px;  #recipientcase marginea-dreapta: 30px;

Modul peisaj orizontal încă ține totul împreună foarte bine. Am făcut doar meniul dropdown un pic mai subțire pentru a face loc butoanelor radio. În vizualizarea portret, am redimensionat toate elementele la lățimi mult mai mici. Acum codul nostru nu va rupe nici măcar în ferestrele de browser redimensionate. Dar este frumos să ai și suport pentru smartphone-uri iOS / Android.

Demo
Descărcați codul sursă

Concluzie

Sper că acest tutorial a fost informativ în explicarea cât de mult se poate face pe formele tale web. Noile proprietăți CSS3 sunt suficient de puternice pentru a construi animații pe deplin funcționale cu doar câteva linii de cod. Este cu adevărat un moment interesant de a lucra în dezvoltarea web și de a urma aceste tendințe.

Dacă aveți idei sau sugestii despre codul tutorial, nu ezitați să le împărtășiți cu noi prin intermediul casetei de comentarii de mai jos.