HTML - Radio Buttons

  »   HTML forms  »   HTML Tutorial - Radio Buttons

The radio buttons are used to allow the user to choose one of the listed options. To be able to make this type of form we will first need to give a name to the fields.

html<p>Choose citizenship </p>
<p>
	
	English: <input type="radio" name="citizenship" /><br />
	Rumanian: <input type="radio" name="citizenship" /><br />
	Spanish: <input type="radio" name="citizenship" />
</p>

Demo

Choose citizenship

English:
Rumanian:
Spanish:

Specifying a name for the category of which the form is part, will let the browser know how to make the difference between more than one radio buttons group, therefore allowing to choose a single answer variant for each group and form.

Advanced example:

html<p>Choose citizenship</p>
<p>
	English: <input type="radio" name="citizenship" /><br />
	Romanian: <input type="radio" name="citizenship" /><br />
	Spanish: <input type="radio" name="citizenship" />
</p>

<p>Choose sex</p>
<p>
	Man: <input type="radio" name="sex" /><br />
	Woman: <input type="radio" name="sex" />
</p>

Demo

Choose citizenship

English:
Romanian:
Spanish:

Choose sex

Man:
Woman:

HTML - Radio buttons selected 'by default'

Same as with the checkboxes, the radio buttons can be selected to ease the user's work.

html<p>Choose citizenship</p>
<p>
	English: <input type="radio" name="citizenship" checked="yes" /><br />
	Romanian: <input type="radio" name="citizenship" /><br />
	Spanish: <input type="radio" name="citizenship" />
</p>

Demo

Choose citizenship

English:
Romanian:
Spanish:

Any of the options can be selected, not necessarily the first. Also, it is good to use this method (of selecting certain buttons), with moderation and only when the required information is not of major importance. It is possible that the user, out of comfortableness or inattention, to choose the already selected option without being the correct one for him in that case.