HTML Radio Buttons

Radio buttons are generally used on registration forms. When one button is selected the others are deselected, so they are all independent of each other.

Choose your favourite carAudi:

BMW:

The code for the above form is:

<form>
    Audi:<input name="cars" type="radio"/>
    BMW:<input name="cars" type="radio"/>
</form>

The name attribute must be the same, as this defines the radio buttons as a group.

Checked Attributed

The checked attributed will select the radio button by default.

Example

Choose your favourite gameBF3:

MW3:

The code for the above example is:

BF3:<input checked="checked" name="games" type="radio" />
MW3:<input name="games" type="radio" />

Value Attribute

Radio buttons need a value attribute. If you were to submit the top form, there is no value to submit and the radio buttons would be just circles with no result. The value attribute specifies the radio button value.

Coke:<input name="drinks" type="radio" value="coke" />
Sprite: <input name="drinks" type="radio" value="sprite" />
Irn-Bru: <input name="drinks" type="radio" value="irn-bru" />

Output

Choose a soft drink
Coke:
Sprite:
Irn-Bru:

Try it!

Choose your favourite car

Audi:
BMW:
None:

Choose your favourite game

BF3:
MW3:
None:

Choose your favourite soft drink

Coke:
Sprite:
Irn-Bru:
None:

Your results will be shown on a different page which is handled by a server-side script.