CSS pentru imagini, media și formulare — stilizare, accesibilitate și bune practici

Imagini, media și formulare

În această secțiune analizăm modul în care anumite elemente speciale sunt tratate în CSS. Imaginile, materialele media și formularele se comportă diferit în ceea ce privește stilizarea, iar înțelegerea limitărilor și posibilităților CSS te poate scuti de multă frustrare.

Vom evidenția cele mai importante aspecte pe care ar trebui să le cunoști pentru a stiliza eficient aceste componente și pentru a evita comportamentele neașteptate.

Elemente înlocuite

Imaginile și videoclipurile fac parte din categoria elementelor înlocuite. Asta înseamnă că CSS poate controla poziționarea lor în pagină, dar nu și conținutul intern.

Aceste elemente au de obicei un raport de aspect (aspect ratio), adică o dimensiune intrinsecă pe orizontală și verticală. Ele sunt afișate implicit la dimensiunea lor naturală, dacă nu intervenim cu stiluri CSS.

În CSS, toate elementele sunt tratate ca „cutii”. Dacă o imagine este plasată într-o cutie mai mică sau mai mare decât dimensiunea ei intrinsecă, ea va fi redimensionată automat — fie se micșorează, fie se mărește, până când poate chiar să se reverse în afara containerului.

În exemplul următor avem două cutii de 200px:

Prima conține o imagine mai mică, care nu se extinde pentru a umple cutia.
A doua conține o imagine mai mare, care se revarsă în afara containerului.

🔧 Exemplu elemente înlocuite - imagini

<div class="container">
  <div class="box"><img src="imagini/star.png" alt="stea"></div>
  <div class="box"><img src="imagini/star1.png" alt="alta stea"></div>
</div>

.container {
  display: flex;
  justify-content: space-around;
}

.box {
  border: 5px solid navy;
  margin: 2rem;
  width: 200px;
  height: 200px;
}

img {
/*max-width: 100%;*/
}

Controlul dimensiunii imaginilor

Ce putem face cu o imagine care se revarsă?

O tehnică simplă și eficientă, prezentată în lecțiile anterioare, este setarea unei lățimi maxime de 100% pentru imagine. Această abordare funcționează și pentru alte elemente media precum <video> sau <iframe>.

În exemplul anterior, poți decomenta linia max-width: 100% pentru a vedea rezultatul.

Există și alte variante. Poți alege să dimensionezi o imagine astfel încât să acopere complet containerul. Aici intervine proprietatea object-fit, care oferă mai multe opțiuni de redimensionare:

cover - imaginea acoperă containerul păstrând raportul de aspect, dar pot apărea pierderi vizuale.
contain - imaginea se redimensionează complet pentru a încăpea în container, dar pot apărea spații goale dacă raportul de aspect diferă.

🔧 Exemplu object-fit

<div class="container">
  <div class="box">
    <img src="imagini/baloane.jpg" alt="baloane" class="cover">
  </div>
  <div class="box">
    <img src="imagini/baloane.jpg" alt="baloane" class="contain">
  </div>
</div>

.container {
  display: flex;
  justify-content: space-around;
}

.box {
  border: 5px solid navy;
  margin: 2rem;
  width: 200px;
  height: 200px;
}

img {
  height: 100%;
  width: 100%;
}

.cover {
  object-fit: cover;
}

.contain {
  object-fit: contain;
/*  object-fit: fill;*/
}

Poți încerca și valoarea fill, dar aceasta nu păstrează raportul de aspect, ceea ce poate duce la deformarea imaginii.

Comportamentul elementelor înlocuite în layout

Atunci când folosești diverse tehnici CSS de machetare (layout), elementele înlocuite — precum imaginile sau videoclipurile — pot avea un comportament diferit față de celelalte elemente HTML.

De exemplu, într-o structură grid sau flex, majoritatea elementelor se extind automat pentru a umple spațiul disponibil. Imaginile, însă, nu se extind implicit și vor fi aliniate în zona de start a containerului.

Poți observa acest comportament în exemplul de mai jos, unde toate elementele au o culoare de fundal și se extind complet — cu excepția imaginii.

