Butoanele radio sunt folosite pentru a permite userului sa selecteze una dintre optiunile listate. Pentru a realiza acest tip de formular va trebuii in primul rand sa dam un mume si o valoare fiecarui camp.
html<p> Alege nationaliatea</p>
<p>
Romana: <input type="radio" name="nationalitate" value="romana" /><br />
Engleza: <input type="radio" name="nationalitate" value="engleza"/><br />
Rusa: <input type="radio" name="nationalitate" value="rusa" />
</p>Alege nationaliatea
Romana:
Engleza:
Rusa:
Specificand un nume pentru grupul din care face parte formularul vom putea face diferenta intre mai multe grupuri de tip radio permitand astfel alegeraea unei singure variante de raspuns pentru fiecare grup in parte.
Exemplu avansat:
html<p> Alege nationaliatea</p>
<p>
Romana: <input type="radio" name="nationalitate" value="romana" /><br />
Engleza: <input type="radio" name="nationalitate" value="engleza" /><br />
Rusa: <input type="radio" name="nationalitate" value="rusa" />
</p>
<p>Alege sexul</p>
<p>
Barbat: <input type="radio" name="sex" value="barbat" /><br />
Femeie: <input type="radio" name="sex" value="femeie" />
</p>Alege nationaliatea
Romana:
Engleza:
Rusa:
Alege sexul
Barbat:
Femeie:
La fel ca si la checkbox-uri, butoanele radio pot fi selectate cand se incarca pagina pentru a facilita "munca" userului.
html<p> Alege nationaliatea</p>
<p>
Romana: <input type="radio" name="nationalitate" value="romana" checked="yes" /><br />
Engleza: <input type="radio" name="nationalitate" value="engleza" /><br />
Rusa: <input type="radio" name="nationalitate" value="rusa" />
</p>Alege nationaliatea
Romana:
Engleza:
Rusa:
Poate fi selectat oricare dintre optiuni, nu neaparat prima. Deasemenea este bne sa folosim aceasta metoda de a selecta anumite butoane, cu moderate si doar atunci cand informatia ceruta nu este de o importanta majora. Este posibil ca din neatentie sau comoditate userul sa lase optiunea deja selectata fara ca aceasta sa fie cea corecta in cazul lui.