This browser does not support basic Web standards, preventing the display of our site's intended design. May we suggest that you upgrade your browser?

Adobe Dreamweaver CS3

Forms: Working with Radio Buttons

Radio buttons allow users to select only one option from a group, unlike check boxes, which allow users to select multiple options.

There are two parts to creating a radio button form field: inserting the form field, and assigning it a name and value.

NOTE: For more information about working with optional form fields, please refer to Inserting the First Form Field, The Form Field Properties Pane , and Terminology.

return to topInserting Radio Buttons: Group

Inserting radio buttons as a group is faster and more convenient than creating each button individually. The Radio Group dialog box allows you to automatically lay out the radio buttons in a table.

  1. Place your insertion point within the form boundary where you would like to insert the radio button
    NOTE: For information on inserting a form boundary, refer to Creating Forms.

  1. From the Insert menu, select Form » Radio Group
    OR
    From the Insert toolbar, in the Forms tab, click RADIO BUTTONRadio button
    The Radio Group dialog box appears.
    Input Tag Accessibility Attributes dialog box

  2. To adjust the number of radio buttons in your group, use the + and - buttons

  3. In the Name text box, type an appropriate name for the radio group

  4. Under Label, type an appropriate and descriptive label
    NOTE: The Label is the text that identifies a choice to users.

  5. Under Value, type an appropriate value for each button
    NOTE: The value of a radio button is the user's answer (i.e., If the button label is "Wisconsin," a good value might be "WI.")

  6. OPTIONAL: If you would like your radio group laid out in its own table, under Lay out using select Table
    NOTES:
    The option is selected if a dot appears in the circle.
    The default is Line breaks which simply lays the radio buttons on contiguous lines.

  7. Click OK
    The radio group appears in your form.

return to topInserting Radio Buttons: Individually

Radio buttons can be inserted individually into a form in Dreamweaver. This method is not as easy or efficient as inserting them as a group, though.

NOTE: It is important to remember that if you do need to insert radio buttons individually, they must be named the same in order to be considered part of the same group.

  1. Place your insertion point within the form boundary where you would like to insert the radio button
    NOTE: For information on inserting a form boundary, refer to Creating Forms.

  1. From the Insert menu, select Form » Radio Button
    OR
    From the Insert toolbar, in the Forms tab, click RADIO BUTTONRadio button
    The Input Tag Accessibility Attributes dialog box appears.
    For a description of the options available in this dialog box, refer to Forms: Input Tag Accessibility Options.
    Input Tag Accessibility Attributes dialog box

  2. In the Label text box, type an appropriate and descriptive label
    NOTE: The Label is the text that identifies a choice to users.

  3. Make any appropriate selection(s) under Style, Position, Access key, and Tab Index

  4. Click OK
    The radio button will appear where the insertion point was located.

  5. Type any desired text before or after the radio button

Assigning the Name and Checked Value

NOTE: The following instructions are for individually inserted radio buttons. When radio buttons are added with the group strategy, the name and value assigning process occurs in the Radio Group dialog box.

In a group of radio buttons, the name must be the same for the whole group. This limits the user to selecting only one radio button in each radio button group. If the buttons are all created before the group name is specified, the user must specify the same group name for each button in the group.

The name for the form field should indicate what type of information you are prompting the user for or identify what question you are asking the user (e.g., a group of radio buttons that are all answers to the same question about UW-Eau Claire may have the name "UWEC").

The checked value of a radio button is not visible to the user (as with text boxes). The checked value should identify what option the radio button represented for the user  (e.g., the location radio button below is an option to answer "location" in response to the question and has the checked value "location").

When a user submits the form, the checked value of the radio button will be matched with the name of the radio button. The information the form developer receives may look like this:

name: checked value
EXAMPLE: UWEC: location

Therefore, the name UWEC identifies what question was being asked and the checked value indicates what the user answered for the particular question.

Radio Button name-checked value pairs

To assign the name and checked value:

  1. After inserting the radio button, click it
    The Radio Button Properties pane appears.
    Radio button properties pane

  2. In the Radio Button text box, type a name for the radio button

  3. In the Checked value text box, type a value for the radio button

  4. For Initial state, select Checked or Unchecked
    An initial state of Unchecked means that, by default, no radio button will be selected when a user views your page.
    HINT: An Initial state of Unchecked is suggested for all radio button form fields.

Excellence. Our Measure. Our Motto. Our Goal.