🔧 Exemplu comportament elemente înlocuite

<div class="container">
  <img src="imagini/star1.png" alt="star">
  <div></div>
  <div></div>
  <div></div>
</div>

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 200px 200px;
  grid-gap: 20px;
  width: 90%;
  margin: 0 auto;
}

.container > div {
  background-color: limegreen;
  border-radius: .5em;
}

/*
img {
  width: 100%;
  height: 100%;
}
*/

☞ Reține: când vei studia machetarea paginilor în lecțiile următoare, ține cont că imaginile dintr-o structură grid sau flex au comportamente implicite diferite față de celelalte elemente. Este important să le stilizezi explicit pentru a obține rezultatul dorit.

Elemente de formular

Elementele de formular pot fi destul de dificil de stilizat cu ajutorul CSS. Dacă ai parcurs secțiunea dedicată formularelor din cursul HTML, ai văzut deja câteva metode de stilizare pe care nu le vom relua complet aici.

Totuși, există câteva concepte importante pe care le vom discuta în această secțiune.

Multe controale de formular sunt introduse în pagină cu ajutorul elementului <input type="text">, care definește câmpuri simple precum câmpul text, dar și câmpuri mai complexe introduse de HTML5, cum ar fi date și color.

Există și elemente suplimentare, precum <textarea> pentru text pe mai multe linii, și etichete structurale precum <fieldset> și <legend>.

HTML5 oferă atribute care permit dezvoltatorilor să indice ce câmpuri sunt obligatorii și ce tip de conținut trebuie introdus. Dacă utilizatorul introduce date incorecte sau omite completarea unui câmp, browserul poate afișa automat un mesaj de eroare.

Din cauza diversității browserelor, există o inconsistență în ceea ce privește stilizarea și personalizarea elementelor de formular.

Stilizarea elementelor `input` de tip text

Elementele care permit introducerea de text, precum <input type="text">, <input type="email"> și <textarea>, sunt relativ ușor de stilizat și se comportă similar cu alte „cutii” din pagină.

Totuși, stilul implicit aplicat acestor elemente variază în funcție de sistemul de operare și browserul utilizatorului.

În exemplul de mai jos, vei observa că marginea, umplutura și chenarul se aplică așa cum te-ai aștepta. Am folosit selectori de atribute pentru a ținti diferitele tipuri de input.

Experimentează cu stilul formularului: modifică chenarul (border), umplutura (padding), culoarea de fundal (background) și tipul de font (font-family).

🔧 Exemplu stilizare input text

 <div class="container">
  <form>
    <div>
      <label for="name">Nume</label>
      <input type="text" id="name">
    </div>
    <div>
      <label for="email">E-mail</label>
      <input type="email" id="email">
    </div>
    <div class="buttons">
      <input type="submit" value="Continua">
    </div>
  </form>
 </div>

.container {
  display: block;
  margin: 0 auto;
  padding: 0 1rem;
  width: 300px;
}

input[type="text"],
input[type="email"] {
  border: 2px dashed tomato;
  background-color: bisque;
  margin: 0 0 1em 0;
  padding: 10px;
  width: 100%;
}

input[type="submit"] {
  border: 3px solid black;
  background-color: tomato;
  border-radius: 5px;
  padding: 10px 2em;
  font-family: fantasy;
  font-size: 19px;
  font-weight: bold;
  color: #fff;
}

input[type="submit"]:hover {
  background-color: bisque;
  border: 2px dashed tomato;
  color: black;
}

☞ Important! Când stilizezi elementele de formular, asigură-te că utilizatorii pot identifica ușor că interacționează cu un formular.

Deși poți crea câmpuri fără chenar sau culoare de fundal, acestea pot deveni greu de observat și confuze. Utilizatorii nu sunt designeri și se așteaptă ca formularele să arate într-un mod familiar. Evită modificările dramatice care pot afecta claritatea și uzabilitatea.

Așa cum am explicat în cursul HTML, multe dintre tipurile de input mai complexe sunt dependente de sistemul de operare și nu pot fi personalizate complet cu CSS.

