Cum de a construi un formular receptiv cu Flexbox

În acest tutorial, vom învăța cum să profitați de flexbox pentru a crea un formular receptiv. Ceea ce este interesant (și incitant în același timp) este faptul că flexbox ne permite să construim formularul nostru fără a utiliza orice interogări media.

Înainte de a începe, să vedem la ce vom lucra (verificați versiunea mai mare pentru a vedea modul în care se modifică aspectul formularului):

Forma structurii

Atunci, mai întâi, mai întâi, să săpăm în structura formei. O vom marca după cum urmează:

• Vom folosi .flex-exterior listă neordonată pentru gruparea diferitelor elemente de formă
• si .flex-interior listă neordonată pentru a grupa casetele de selectare. 
• Aproape toate controalele formează cu eticheta asociată.

Asta e! Prin definirea a doar două liste neordonate (am fi putut folosi și liste comandate), am construit o formă foarte curată. Iată cum arată:

 
 
 Nume  
 
 Numele de familie  
 
 E-mail  
 
 Telefon  
 
 Mesaj  
 
 
Vârstă
 
  
 
 
 A depune 
 
 

Notă: noi folosim p element în loc de eticheta element înainte de .flex-interior listă. Acest lucru se datorează faptului că, în acest caz particular, nu are sens să se folosească eticheta etichetă. Această etichetă trebuie utilizată numai pentru a asocia o etichetă de text cu un control al formularului.

Iată marcajele pentru casetele de selectare:

 
  20-29 
 
  30-39 
  

Cu gata pregătită, formularul netilat arată astfel:

Aceasta nu va fi cea mai frumoasă formă pe care ați văzut-o vreodată, dar funcționează! Este semantic, accesibil și fluid; aspecte care sunt cu siguranță mai importante decât orice.

În acest moment, suntem gata să începem să aplicăm anumite stiluri.

Forme de stiluri

Să începem prin adăugarea normaliza și autoprefixer la setările stiloului nostru:

Apoi vom identifica containerele flexibile. În cazul nostru, următoarele elemente:

• Fiecare dintre elementele de listă din .flex-exterior listă. 
• .flex-interior care conține toate casetele de selectare.

În plus, dorim să centurăm vertical elementele flexibile pe axa transversală.

Pentru a realiza acest comportament, am stabilit câteva reguli CSS inițiale:

.flex-exterior li, .flex-interior afișaj: flex; flex-wrap: folie; aliniere: centru; 

Următorul pas este să specificați lățimile elementelor flexibile. Începem cu elementele flexibile din .flex-exterior listă.

Principalele cerințe:

• Lățimea etichetelor ar trebui să fie de cel puțin 120 de pixeli și de cel mult 220 de pixeli. 
• Lățimea elementelor de formă care vin după etichete trebuie să fie de cel puțin 220 de pixeli.

Ce ne dă acest lucru? Fiecare etichetă împreună cu elementul de formă asociat vor fi afișate pe un singur rând orizontal atunci când lățimea formularului este de cel puțin 340 px. În orice alt caz, toate elementele de formă (cu excepția casetelor de selectare, așa cum vom vedea într-o clipă) vor stivă vertical.

Notă: valorile menționate mai sus sunt arbitrare - le puteți modifica în funcție de nevoile dvs..

.flex-exterior> li> etichetă, .flex-exterior li p flex: 1 0 120px; max-lățime: 220px;  .flex-exterior> li> etichetă + *, .flex-interior flex: 1 0 220px; 

Buton de trimitere

În sfârșit, pentru butonul de trimitere, care este, de asemenea, un element flexibil, definim câteva stiluri de bază:

.butonul flex-exterior li margin-left: auto; padding: 8px 16px; frontieră: nici una; fundal: # 333; culoare: # f2f2f2; text-transform: majuscule; întrerupere litere: .09em; raza de graniță: 2px;  

Casetele de selectare

Hai să stilizăm acum casetele de selectare. Amintiți-vă că ambalajul lor flexibil are o lățime minimă de 220px.

În primul rând, setăm lățimea elementelor flexibile care sunt părinții imediați ai casetelor de selectare la 100px:

.flex-interior li lățime: 100px; 

Apoi, profităm de justifică conținut pentru a le alinia pe axa principală. Rețineți că această proprietate are valori diferite, dar pentru acest exemplu, suntem interesați doar de spațiu între valoare:

.flex-interior justify-content: spațiu între; 

Această valoare funcționează bine și ne permite să realizăm o aliniere consecventă pentru casetele de selectare și etichetele acestora. Un lucru pe care trebuie să-l menționăm este faptul că această valoare a proprietății poate distribui în mod ciudat elementele rândului final. La anumite lățimi ale ferestrei de vizualizare veți vedea ceva similar:

Observați alinierea ultimelor două elemente flexibile. Dacă, din anumite motive, nu vă place acest aspect și preferați să apară unul lângă celălalt, puteți încerca ceva de genul: 

• Scoateți justifică conținut proprietate din ambalajul flexibil.
• Utilizați procentele pentru a adăuga o lățime fixă ​​elementelor flexibile (de ex. lățime: 50%).
• Utilizați interogările media pentru a ignora această lățime. De exemplu, atunci când lățimea ferestrei de vedere este mai mare de 992 pixeli, dați elemente flexibile Lățime: 25% in loc de lățime: 50%.

Mai presus de toate, este important să înțelegem două lucruri:

• Flexbox ne oferă o mare flexibilitate pentru construirea rapidă a unor forme frumoase
• și toate valorile menționate mai sus funcționează bine pentru acest exemplu specific. Pentru modelele proprii, probabil veți avea nevoie de valori diferite. De exemplu, aici etichetele caselor de bifare sunt destul de mici și, din acest motiv, oferim părintelui lor o lățime fixă ​​(adică 100px). Cu toate acestea, dacă au lățimi diferite, ar putea fi mai inteligent să le dați flex: 1 100px. 

Stiluri finale

Înainte de a pleca, să adăugăm o oarecare estetică pentru a face lucrurile mai reprezentative. Alegeți separat fila CSS din demonstrația de mai jos pentru a vedea unde au fost adăugate culorile și distanțele:

Concluzie

După cum puteți vedea, cu marcarea minimă și puterea flexboxului, am reușit să construim o formă receptivă. Sperăm că acum ați câștigat câteva cunoștințe utile care vă vor ajuta să vă construiți propriile formulare flexbox. 

Pasii urmatori

Dacă doriți să luați această formă un pas mai departe, am două provocări pentru dvs.:

• Îmbunătățiți aspectul prin suprascrierea stilurilor implicite (de exemplu, adăugați casetele de selectare personalizate)
• și să o facă dinamic. De exemplu, dacă sunteți familiarizat cu WordPress, vedeți dacă este posibil să creați un formular de contact 7 sau un formular Ninja care să păstreze structura și stilurile acestui formular.