Forms — Radio Buttons

Topics on This Page

The <input> Tag for Radio Buttons
The type Attribute
The name and value Attributes
The checked Attribute
Example

The <input> Tag for Radio Buttons

HTML:  <input>
XHTML: <input />

   Note: The W3C and WDG validators will not accept the XHTML-format
         in HTML, although browsers will accept this format.

Always include these attributes:

  type="radio"
  name="name"
  value="value"

Optional attributes:

  checked                HTML format
  checked="checked"      XHTML format

The type Attribute

The <input> tag is used for other gadgets such as text boxes and checkboxes. type="radio" is what indicates that the <input> tag is defining a radio button.

The name and value Attributes

In each radio button, you must include both a name and a value. If the button is selected when the user submits the form, the name-value pair is sent as part of the form data. If the button is not selected, the name-value pair is not sent.

In a group of related radio buttons, all of the buttons must be given the same name. This is what tells the browser that the buttons are related, the the browser will only allow one button in a related group to be selected. When the user selects one of the buttons, all of the other buttons in the group become unselected. Be sure to give each button in the same group a different value so that a different name-value pair is sent for each button — if two have the same value, the same name-value pair is sent regardless of which is selected.

You will sometimes want to place several radio buttons on the same line, with identifying text beside it. Be careful to make it obvious which button goes with choice. For example, look at this code:

<form>
  Your age:
  <input type="radio" name="age" value="1"> 1-20
  <input type="radio" name="age" value="2"> 21-40
  <input type="radio" name="age" value="3"> 41-60
  <input type="radio" name="age" value="4"> 60-120
</form>

Your age: 1-20 21-40 41-60 60-120

If you want to choose 41-60, it can be hard to tell whether to select the button to the left of 41-60 or the one to the right of that. Make it more obvious for your user by including one or more &nbsp; characters for spacing:

<form>
  Your age:
  <input type="radio" name="age" value="1"> 1-20 &nbsp; &nbsp;
  <input type="radio" name="age" value="2"> 21-40 &nbsp; &nbsp;
  <input type="radio" name="age" value="3"> 41-60 &nbsp; &nbsp;
  <input type="radio" name="age" value="4"> 60-120
</form>

Your age: 1-20     21-40     41-60     60-120

The checked Attribute

The checked attribute causes the button to be already selected when the form is displayed: it makes a default choice for the user. In XHTML, this attribute must be coded as checked="checked". The XHTML format will work in HTML in most browsers, but it's possible that some browsers will ignore the XHTML format.

Don't specify checked for more than one button in a group. In IE, checked will only be honored for one of the buttons. In Netscape, it will be honored for all of them, and more than one button in the group will be selected initially.

Example

Here's an example of radio buttons. This example includes two sets of related buttons. Verify that you can choose one and only one from each group. Notice how the name attribute controls the grouping of the radio buttons.

This example illustrates a bug in Netscape 4. In Netscape 4, the text before the first <input> tag on each line is shown in a sans-serif font as requested, but the remainder of the text on the line is shown in the default serif font.