Din acest motiv, formularele complexe pot arăta diferit în funcție de browser. Testează-le în cât mai multe medii pentru a te asigura că utilizatorii au o experiență plăcută și intuitivă.

Moștenirea (Inheritance) și formularele

În unele browsere, elementele de formular nu moștenesc automat stilurile aplicate fontului. Dacă dorești ca aceste elemente să respecte stilizarea definită pentru <body> sau pentru un element părinte, folosește următoarea regulă CSS:


button, 
input, 
select, 
textarea { 
  font-family: inherit; 
  font-size: 100%; 
}

Elementele de formular și dimensiunile cutiei (box-sizing)

Dimensiunile elementelor de formular pot varia semnificativ în funcție de browser. Pentru a te asigura că acestea au o lățime și înălțime consistentă, este recomandat să resetezi margin și padding la 0, apoi să le redefinești pentru fiecare element pe care dorești să-l personalizezi.


button, 
input, 
select, 
textarea {  
  box-sizing: border-box; 
  padding: 0;
  margin: 0; 
}

În plus, pentru a preveni afișarea inutilă a barei de scroll în Internet Explorer, setează overflow: auto; pe elementul <textarea>:


textarea {
  overflow: auto;
}

Dacă ar fi să sintetizăm toate aceste reguli într-un mic „reset” CSS, care să ofere o bază coerentă pentru stilizarea formularelor, ar arăta astfel:


button, 
input, 
select, 
textarea { 
  font-family: inherit; 
  font-size: 100%; 
  box-sizing: border-box; 
  padding: 0;
  margin: 0; 
}
textarea { 
  overflow: auto; 
}

☞ Mulți dezvoltatori folosesc foi de stil de tip normalize, care aduc toate elementele HTML la același nivel de stilizare, indiferent de browser sau sistem de operare, înainte de a începe personalizarea propriu-zisă.

Deși aceste foi nu mai sunt la fel de esențiale ca în trecut, datorită îmbunătățirii consistentei între browsere, ele rămân utile în proiecte moderne.

Poți explora una dintre cele mai populare foi de stil: Normalize.css, folosită ca punct de plecare în numeroase proiecte web.

Accesibilitate în formulare

Accesibilitatea în formulare înseamnă să te asiguri că toți utilizatorii — inclusiv cei care folosesc cititoare de ecran, tastatură sau alte tehnologii asistive — pot interacționa ușor cu câmpurile și controalele din formular.

Un formular accesibil este clar, bine etichetat și oferă feedback util în caz de eroare.

Etichetarea corectă a câmpurilor

Fiecare câmp de formular trebuie să aibă o etichetă (<label>) asociată. Aceasta ajută cititoarele de ecran să identifice scopul câmpului.


<form>
  <label for="email">Adresa de e-mail</label>
  <input type="email" id="email" name="email" required>
</form>

Atribute ARIA și mesaje de ajutor

Poți folosi atribute precum aria-describedby pentru a lega un mesaj de ajutor sau eroare de un câmp:


<form>
  <label for="name">Nume</label>
  <input type="text" id="name" aria-describedby="nameHelp">
  <small id="nameHelp">Introduceți numele complet.</small>
</form>

Validare și feedback automat

HTML5 permite validarea automată cu atribute precum required, type și pattern. Browserul va afișa un mesaj de eroare dacă datele nu sunt introduse corect.


<form>
  <label for="phone">Telefon</label>
  <input type="tel" id="phone" name="phone" pattern="[0-9]{10}" required>
</form>

Exemplu complet de formular accesibil


<form>
  <fieldset>
    <legend>Contact</legend>

    <label for="email">Email</label>
    <input type="email" id="email" name="email" required aria-describedby="emailHelp">
    <small id="emailHelp">Vom folosi adresa doar pentru răspuns.</small>

    <label for="message">Mesaj</label>
    <textarea id="message" name="message" rows="4" required></textarea>

    <button type="submit">Trimite</button>
  </fieldset>
</form>

☞ Reține: Accesibilitatea nu este doar despre conformitate legală — este despre respect și incluziune. Un formular accesibil este un semn de profesionalism și grijă față de toți utilizatorii.

Responsivitate și media queries

