XHTML » input » type="radio"

The type="radio" control is used to create a small round circular button with a white center that can be selected or unselected by the user with a click of the mouse. When the radio button is selected, a black dot appears in the center of the circle.

The concept is to present the user with a selection of choices, but only to allow one choice to be made, for example, picking the color of a tee-shirt being ordered on a web site from a selection of twelve different colors.

Each related group of radio buttons must have the same name. Further, each radio button in a related group must have a different value. When a specific radio button is selected, only the value for the selected button is passed as part of the contents of the form upon submission. The values for the unselected radio buttons are not passed.

You cannot change the size or color of a radio button. You can use the checked attribute to preselect one of the radio buttons.


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<title>DevGuru XHTML input Tag Example</title>
<input type="radio" name="radio1" value="one" checked="checked" />
<input type="radio" name="radio1" value="two" />
<input type="radio" name="radio1" value="three" />
<input type="radio" name="radio1" value="four" />
Language(s): HTML