Învățați să îmbunătățiți aspectul site-ului dvs.
Învățați cum să modelați formularele cu CSS este o modalitate excelentă de a îmbunătăți aspectul site-ului dvs. Formularele HTML sunt, fără îndoială, printre cele mai urâte lucruri de pe cele mai multe pagini web. Ele sunt adesea plictisitoare și utilitare și nu oferă mult în stilul lor.
Cu CSS, care se poate schimba. Combinarea CSS cu etichetele de formular mai avansate poate oferi câteva forme frumoase.
Modificați culorile
La fel ca în cazul textului, puteți schimba culorile primului și fundalului elementelor de formă.
O modalitate ușoară de a schimba culoarea de fundal a aproape fiecărui element de formă este de a folosi proprietatea de culoare de fundal pe eticheta de intrare. De exemplu, acest cod aplică o culoare de fundal albastru (# 9cf) pe toate elementele.
intrare {
fundal-culoare: # 9cf;
culoare: # 000;
}
Pentru a schimba culoarea de fundal numai pentru anumite elemente de formă, trebuie doar să adăugați textarea și să selectați stilul. De exemplu:
intrare, textarea, selectați {
fundal-culoare: # 9cf;
culoare: # 000;
}
Asigurați-vă că modificați culoarea textului dacă faceți culoarea de fundal întunecată. Culorile contrastante ajută la îmbunătățirea lizibilității elementelor de formă. De exemplu, textul pe o culoare de fundal roșu închis este mult mai ușor de citit dacă culoarea textului este albă. De exemplu, acest cod plasează text alb pe fundal roșu.
intrare, textarea, selectați {
fundal-culoare: # c00;
culoare: #fff;
}
Puteți chiar pune o culoare de fundal în eticheta formularului în sine. Amintiți-vă că eticheta formularului este un element de bloc , astfel încât culoarea umple întregul dreptunghi, nu doar locațiile elementelor.
Puteți adăuga un fundal galben unui element de bloc pentru a face ca zona să iasă în evidență, după cum urmează:
forma {
fundal-culoare: #ffc;
}
Adăugați Frontiere
La fel ca în cazul culorilor, puteți schimba marginea diferitelor elemente de formă. Puteți adăuga o singură margine în jurul întregului formular. Asigurați-vă că adăugați umplutură sau că elementele de formă vor fi blocate imediat lângă limită.
Iată un exemplu de cod pentru o margine neagră de 1 pixel cu 5 pixeli de umplutură:
forma {
frontieră: 1px solid # 000;
padding: 5px;
}
Puteți pune granițe în jurul valorii de mai mult decât forma în sine. Modificați marginea elementelor de intrare pentru a le scoate în evidență:
intrare {
frontieră: 2px dashed # c00;
}
Aveți grijă atunci când puneți bordurile pe casetele de intrare, deoarece acestea arată mai puțin ca casetele de intrare atunci și unii oameni nu își dau seama că pot completa formularul.
Combinarea caracteristicilor de stil
Prin punerea împreună a elementelor dvs. de formă cu gândul și unele CSS, puteți configura o formă frumoasă care să completeze designul și aspectul site-ului dvs.