Butoane radio HTML care convertesc: Ghidul definitiv

Butoanele radio par simple. Un clic, o alegere. Cu toate acestea, ele sunt, de asemenea, una dintre cele mai ușoare modalități de a compromite UX și accesibilitatea. Ascundeți intrarea nativă, omitețiset de câmpurișilegenda, sau validați prea agresiv și veți trimite un formular care derutează utilizatorii de tastatură, frustrează cititorii de ecran și distruge conversiile.

Acest ghid vă arată cum să faceți radiouri chiar în 2025: rapid de ales, ușor de scanat, complet accesibil și măsurabil. Vom începe cu o linie de bază curată, semantică, apoi vom pune un strat pe CSS modern, astfel încât radiourile să poată arăta ca carduri sau comenzi segmentate fără a rupe tastatura sau comportamentul cititorului de ecran.

Veți vedea modele practice de validare care nu sâcâie, machete receptive care mențin obiectivele mari pe mobil și fragmente de producție pe care le puteți insera în orice stivă. Vom acoperi, de asemenea, analize, idei A/B și o configurație Formspree, astfel încât să puteți captura rezultate imediat.

Pentru cine este: designeri, dezvoltatori front-end și marketeri cărora le pasă de ambeleaccesibilitateșiconversie. Nu sunt necesare cadre grele, doar HTML solid, CSS concentrat și o mică îmbunătățire progresivă.

Până la sfârșit, vei ști:

• Când radiourile bat selectările, casetele de selectare sau comutarile
• Cum să construiți un grup radio accesibil (fieldset,legendă, etichetare, focalizare)
• Cum să stilați radiourile personalizate „carte” fără a ascunde intrarea
• Cum se validează cu API-ul HTML Constraint (și mesajul bine)
• Cum să conectați radiourile la Formspree și să măsurați selecțiile

TL;DR

• Utilizațiradiouripentru exactunulalegere într-un set bine definit (ideal2–6 opțiuni) care ar trebui să fievizibil deodată.
• Închideți întotdeauna radiourile în+, dă-lela felnume, și faceți fiecare opțiune unpe care se poate face clic.
• Nu ascunde intrările cuafișare:niciuna; păstrează-lefocalizat(de exemplu,opacitate:0; poziție:absolut; inserare:0) deciTab/Săgeți/Spațiulucru.
• Faceți ținte mari: cel puțin44×44px, cu uninel de focalizareasta se vede clar.
• Validați cuHTML Constraint API(obligatoriu,reportValidity()), apoi îmbunătățiți mesajele, nu invers.
• Dacă aveți multe opțiuni sau nu sunt familiare, adăugațitext de ajutorsub fiecare etichetă și luați în considerarecăutare sau grupareîn schimb.
• Pe mobil, stivuiți îno coloană; pe ecrane late,2–3 coloaneprin grila CSS.
• Masura: pistaimpresii, selecție și trimitereși testul A/Bordinul opțiuniișicopie.
• Pentru Formspree, păstrațiPOST nativca o rezervă; adaugăaducedoar ca îmbunătățire progresivă.

Când să folosiți radiourile (Arborele de decizie)

Î1. Utilizatorul alege exact o opțiune?

• Nu →Utilizațicasete de selectare(0–mulți) sau uncomuta(binar) sau regândiți sarcina.
• Da →Treceți la Q2.

Q2. Opțiunile trebuie să fie vizibile dintr-o privire?

• Da →Utilizațiradiouri(cel mai bun pentru scanare și alegere rapidă).
• Nu (spațiul este îngust / multe opțiuni)→ Luați în considerare unselectați(scapă jos). Dacă alegerile sunt critice și beneficiază de comparație, preferați radiourile și reproiectați aspectul.

Q3. Câte opțiuni?

• 2–6→ Radiourile sunt ideale.
• 7–10→ Radiourile pot funcționa în continuare cu grupare sau uncu două coloanegrila; în caz contrar, utilizați o listă de selectare sau de căutare.
• >10→ Folosiți unselectează cu căutaresau unpascare restrânge setul mai întâi.

Î4. Opțiunile sunt state care se exclud reciproc?

• Da →Radiouri.
• Nu / combinațiile au sens →Casete de selectare.

Î5. Alegerea va declanșa diferite întrebări ulterioare?

• Da →Radiourile sunt încă în regulă. Afișează urmăririlecondiționat, dar păstrați câmpuri ascunsedin ordinea tabulatoruluiși fluxul SR până la dezvăluire.
• Nu →Grup radio simplu.

Î6. Familiar vs. descriptiv?

