Radio Button Fields

Radio buttons are similar to checkboxes except that that they come in groups. Only one radio button in a group of buttons can be selected at any one time. Selecting a new button will automatically deselect any other button in the group that was previously selected

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="">
<h1>Radio Button Fields</h1>
<form action="#">
<input type="radio" id="r1" name="size" value="s" />
<label for="r1">Small</label>
<input type="radio" id="r2" name="size" value="m" />
<label for="r2">Medium</label>
<input type="radio" id="r3" name="size" value="l" />
<label for="r3">Large</label>


Here's what the Radio Button Form page looks like in your web browser.

The only real difference between the radio button and checkbox coding (apart from the type attribute) is that each of the radio buttons in a group need to have the same name (which must therefore be different from the id of that button since each id must be unique). All of the radio buttons having the same name are considered to be a part of the same group.

We can select which radio button is selected by default when the page is first displayed by adding the checked="checked" attribute (which must always be assigned the same value in order to meet the XHTML validation requirements).

Only one radio button field is submitted for a radio button group. The value assigned to that field is the value of the selected button within the group.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow