Introducere în Web Development

Pe lângă tipurile de input de text, învățate în lecția trecută, elementul <input> ascunde și alte input-uri. Dintre acestea, cele mai interesante mie mi se par bifele (checkbox) și radio.

Pentru ambele se recomandă să dăm și atributul value, pentru că valoarea dată aici va fi trimisă la server. Valoarea nu va fi afișată, ci va trebui să o afișăm noi altcumva. Cel mai bun mod spun este să punem input-ul și textul într-un element <label>. Astfel, utilizatorul poate apăsa pe text pentru a activa sau dezactiva bifa corespunzătoare.

                    <label>
  <input type="checkbox" />
  Sunt de acord cu termenii și condițiile
</label>
                

                    <label>
  <input type="radio" name="tos" value="yes" /> Da
</label>
<label>
  <input type="radio" name="tos" value="no" /> Nu
</label
                

Radiourile ne permit alegerea unei singure opțiuni din mai multe. Pentru a le grupa, se folosește atributul name. Atunci când mai multe radiouri au același nume, poate fi selectat cel mult unul dintre ele.

Pentru ambele tipuri, se mai poate folosi atributul checked, fără nicio valoare, pentru a arăta opțiunile care au fost pre-selectate.

Stilizare Checkbox și Radio

Diferite browsere afișează în mod diferit un checkbox sau radio. Dacă încercăm să stilizăm din CSS, rezultatul poate fi în continuare diferit. Dacă nu vrem asta, primul lucru de făcut este să facem:

                    appearance: none;
                

Asta va face ca elementul să fie afișat ca un simplu element gol.

Apoi putem să stilizăm elementul cum vrem. De exemplu:

                    input[type='checkbox'] {
  appearance: none;
  width: 1em;
  height: 1em;
  border: 1px solid currentColor;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
                

Mai trebuie să tratăm cazul în care elementul este selectat. De exemplu, putem afișa un caracter de bifă în pseudo-elementul ::before

                    input[type='checkbox']:checked::before {
  content: '✔';
  font-size: 0.5em;
}
                

Provocare

Gândește-te cum să stilizezi și un radio.