• Etichete cunoscute(de exemplu, „Mic / Mediu / Mare”) → etichetele scurte sunt suficiente.
• Necunoscut sau cu mize mari(de exemplu, „SEO tehnic vs. SEO pentru conținut”) → adăugațimicrocopie(descriere pe un rând) sub fiecare etichetă.

Î7. Mai întâi pe mobil?

• Da (întotdeauna)→ Utilizațistivă pe o singură coloanăcu spațiere generoasă și text de 16–18 px. Promovațicele mai aleseopțiune spre vârf.

Exemple practice

• Formularul dvs.: „Care serviciu?” → Radiourile bat o selectie, deoarece utilizatorii ar trebui să compare opțiunile una lângă alta. Păstrați 3 carduri (Link Building, SEO, Web Dev) cu subtext scurt.
• Viteza de expediere: 3–4 viteze care se exclud reciproc → Radiouri (cu delte de preț în subtext).
• Frecvența buletinului informativ: Zilnic/Săptămânal/Lunar → Radiouri.
• Interese (pot alege mai multe)→ Nu radiouri; utilizați casetele de selectare.

Anatomia unui grup de radio adecvat

Copiați-lipiți linia de bază semantică (fără CSS de lux încă)

De ce serviciu aveți nevoie?

Alegeți o opțiune care se potrivește cel mai bine cu obiectivul dvs.





Clădire link




Optimizare pentru motoarele de căutare




Design web/dezvoltare




Vă rugăm să alegeți un serviciu pentru a continua.



Continuați

De ce contează fiecare parte

• +dă grupului un nume pentru cititoarele de ecran și setează context pentru toată lumea.
• Acelașinumeface ca intrările să se excludă reciproc.
• Se poate face clicîn jurul fiecărei intrărivă oferă o zonă mare de atingere/clic (44px+).
• necesarla primul radiopermite browserului să valideze grupul în mod nativ.
• Text de ajutor(service-hint) șitext de eroare(service-error) sunt separate, astfel încât să puteți afișa/ascunde erorile fără a muta lucrurile.
• Nu sunt necesare roluri ARIA.Radiourile native expun deja semantica corectă.

CSS minim pentru utilizare (aspect nativ, ținte mari, focalizare clară)

/* Aspect și spațiere */
.etichetă câmp {
display: flex;
alinierea elementelor: centru;
decalaj: .6rem;
captuseala: .65rem .8rem;      /* atingere mare țintă */
chenar-raza: .6rem;
cursor: pointer;
}

/* Focalizare de la tastatură: evidențiați întreaga etichetă când intrarea este focalizată */
.etichetă câmp:are(input:focus-visible) {
contur: 3px solid #3b82f6;
contur-offset: 2px;
}

/* Starea selectată (opțional, punctul nativ apare în continuare) */
.etichetă câmp:are(input:verificat) {
fundal: #f1f5ff;
}

