<input type=checkbox> în HTML

<input type="checkbox" id="termeni" name="termeni" value="da">
<label for="termeni">Accept termenii</label>

Ce face <input type=checkbox>

<input type="checkbox"> afișează o căsuță pe care utilizatorul o bifează sau o debifează. Fiecare căsuță este independentă: într-un grup pot fi bifate oricâte, inclusiv niciuna.

La trimitere, doar căsuțele bifate ajung la server, cu perechea name=value. Dacă lipsește value, se trimite textul on. Căsuțele nebifate nu se trimit deloc, deci serverul trebuie să trateze lipsa câmpului ca „nu”.

Leagă mereu căsuța de un <label>: clicul pe text bifează căsuța, iar zona de atingere pe telefon devine mai mare. Starea intermediară (o liniuță în loc de bifă) se setează doar din JavaScript, cu proprietatea indeterminate.

Atribute

Atribut	Descriere
checked	Căsuța este bifată la încărcarea paginii.
value	Textul trimis la server când căsuța este bifată (implicit on).
name	Numele câmpului. Pentru un grup citit în PHP, folosește nume[].
required	Formularul nu se trimite dacă această căsuță nu este bifată.
disabled	Căsuța nu poate fi schimbată și nu este trimisă.

Exemple

Exemplul 1: Acord obligatoriu pentru termeni

required pe o căsuță înseamnă că trebuie bifată înainte de trimitere.

<form action="/comanda" method="post">
  <input type="checkbox" id="termeni" name="termeni" value="da" required>
  <label for="termeni">Am citit și accept termenii și condițiile</label>
  <button>Plasează comanda</button>
</form>

Ce afișează browserul

☐ Am citit și accept termenii și condițiile
Dacă apeși „Plasează comanda” fără bifă, browserul cere bifarea căsuței.

Exemplul 2: Mai multe alegeri în același grup

Numele toppinguri[] face ca PHP să primească un tablou cu valorile bifate.

<fieldset>
  <legend>Ce adăugăm pe pizza?</legend>
  <label><input type="checkbox" name="toppinguri[]" value="ciuperci" checked> Ciuperci</label>
  <label><input type="checkbox" name="toppinguri[]" value="masline"> Măsline</label>
  <label><input type="checkbox" name="toppinguri[]" value="porumb"> Porumb (+3 lei)</label>
</fieldset>

Ce afișează browserul

☑ Ciuperci  ☐ Măsline  ☐ Porumb (+3 lei)
Dacă bifezi și Porumb, serverul primește toppinguri[]=ciuperci&toppinguri[]=porumb.

Greșeli frecvente

• Așteptarea ca o căsuță nebifată să trimită 0 sau nu: nu se trimite nimic, iar serverul trebuie să trateze lipsa ca valoare falsă.
• Căsuțe fără <label> asociat: zona de clic este minusculă și cititoarele de ecran nu știu ce înseamnă căsuța.
• Folosirea căsuțelor când trebuie aleasă o singură variantă: pentru asta există type="radio".

Comenzi înrudite

• <input type=radio>: Butoanele radio pentru alegerea unei singure variante dintr-un grup; grupul este format de butoanele cu același name.
• <label>: Etichetă accesibilă pentru un control de formular: dând clic pe etichetă, activezi sau bifezi câmpul asociat.
• <fieldset> și <legend>: Grupează vizual și semantic câmpurile înrudite dintr-un formular, cu o bordură și un titlu (legend).
• <form>: Containerul principal pentru colectarea datelor de la utilizator și trimiterea lor către un server.
• <input>: Cel mai versatil element de formular: își schimbă complet aspectul și funcția în funcție de atributul type.