HTML - L'attributo radio

I pulsanti di opzione consentono all'utente di scegliere solo una delle opzioni elencate. Per poter realizzare questo tipo di form dovremo in primo luogo dare un nome ai campi.

html<p>Cittadinanza: </p>
<p>
	
	Inglese: <input type="radio" name="citizenship" /><br />
	Italiana: <input type="radio" name="citizenship" /><br />
	Spagnola: <input type="radio" name="citizenship" />
</p>

Demo

Specificando un nome (in questo caso 'citizenship' per la categoria di cui il modulo fa parte, il browser saprà fare la differenza tra più di un gruppo di pulsanti radio, permettendo così di scegliere una sola variante di risposta per ogni gruppo e modulo.

Esempio complesso:

html<p>Cittadinanza</p>
<p>
	Inglese: <input type="radio" name="citizenship" /><br />
	Italiana: <input type="radio" name="citizenship" /><br />
	Spagnola: <input type="radio" name="citizenship" />
</p>

<p>Choose sex</p>
<p>
	Uomo: <input type="radio" name="sex" /><br />
	Donna: <input type="radio" name="sex" />
</p>

Demo

HTML - Valore impostato di 'default'

Come per le caselle di controllo, i pulsanti di opzione possono essere selezionati di default per facilitare il lavoro dell'utente.

html<p>Cittadinanza</p>
<p>
	Inglese: <input type="radio" name="citizenship" checked="yes"/><br />
	Italiana: <input type="radio" name="citizenship" /><br />
	Spagnola: <input type="radio" name="citizenship" />
</p>

Demo

È possibile selezionare una qualsiasi delle opzioni, non necessariamente la prima. Inoltre, è bene usare questo metodo (di selezione di alcuni pulsanti), con moderazione e solo quando le informazioni richieste non sono di grande importanza. E' possibile che l'utente, per comodità o disattenzione, scelga l'opzione già selezionata senza che sia effettivamente l'informazione corretta.