Un site modern trebuie să se adapteze la orice dimensiune de ecran — de la telefoane mobile la monitoare mari. CSS oferă instrumente puternice pentru a crea layout-uri flexibile și componente care se redimensionează automat.

Imaginile și formularele sunt elemente esențiale care trebuie să fie responsive, pentru a oferi o experiență bună pe orice dispozitiv.

Imagini responsive

O tehnică simplă pentru a face imaginile responsive este folosirea proprietății max-width: 100%. Aceasta asigură că imaginea nu va depăși dimensiunea containerului:


img {
  max-width: 100%;
  height: auto;
}

Formulare adaptabile

Formularele pot fi organizate în coloane pe ecrane mari și într-un layout vertical pe ecrane mici. Folosim @media pentru a adapta stilurile în funcție de dimensiunea viewportului.

🔧 Exemplu formular responsive

<form class="responsive-form">
  <div>
    <label for="nume">Nume</label>
    <input type="text" id="nume">
  </div>
  <div>
    <label for="email">Email</label>
    <input type="email" id="email">
  </div>
  <button type="submit">Trimite</button>
</form>

.responsive-form {
  display: flex;
  gap: 1rem;
  max-width: 600px;
  margin: 2rem auto;
}

.responsive-form div {
  flex: 1;
  display: flex;
  flex-direction: column;
}

@media (max-width: 600px) {
  .responsive-form {
    flex-direction: column;
  }
}

☞ Responsivitatea nu înseamnă doar să „încapă” pe mobil — ci să fie ușor de folosit, lizibilă și bine organizată indiferent de dispozitiv.

Funcții CSS moderne aplicabile

CSS modern oferă funcții care permit control precis asupra dimensiunilor, proporțiilor și scalării elementelor. Acestea sunt utile mai ales în designuri responsive, unde flexibilitatea este esențială.

Funcția `clamp()`

clamp() permite definirea unei dimensiuni care se adaptează între o valoare minimă și maximă, în funcție de viewport. Este ideală pentru fonturi, margini sau spațieri fluide.


h1 {
  font-size: clamp(1.5rem, 5vw, 3rem);
}

Proprietatea `aspect-ratio`

Cu aspect-ratio poți seta proporția dintre lățime și înălțime a unui element, fără să fie nevoie de trucuri cu padding sau imagini de fundal.


img {
  aspect-ratio: 16 / 9;
  width: 100%;
  object-fit: cover;
}

Exemplu live cu `clamp()` și `aspect-ratio`

🔧 Exemplu funcții CSS moderne

<div class="wrapper">
  <h1>Dimensiune fluidă cu clamp()</h1>
  <div class="video-box">
    <img src="imagini/baloane.jpg" alt="Imagine cu aspect ratio">
  </div>
</div>

.wrapper {
  max-width: 800px;
  margin: 2rem auto;
  padding: 1rem;
}

h1 {
  font-size: clamp(1.5rem, 5vw, 3rem);
  text-align: center;
  margin-bottom: 2rem;
}

.video-box {
  aspect-ratio: 16 / 9;
  width: 100%;
  overflow: hidden;
  border: 4px solid teal;
  border-radius: 8px;
}

.video-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

☞ Folosește clamp() pentru dimensiuni fluide și aspect-ratio pentru layouturi consistente. Aceste funcții simplifică mult designul responsive și elimină nevoia de hack-uri CSS vechi.

Personalizarea elementelor native

Unele elemente de formular, precum <select>, <checkbox> și <radio>, au un stil implicit controlat de sistemul de operare și browser. Acest lucru face ca personalizarea lor să fie mai dificilă și uneori inconsistentă.

Pentru a avea control complet asupra aspectului, putem folosi proprietatea appearance: none, care elimină stilul nativ și permite aplicarea propriilor reguli CSS.

Exemplu: stilizare <select> personalizat

🔧 Exemplu stilizare select

<form class="custom-form">
  <label for="fruct">Alege un fruct:</label>
  <select id="fruct" name="fruct">
    <option value="mere">Mere</option>
    <option value="pere">Pere</option>
    <option value="prune">Prune</option>
  </select>
</form>

