Modul de stilare a formularelor cu CSS: un ghid pentru începători

Aplicațiile colectează în principal date prin intermediul formularelor. Luați un formular generic de înscriere, de exemplu: există mai multe câmpuri pentru care utilizatorii pot introduce informații precum numele, adresa de e-mail etc.

În trecut, site-urile web pur și simplu aveau formulare HTML simple și plictisitoare fără stiluri. Asta înainte ca CSS să schimbe totul. Acum putem crea forme mai interesante și pline de viață folosind cele mai recente caracteristici ale CSS.

Nu vă credeți doar pe cuvânt. Mai jos este cum arată un formular HTML tipic fără CSS.

Iată aceeași formă jazzed cu un pic de CSS .

În acest tutorial, vă vom arăta cum să recreați formularul de mai sus, precum și alte câteva uimitoare modificări pe care le puteți implementa pentru a crea formulare vizuale impresionante și ușor de utilizat.

Vom demonstra cum să stilizați formularele cu CSS în șase pași:

1. Setarea box-sizing
2. Selectoare CSS pentru elemente de intrare
3. Metode de stilare de bază pentru câmpurile de introducere a textului
4. Stilizarea altor tipuri de intrare
5. pseudo-clase UI
6. Intrări non-personalizabile

Înainte de a ne arunca cu capul, este important să înțelegem că nu există un stil specific pentru formulare. Posibilitățile sunt limitate doar de imaginația ta. Acest ghid este menit să vă ajute să începeți pe calea către crearea propriilor modele unice cu CSS.

Să începem!

Setarea dimensionării casetelor

De obicei, setez * {box-sizing:border-box;} nu numai pentru formulare, ci și pentru pagini web. Când îl setați, lățimea tuturor elementelor va conține umplutura.

De exemplu, setați lățimea și umplutura după cum urmează.

.some-class { width:200px; padding:20px;}

.some-class fără box-sizing:border-box va avea o lățime mai mare de 200px poate fi o problemă. De aceea, majoritatea dezvoltatorilor folosesc border-box pentru toate elementele.

Mai jos este o versiune mai bună a codului. De asemenea, acceptă pseudo-elementele :before și :after.

*, *:before, *:after { box-sizing: border-box;}

Sfat: selectorul * selectează toate elementele din document.

Selectorele CSS pentru elementele de intrare

Cel mai simplu mod de a selecta elementele de intrare trebuie să utilizeze selectoare de atribute CSS.

Aceste selectoare vor selecta toate elementele de intrare din document. Dacă trebuie să specificați selectoare, va trebui să adăugați clase la elemente.

<input type="text" class="signup-text-input" />

Apoi:

.signup-text-input { // styles here}

Metodele de stilare de bază pentru câmpurile de introducere a textului pe o singură linie

Câmpurile cu o singură linie sunt cele mai comune câmpuri de intrare utilizate în formulare. De obicei, o introducere de text pe o singură linie este o casetă simplă cu un chenar (aceasta depinde de browser).

Iată marcajul HTML pentru un câmp cu o singură linie cu un substituent.

<input type="text" placeholder="Name" />

Va arăta astfel:

Puteți utiliza următoarele Proprietăți CSS pentru a face acest câmp de intrare mai atractiv.

• Căptușeala (pentru a adăuga spațierea interioară)
• Marjă (pentru a adăuga o marjă în jurul câmpului de intrare)
• Border
• Umbra casetei
• Raza chenarului
• Lățimea
• Fontul

Să mărim pentru fiecare dintre aceste proprietăți.

Îmbunătățirea

Adăugarea unui spațiu interior câmpului de intrare poate ajuta la îmbunătățirea clarității. Puteți realiza acest lucru cu proprietatea padding.

input { padding: 10px;}

Margină

Dacă există alte elemente lângă câmpul de intrare, poate doriți să adăugați o marjă în jurul acestuia pentru a preveni gruparea.

input { padding:10px; margin:10px 0; // add top and bottom margin}

Border

În majoritatea browserelor, câmpurile de introducere a textului au chenare, pe care le puteți personaliza.

.border-customized-input { border: 2px solid #eee;}

De asemenea, puteți elimina cu totul o margine.

.border-removed-input { border: 0;}

Sfat: asigurați-vă pentru a adăuga o culoare de fundal sau box-shadow când chenarul este eliminat. În caz contrar, utilizatorii nu vor vedea datele introduse.

Unii designeri web preferă să afișeze doar marginea inferioară, deoarece se simte cam ca și cum ar scrie pe o linie într-un notebook.

.border-bottom-input { border:0; // remove default border border-bottom:1px solid #eee; // add only bottom border}

Umbra casetei

Puteți utiliza proprietatea CSS box-shadow pentru a adăuga o umbră. Puteți obține o serie de efecte jucându-vă cu cele cinci valori ale proprietății.

input { padding:10px; border:0; box-shadow:0 0 15px 4px rgba(0,0,0,0.06);}

Raza frontierei

Proprietatea border-radius poate avea un impact masiv asupra simțirii formelor dvs. Prin curbarea marginilor casetelor, puteți modifica în mod semnificativ aspectul câmpurilor dvs. de intrare.

.rounded-input { padding:10px; border-radius:10px;}

Puteți obține un alt aspect cu totul utilizând box-shadow și border-radius împreună.

Lățime

Utilizați proprietatea width setați lățimea intrărilor.

input { width:100%;}

Fonturi

Majoritatea browserelor utilizează o familie și o dimensiune de font diferite pentru elementele formularului. Dacă este necesar, putem moșteni fontul din document.

input, textarea { font-family:inherit; font-size: inherit;}

Stilizarea altor tipuri de intrare

Puteți stiliza alte tipuri de intrare, cum ar fi zona de text, butonul radio, caseta de selectare și multe altele. Să aruncăm o privire mai atentă.

Zonele de text

Zonele de text sunt similare cu intrările de text, cu excepția faptului că permit intrări cu mai multe linii. De obicei, le veți folosi atunci când doriți să colectați date de formă mai lungă de la utilizatori, cum ar fi comentarii, mesaje etc. Puteți utiliza toate proprietățile CSS de bază pe care le-am discutat anterior pentru a stiliza zonele de text.

Proprietatea resize este, de asemenea, foarte utilă în zonele de text. În majoritatea browserelor, zonele de text sunt redimensionabile de-a lungul axelor x și y (valoare: both) în mod implicit. Îl puteți seta la both, horizontal sau vertical.

Consultați această zonă de text pe care am stilat-o:

Consultați stiloul
dyomzez de Supun Kavinda (@SupunKavinda)
pe CodePen.

În acest exemplu, am folosit resize:vertical pentru a permite doar redimensionarea pe verticală. Această practică este utilizată în majoritatea formularelor, deoarece previne barele de derulare orizontale enervante.

Notă: Dacă trebuie să creați zone de text de redimensionare automată, va trebui să utilizați o abordare JavaScript, care nu se află în sfera acest articol.

Casete de selectare și butoane radio

Casetele de selectare și butoanele radio implicite sunt greu de stilat și necesită CSS (și HTML) mai complexe.

o casetă de selectare, utilizați următorul cod HTML.

<label>Name <input type="checkbox" /> <span></span></label>

Câteva lucruri de reținut:

• Deoarece folosim <label> pentru a înfășura <input>, dacă faceți clic pe orice element din <``label``>, <input> va fi făcut clic
• Vom ascunde <input> deoarece browserele nu ne permit să îl modificăm mult
• <span> creează o casetă de selectare personalizată
• Vom folosi selectorul de pseudo-clasă input:checked starea și stilul bifate caseta de selectare personalizată

Iată o casetă de selectare personalizată (consultați comentariile din CSS pentru mai multe explicații):

Vedeți stiloul
yLNKQBo de Supun Kavinda ( @SupunKavinda)
pe CodePen.

Iată un buton radio personalizat:

Vezi stiloul
eYNMQNM de Supun Kavinda (@SupunKavinda)
pe CodePen.

Am folosit același concept (input:checked) pentru a crea elemente personalizate în ambele exemple.

În browsere, casetele de selectare sunt în formă de casetă, în timp ce butoanele radio sunt rotunde. Cel mai bine este să păstrați această convenție în intrări personalizate pentru a evita confuzia utilizatorului.

Selectați meniurile

Selectați meniurile permite utilizatorilor să selecteze un element din mai multe opțiuni.

Puteți stiliza elementul <select> pentru a arăta mai atrăgător.

select { width: 100%; padding:10px; border-radius:10px;}

Cu toate acestea, nu puteți stiliza meniul derulant (sau <option>), deoarece acestea sunt stilate în mod implicit, în funcție de sistemul de operare. Singura modalitate de a stiliza aceste elemente este de a utiliza meniurile drop-down personalizate cu JavaScript.

Butoane

La fel ca majoritatea elementelor, butoanele au stiluri implicite.

<button>Click Me</button>

Să condimentăm puțin acest lucru.

Pseudo-clase UI

Mai jos sunt câteva pseudo-clase UI care sunt utilizate în mod obișnuit cu elemente de formular.

Acestea pot fi utilizate pentru a afișa notificări pe baza atributelor unui element:

• :required
• :valid și :invalid
• :checked (am folosit deja acest lucru)

Acestea pot fi utilizate pentru a crea efecte asupra fiecărei stări:

• :hover
• :focus
• :active

Mesaje generate cu: obligatoriu

Pentru a afișa un mesaj în care este necesară introducerea:

Dacă eliminați atribut cu JavaScript, mesajul "Required" va fi eliminat automat.

Putem face același lucru cu :valid și :invalid pseudo-clase.

: hover și: focus

:hover selectează un element atunci când indicatorul mouse-ului se deplasează deasupra acestuia. :focus selectează un element atunci când este focalizat.

Aceste pseudo-clase sunt adesea folosite pentru a crea tranziții și ușoare modificări vizuale. De exemplu, puteți modifica lățimea, culoarea de fundal, culoarea chenarului, intensitatea umbrelor etc.Utilizarea proprietății transition cu aceste proprietăți face ca aceste modificări să fie mult mai ușoare.

Iată câteva efecte de plutire asupra elementelor formularului (încercați să treceți peste elemente).

Vedeți stiloul
yLNKZqg de Supun Kavinda (@SupunKavinda)
pe CodePen.

Când utilizatorii văd elementele se modifică subtil când plutesc deasupra lor, au impresia că elementul este acționabil. Aceasta este o considerație importantă la proiectarea elementelor formularului.

Ați observat că (în unele browsere) apare un contur albastru atunci când vă concentrați asupra elementelor formularului? Puteți utiliza pseudo-clasa :focus pentru a o elimina și a adăuga mai multe efecte atunci când elementul este focalizat.

Următorul cod elimină conturul de focalizare pentru toate elementele.

*:focus {outline:none !important}

Pentru a adăuga un contur de focalizare:

input:focus { background-color: #ffd969; border-color: #000; // and any other style}

Ați văzut intrări de căutare care scară atunci când este concentrat? Încercați această intrare.

Consultați stiloul
KKpoJJa de Supun Kavinda (@SupunKavinda)
pe CodePen.

Intrări noncustomizable

Stilul elementelor formularului a fost în mod istoric o ordine înaltă. Există câteva elemente de formă pe care nu le controlăm prea mult asupra stilului. De exemplu:

• <input type="color">
• <input type="file">
• <progress>
• <option>, <optgroup>, <datalist>

Aceste elemente sunt furnizate de browser și stilate pe baza sistemului de operare. Singura modalitate de a stiliza aceste elemente este de a utiliza controale personalizate, care sunt create folosind elemente HTML stilabile precum div, span etc.

De exemplu, atunci când stilăm <input type="file">, putem ascunde intrarea implicită și putem utiliza un buton personalizat.

Comenzile personalizate pentru elementele formularului sunt dezvoltat pentru majoritatea bibliotecilor majore JavaScript. Le puteți găsi pe GitHub.

Concluzie

Acum ar trebui să înțelegeți cum să stilizați elemente de formular simple și cum să utilizați controale personalizate atunci când câmpurile de introducere a browserului sunt dificil de stilat. După cum am afirmat la începutul acestei postări, acestea sunt doar elementele de bază ale stilului CSS. Ar trebui să utilizați aceste sfaturi ca bază pentru a vă lăsa imaginația să se dezlănțuiască.

Ca sfat de închidere, nu uitați să faceți toate formularele receptive.

Căutați mai multă inspirație pentru designul formularelor? Consultați această colecție CodePen.