Un formular cu etichete stilate
Cum să stilați o etichetă de formular cu CSS. Un element de formular care este utilizat pentru a eticheta diferitele câmpuri și zone de intrare dintr-un formular de pagină web este elementul de etichetă. Poate fi stilizat folosind regulile Cascading Style Sheet.
Pasul 1
Pentru a stila elementele de etichetă așa cum apar în imaginea din introducere, trebuie să utilizați elementul de etichetă cu atributul „pentru”. Mai mult, trebuie să închideți elementul de etichetă înainte de a adăuga elementul „input” în sine. HTML-ul pentru formularul complet este prezentat în ilustrație.
Videoclipul zilei
Pasul 2
Pentru a stila elementele de etichetă, am făcut ca etichetele să se afișeze ca elemente la nivel de bloc, care au fost flotate spre stânga. Apoi am atribuit o lățime etichetelor, astfel încât câmpurile de intrare să fie toate la o distanță uniformă de etichete. Am atribuit o culoare și am făcut textul aldine. Am folosit conținut generat pentru a adăuga două puncte (: ) după etichetă. (Este posibil ca două puncte să nu apară în fiecare browser.)
Iată CSS-ul:
etichetă { culoare: #B4886B; greutatea fontului: bold; afisare: bloc; latime: 150px; plutește la stânga; } etichetă: după { conținut: ": " }
Pasul 3
Doar pentru a fi complet, vă voi arăta și CSS-ul folosit pentru stilarea setului de câmpuri, deoarece elementele etichetei sunt încadrate de un set de câmpuri mărginite.
Iată acel CSS:
fieldset { border: 1px solid #CCA383; latime: 400px; fundal: #FFE8EF; umplutură: 3px; } legendă fieldset { background: #CCA383; umplutură: 6px; greutatea fontului: bold; }
Pasul 4
Ai putea face multe alte lucruri pentru a stila elementele etichetei. Exemplul meu este doar o modalitate de a face acest lucru.
Formularul HTML
Lucruri de care veți avea nevoie
Cunoștințe practice de HTML
Cunoștințe practice de CSS
