Cum se validează butoanele radio pe o pagină web

Configurarea și validarea butoanelor radio pare a fi câmpul de formă care oferă celor mai mulți webmasteri cea mai mare dificultate în configurare. În realitate, configurarea acestor câmpuri este cea mai simplă dintre toate câmpurile de formular pentru a valida, deoarece butoanele radio setează o valoare care trebuie testată doar atunci când formularul este trimis.

Dificultatea cu butoanele radio este că există cel puțin două câmpuri și, de obicei, mai multe care trebuie să fie plasate pe formular, legate între ele și testate ca un singur grup. Cu condiția să utilizați convențiile și aspectul corect pentru denumire pentru butoanele dvs., nu veți avea probleme.

Configurați grupul de butoane radio

Primul lucru la care trebuie să ne uităm când folosim butoanele radio din formularul nostru este modul în care butoanele trebuie codificate pentru a putea funcționa corect ca butoane radio. Comportamentul dorit pe care îl dorim este să avem selectat un singur buton simultan; când este selectat un buton, atunci orice buton selectat anterior va fi deselectat automat.

Soluția aici este de a da tuturor butoanelor radio din grup același nume, dar valori diferite. Iată codul folosit pentru butonul radio în sine.

Crearea mai multor grupuri de butoane radio pentru o singură formă este, de asemenea, simplă. Tot ce trebuie să faceți este să oferiți celui de-al doilea grup de butoane radio cu un nume diferit de cel folosit pentru primul grup.

Câmpul nume determină grupul din care face parte un anumit buton. Valoarea care va fi transmisă pentru un anumit grup atunci când este trimis formularul va fi valoarea butonului din grupul care este selectat la momentul transmiterii formularului.

Descrieți fiecare buton

Pentru ca persoana care completează formularul să înțeleagă ce face fiecare buton radio din grupul nostru, trebuie să oferim descrieri pentru fiecare buton. Cel mai simplu mod de a face acest lucru este de a oferi o descriere ca text imediat după buton.

Există doar câteva probleme cu utilizarea unui text simplu, cu toate acestea:

1. Textul poate fi asociat vizual cu butonul radio, dar este posibil să nu fie clar pentru unii care folosesc cititori de ecran, de exemplu. 
2. În majoritatea interfețelor utilizatorilor folosind butoanele radio, textul asociat cu butonul este clic și poate selecta butonul radio asociat. În cazul nostru aici, textul nu va funcționa în acest mod decât dacă textul este asociat în mod specific cu butonul.

Asocierea textului cu un buton radio

Pentru a asocia textul cu butonul radio corespunzător, astfel încât făcând clic pe text să selecteze acel buton, trebuie să adăugăm suplimentar codul pentru fiecare buton, înconjurând întregul buton și textul său asociat într-o etichetă..

Iată cum ar arăta HTML-ul complet pentru unul dintre butoane:

 butonul unu

Ca buton radio cu numele de ID menționat în pentru parametrul etichetei este de fapt conținut în etichetă în sine, pentru și id parametrii sunt redundanți în unele browsere. Cu toate acestea, browserele lor nu sunt suficient de inteligente pentru a recunoaște cuibărirea, așa că merită să le introduceți pentru a maximiza numărul de browsere în care va funcționa codul.

Aceasta completează codificarea butoanelor de radio în sine. Ultimul pas este să configurați validarea butoanelor radio cu JavaScript.