/* Text de eroare */
.error { culoare: #b91c1c; margin-top: .5rem; dimensiunea fontului: .9rem; }

Sfat::are()vă oferă acel „inel de focalizare pe întreaga carte” fără a ascunde intrarea reală. Dacă un browser mai vechi nu îl acceptă, utilizatorii primesc în continuare inelul de focalizare nativ pe radioul însuși.

Validare blândă, accesibilă (folosește mai întâi browserul)

Lăsați browserul să gestioneze partea „trebuie să alegeți una”, apoi afișați eroarea dvs. în linie, dacă este necesar.

const form = document.getElementById('quote-form');
const group = document.getElementById('service-group');
const error = document.getEementById('service-error');

form.addEventListener('submit', (e) => {
// Declanșează interfața de utilizare nativă de validare (funcționează deoarece primul radio are `required`)
if (!form.reportValidity()) {
// Opțional: afișează și o eroare inline prietenoasă
error.hidden = false;
group.setAttribute);' ||'''true-invalid);' ||' e.preventDefault();
.{||.
Comportament la care ar trebui să vă așteptați (și să testați):
Tastatură:
Tabă o dată pentru a intra în grup; folosi
Tastele săgeată
a se muta;

Spațiu

• selectează.Cititoare de ecran:Legenda este citită ca etichetă de grup; fiecare opțiune este anunțată cu starea „selectat/neselectat”.Atinge:Atingerea etichetei comută radioul (mulțumită împachetării etichetei).Radiouri „Carte” cu stil personalizat (fără a întrerupe accesibilitatea)
• Copiați-lipiți HTML The legend is read as the group label; each option is announced with “selected/not selected” state.
• Touch: Tapping the label toggles the radio (thanks to label wrapping).

Custom-Styled “Card” Radios (without breaking accessibility)

Copy-paste HTML

Alegeți un plan

Alegeți o opțiune. Puteți schimba oricând.





Starter
Bună pentru site-uri mici




Creștere
Cel mai popular




Pro
Funcții avansate

CSS minim, robust

:rădăcină{
--brand:#0b5cff; --ring: rgba(11,92,255,.35);
--border:#e5e7eb; --bg:#fff; --muted:#6b7280;
--raza:14px;
}

/* Grilă */
.card-grup{
display:grilă; decalaj: 16px;
grid-template-coloane: repetare(3, minmax(0,1fr));
}
@media (max-width:900px){ .card-group{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .card-group{ grid-template-columns:1fr; } }

/* Eticheta cardului */
.card{
poziție:relativă;
display:grilă; loc-articole:centru; text-align:center;
decalaj: 6px; umplutură: 18px;
chenar:1px solid var(--border); bordura-raza:var(--raza);
background:var(--bg);
cursor:pointer; user-select:none;
tranziție: casetă-umbră .15s, chenar-culoare .15s, transform .02s;
}
.card:hover{ box-shadow:0 8px 20px rgba(0,0,0,.06); }

/* Păstrați intrarea nativă focalizată: no display:none */
.intrare card{
poziție: absolut; inserare:0; opacitate:0;
}

/* Inel de focalizare de la tastatură pe întregul card */
.card:are(input:focus-visible){
box-shadow:0 0 0 3px var(--ring);
culoare-chenar: var(--brand);
}

/* Starea selectată */
.card:are(input:verificat){
culoare-chenar: var(--brand);
box-shadow:0 0 0 3px var(--ring);
}

/* Conținut */
.card-title{ font-weight:700; culoare:#111; }
.card-sub{ font-size:14px; culoare:var(--muted); }

/* Text de eroare */
.error{ color:#b91c1c; margin-top:.5rem; dimensiunea fontului:.9rem; }

Note de comportament (de ce funcționează acest model)

• Nuafișare:niciunape intrare → utilizatorii de la tastatură pot introduce Tab;Tastele săgeatămută selecția;Spațiuselectează.
• Întregul card se poate face clic deoarece intrarea este în interioruletichetă.
• :are()lasă-ne să stilămfocusșiverificatstate pe cardul părinte fără hack-uri ARIA.
• Grila receptivă dă1–3 coloaneautomat; țintele tactile rămân mari.

Opțional: validare blândă (nativ mai întâi)

const form = document.getElementById('plan');
const err = document.getElementById('plan-error');

form.addEventListener('submit', (e) => {
if (!form.reportValidity()) { // folosește `required` pe primul radio
err.hidden = false;
e.preventDefault();
} else {
err.hidden = true;
}
});

Strategii de validare care nu enervează

O validare excelentă este invizibilă până când este nevoie. Iată o abordare specifică radio, care este rapidă, accesibilă și liniștitoare pentru utilizatori.

Principii

• Nativ mai întâi.Lăsați HTML să gestioneze „trebuie selectat unul”.
• Amânați erorile.Nu striga la utilizatori înainte de a încerca să continue.
• Indicați problema.Anunțați erori, mișcați focalizarea inteligent și păstrați copierea scurtă.
• Clar la schimbare.De îndată ce se face o alegere validă, eliminați eroarea.

Linia de referință (numai nativă)

Numai HTML poate aplica regula cunecesarla un radio din grup.

De ce serviciu aveți nevoie?

Alegeți o opțiune.




Clădire link



Optimizare pentru motoarele de căutare



Design web/dezvoltare

Acest lucru vă oferă deja: săgeți de la tastatură, spațiu pentru selectare și validare la nivel de browser.

Erori inline prietenoase (îmbunătățire progresivă)

Opriți fereastra pop-up a browserului și gestionați mesajele în linie, astfel încât să se potrivească cu designul dvs.

HTML (adăugați o regiune de eroare)

Continuați

CSS (stil simplu)

.error { color:#b91c1c; margin-top:.5rem; dimensiunea fontului:.9rem; }

JS (amână erorile, anunță corect)

const form = document.getElementById('quote');
const group = document.getElementById('svc');
const err = document.getElementById('svc-err');
const radios = form.querySelectorAll('input[name="service"]');

let attempted = fals; // afișează erori numai după ce utilizatorul încearcă să continue

funcția areSelection() {
returnează [...radio].unele(r => r.verificat);
}

function showError(msg='Vă rugăm să alegeți o opțiune.') {
err.textContent = msg;
err.hidden = fals;
group.setAttribute('aria-invalid', 'true');
// Adăugați eroare la descrisby, astfel încât SR-urile să o anunțe în continuare
group.setAttribute('aria-describedby', 'svc-hint svc-err');
}

funcția clearError() {
err.hidden = adevărat;
group.removeAttribute('aria-invalid');
group.setAttribute('aria-describedby', 'svc-hint');
}

form.addEventListener('submit', (e) => {
încercat = adevărat;
if (!hasSelection()) {
e.preventDefault();
showError();
// Aduceți grupul în vedere și puneți accentul pe primul radio
radios[0].focus(();
group.scrollInto View:} ||r', behavior: block. } else {
. clearError();
// Nu sâcâi devreme; clar odată ce aleg ceva
radios.forEach(r => {
r.addEventListener('schimbare', () => {

dacă (încercarea) clearError();
});
});
De ce funcționează acest lucru
Fără bule de indicații pentru browser; utilizatorii văd erori
în linie

lângă grup.

• Cititoarele de ecran audlegenda, apoi
• eroare, datorită luiaria-descris de.Erorile apar doardupăo încercare de trimitere (sau la întoarcerea la remediere).
• Validare blândă pe pas (formulare cu mai mulți pași)Dacă porți cu un buton „Următorul”, validați doar acel pas.document.getElementById('nextBtn').addEventListener('click', () => {

if (!hasSelection()) {

showError();

} else {
clearError();
// avansa la pasul urmator...
}
});
Mesaje personalizate cu API-ul Constraint (opțional)
Dacă preferați să păstrați modelul de valabilitate al browserului, setați un mesaj personalizat pe
primul

radio în grup.

const firstRadio = radios[0];form.addEventListener('submit', (e) => {if (!hasSelection()) {

firstRadio.setCustomValidity('Vă rugăm să alegeți o opțiune.');
// Declanșează interfața de utilizare nativă; sau apelați form.reportValidity()
e.preventDefault(); els(); els(); firstRadio.setCustomValidity('');
.
Folosiți-l atunci când doriți „bula” nativă plus propriul text, altfel rămâneți la metoda inline de mai sus pentru o interfață de utilizare coerentă.
Rezumat erori (pentru formularele lungi)
Dacă formularul este lung, adăugați un
rezumat de sus
care se leagă de zona cu probleme.

Există o problemă: Alegeți un serviciu.

}
Soluții de rezervă pe partea de server și rețea
Validarea la nivelul clientului îmbunătățește UX, dar

întotdeauna
validați și pe server (sau prin serviciul dvs. de trimitere). Dacă trimiterea eșuează, returnați pagina cu:
  sum.hidden = false;
  sum.querySelector('a').focus(); // SRs announce the alert
}

id="citat"
action="https://formspree.io/f/your_form_id"
method="POST"
>

De ce serviciu aveți nevoie?

Alegeți o opțiune.




Cl��dire link
Câștigați backlinkuri de înaltă calitate.




Optimizare pentru motoarele de căutare
Îmbunătățiți clasamentele și traficul.




Design/Dezvoltare web
Site-uri rapide, pe mobil mai întâi.




Nume complet




E-mail









Obțineți propunerea mea gratuită

// în submit handler înainte de a trimite:
const început = Number(fd.get('started_at'));
if (Date.now() - început < 2000) return; // arată ca un bot

const service = fd.get('serviciu'); // de exemplu, „seo”
fd.set('_subject', `New ${service} lead from Contact form`);

const i18n = {
ro: { alege: 'Vă rugăm să alegeți o opțiune.' },
es: { alege: 'Elige una opțiune, por favor.' },
ar: { alege: 'يُرجى اختيار خيار واحد.' }
};
const t = (k) => (i18n[document.documentElement.lang] || i18n.en)[k];
errorEl.textContent = t('alege');

.card { inline-size: 100%; umplutură: 16px; }
.card .card-title { font-weight: 700; înălțimea liniei: 1,25; }
.card .card-sub { font-size: 14px; înălțimea liniei: 1,4; }

/* Spațiere care se întoarce automat în RTL */
.card { padding-inline: 16px; padding-block: 16px; }

/* Inel de focalizare care respectă direcția */
.card:are(input:focus-visible) {
contur: 3px solid var(--ring);
contur-offset: 2px;
}

/* Opțional: ajustări specifice direcției */
:dir(rtl) .card-group { directie: rtl; }

@container (lățime minimă: 680 px) {
.card-group { grid-template-columns: 1fr 1fr 1fr; }
}

// Trage când grupul radio devine vizibil
gtag?.('event','form_step_view', { pas: 1, formular: 'contact' });

// Foc la selecție
document.querySelectorAll('input[name="service"]').forEach(r => {
r.addEventListener('change', () => {
gtag?.('event','radio_select', { group: 'service', value: r.value });
});
});

// Declanșează la trimiterea cu succes
gtag?.('event','generate_lead', { form: 'contact', service: form.service.value });