<input type=radio> în HTML

<input type="radio" id="card" name="plata" value="card">
<label for="card">Card</label>

Ce face <input type=radio>

<input type="radio"> afișează un cerc mic care se poate selecta. Butoanele cu același atribut name formează un grup în care poate fi selectat doar unul: alegerea altuia îl deselectează automat pe cel anterior.

Un buton radio selectat nu poate fi deselectat cu un clic, ci doar alegând alt buton din grup. Din tastatură, Tab intră în grup, iar săgețile mută selecția între variante.

La trimitere ajunge la server doar valoarea butonului ales (plata=card). Pune required pe cel puțin un buton din grup ca formularul să nu se trimită fără alegere, sau bifează din start varianta cea mai frecventă cu checked.

Atribute

Atribut	Descriere
name	Numele grupului; toate butoanele dintr-un grup au același name.
value	Valoarea trimisă când butonul este ales (implicit on, de aceea se scrie mereu).
checked	Butonul este ales la încărcarea paginii.
required	Pe oricare buton din grup: cere alegerea unei variante.
disabled	Varianta nu poate fi aleasă.

Exemple

Exemplul 1: Metoda de plată

Cele trei butoane au același name, deci se poate alege una singură; <fieldset> și <legend> dau grupului o întrebare.

<fieldset>
  <legend>Cum plătești?</legend>
  <input type="radio" id="card" name="plata" value="card" checked>
  <label for="card">Card bancar</label>
  <input type="radio" id="ramburs" name="plata" value="ramburs">
  <label for="ramburs">Ramburs la curier (+5 lei)</label>
  <input type="radio" id="transfer" name="plata" value="transfer">
  <label for="transfer">Transfer bancar</label>
</fieldset>

Ce afișează browserul

Cum plătești?
◉ Card bancar  ○ Ramburs la curier (+5 lei)  ○ Transfer bancar
Când alegi Ramburs, Card bancar se deselectează; serverul primește plata=ramburs.

Exemplul 2: Alegere obligatorie, fără variantă implicită

required pe un singur buton se aplică întregului grup.

<p>Ai mai cumpărat de la noi?</p>
<label><input type="radio" name="client" value="da" required> Da</label>
<label><input type="radio" name="client" value="nu"> Nu</label>

Ce afișează browserul

○ Da  ○ Nu
La trimitere fără nicio alegere, browserul afișează un mesaj lângă primul buton, care cere selectarea unei opțiuni.

Greșeli frecvente

• Nume diferite pentru butoanele aceluiași grup: fiecare devine un grup separat și utilizatorul poate alege toate variantele.
• Lipsa lui value: serverul primește doar on și nu poate ști ce variantă s-a ales.
• Un singur buton radio pentru o opțiune da/nu: odată ales, nu mai poate fi deselectat. Folosește type="checkbox".

Comenzi înrudite

• <input type=checkbox>: Căsuța de bifat pentru opțiuni de tip da/nu sau pentru alegerea mai multor variante dintr-o listă.
• <fieldset> și <legend>: Grupează vizual și semantic câmpurile înrudite dintr-un formular, cu o bordură și un titlu (legend).
• <label>: Etichetă accesibilă pentru un control de formular: dând clic pe etichetă, activezi sau bifezi câmpul asociat.
• <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.