Les boutons radio sont utilisés pour permettre à l'utilisateur de choisir une des options listées. Pour être capable de créer ce type de formulaire nous aurons tout d'abord besoin de donner un nom aux champs.
html<p>Choisir nationalité </p>
<p>
Anglais: <input type="radio" name="citizenship" /><br />
Roumain: <input type="radio" name="citizenship" /><br />
Espagnol: <input type="radio" name="citizenship" />
</p>Choisir nationalité
Anglais:
Roumain:
Espagnol:
Spécifier un nom à la catégorie à laquelle le formulaire fait partie, permettra au navigateur de savoir comment faire la différence entre plus d'un groupe de boutons radio, et donc de permettre de choisir une variation de réponse pour chaque groupe et formulaire.
Exemple avancé:
html<p>Choisir nationalité</p>
<p>
Anglais: <input type="radio" name="citizenship" /><br />
Roumain: <input type="radio" name="citizenship" /><br />
Espagnol: <input type="radio" name="citizenship" />
</p>
<p>Choisir sexe</p>
<p>
Homme: <input type="radio" name="sex" /><br />
Femme: <input type="radio" name="sex" />
</p>Choisir nationalité
Anglais:
Roumain:
Espagnol:
Choisir sexe
Homme:
Femme:
Comme pour les cases à cocher, les boutons radio peuvent être sélectionnés pour faciliter le travail de l'utilisateur.
html<p>Choisir nationalité</p>
<p>
Anglais: <input type="radio" name="citizenship" checked="yes" /><br />
Roumain: <input type="radio" name="citizenship" /><br />
Espagnol: <input type="radio" name="citizenship" />
</p>Choisir nationalité
Anglais:
Roumain:
Espagnol:
N'importe quelle option peut être choisie, pas nécessairement la première. Aussi, c'est bien d'utiliser cette méthode (de sélectionner certain boutons), avec modération et seulement lorsque l'information requise n'est pas d'importance majeure. Il est possible que l'utilisateur, en dehors de sa zone de confort ou par inattention, choisisse l'option déjà sélectionné sans que cela soit la bonne pour lui dans ce cas.