.custom-form {
  max-width: 300px;
  margin: 2rem auto;
  font-family: sans-serif;
}

select {
  appearance: none;
  background-color: #f0f0f0;
  border: 2px solid teal;
  padding: 0.5em 1em;
  border-radius: 6px;
  font-size: 1rem;
  width: 100%;
  background-image: url("imagini/arrow-down.svg");
  background-repeat: no-repeat;
  background-position: right 0.75em center;
  background-size: 1em;
}

Alte elemente personalizabile

Checkbox-urile și butoanele radio pot fi ascunse și înlocuite cu elemente vizuale personalizate, dar necesită mai mult cod și atenție la accesibilitate.


input[type="checkbox"] {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid gray;
  border-radius: 4px;
  background-color: white;
}

input[type="checkbox"]:checked {
  background-color: teal;
}

☞ Personalizarea elementelor native poate îmbunătăți designul, dar trebuie făcută cu grijă. Asigură-te că funcționalitatea și accesibilitatea nu sunt afectate.

Testare cross-browser

Unul dintre cele mai importante aspecte în dezvoltarea web este testarea în mai multe browsere. Chiar dacă standardele CSS sunt tot mai bine respectate, există încă diferențe subtile în modul în care browserele interpretează stilurile — mai ales în cazul formularelor și elementelor media.

Este recomandat să testezi site-ul în cele mai populare browsere: Chrome, Firefox, Safari, Edge și chiar în versiunile mobile ale acestora.

Acest tip de input este stilizat diferit în funcție de browser și sistemul de operare. În unele cazuri, nu poate fi personalizat deloc cu CSS.

Exemplu: comportament diferit al <input type="date">

🔧 Exemplu input date

<form class="date-form">
  <label for="data">Selectează o dată:</label>
  <input type="date" id="data" name="data">
</form>

.date-form {
  max-width: 300px;
  margin: 2rem auto;
  font-family: sans-serif;
}

input[type="date"] {
  border: 2px solid teal;
  padding: 0.5em;
  border-radius: 6px;
  font-size: 1rem;
  width: 100%;
}

Recomandări pentru testare

Folosește BrowserStack sau LambdaTest pentru testare pe mai multe platforme.
Activează DevTools în browser pentru a inspecta stilurile și comportamentul elementelor.
Testează pe dispozitive reale, nu doar în emulator.
Verifică dacă elementele interactive (formulare, butoane, meniuri) funcționează corect cu tastatura și cititoare de ecran.

☞ Nu presupune că dacă ceva arată bine în Chrome, va arăta la fel peste tot. Testarea cross-browser este esențială pentru o experiență consistentă și profesională.

Recapitulare și bune practici

În această pagină am explorat modul în care CSS interacționează cu imagini, media și formulare. Am discutat despre comportamentul elementelor înlocuite, despre stilizarea și adaptarea formularelor, precum și despre funcții moderne și testare cross-browser. Mai jos găsești o sinteză utilă:

Checklist CSS pentru imagini și media

Folosește max-width: 100% pentru imagini responsive.
Aplică object-fit pentru controlul scalării imaginilor în containere.
Setează aspect-ratio pentru layouturi consistente.
Testează elementele media în mai multe browsere și pe dispozitive reale.

Checklist CSS pentru formulare

Asociază etichete <label> corecte fiecărui câmp.
Folosește font-family: inherit și box-sizing: border-box pentru consistență.
Aplică appearance: none pentru a personaliza elementele native.
Testează formularele pe mobil și desktop, cu tastatură și cititoare de ecran.

Recomandări generale

Folosește clamp(), min() și max() pentru dimensiuni fluide.
Adaptează layoutul cu @media pentru ecrane mici.
Nu suprastiliza formularele — păstrează claritatea și uzabilitatea.
Normalizează stilurile de bază cu o foaie precum Normalize.css.

☞ CSS este un instrument puternic, dar trebuie folosit cu grijă. O pagină bine stilizată nu este doar frumoasă — este accesibilă, responsivă și ușor de folosit pentru toți utilizatorii.

🧠 Quiz - CSS Media

Pozitionarea elementelor ➔