• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Lesson 11. Creating Forms > Adding Radio Buttons

Adding Radio Buttons

Radio buttons are a group of options. Selecting one option automatically deselects all other options. Typical uses for radio buttons are credit card selections and yes/no answers. In this exercise, you will insert a group of radio buttons into the table.

In the lights_quiz.html document, type Who invented the Fresnel lens? in row 8 of the table.

In the next step, you will place the radio buttons on the same line as this text.

Insert a line break and click the radio group icon on the Forms tab of the Insert bar.


You can also choose Insert > Form Objects > Radio Group.

The radio group dialog box appears.

In the radio group dialog box, type whoInvented in the Name text field.

When using radio buttons, you must use the same name for each group of items. Radio buttons are meant to allow only one selection.


If you insert radio buttons one by one (either by using the insert Radio Button icon on the Insert bar or by using the Insert > Form Objects > Radio Button menu option), you can make those buttons all part of the same group by giving them the same name. Using the same name for multiple radio buttons indicates that those buttons are part of the same group. If the names are not the same, the radio buttons will be treated as different groups and negate the purpose of using radio buttons. You can also insert a single radio button, but keep in mind that once your visitor clicks the button, the only way for that visitor to deselect the button will be to reset the form.

Also keep in mind that names are case-sensitive, so “whoInvented” is not the same as “whoinvented.”

Click the first instance of “Radio” in the Radio Buttons list area and replace that text with Thomas Jefferson. Click the second instance of “Radio” and replace it with Argand Fresnel.

By default, every Radio Group has at least two radio buttons. You can add more as needed. Clicking an instance in the Label or Value lists will highlight the text and allow you to change it.

Click the plus (+) button and replace the new instance of “Radio” with Augustin Fresnel. Add one more entry to the list: Benjamin Franklin. In the Value column, replace each instance of “radio” with the same text as contained in the corresponding Label.

You can add or delete entries by using the plus (+) and minus (–) buttons. You can also adjust the order of entries by selecting them and using the arrow buttons to move them up or down in the list.

When the form is submitted, these values will be sent to the script that processes the form on the server. It is also important to be sure you give each radio button a different value so you know which option the user chose.

Leave the line breaks option selected in the Lay Out Using area and click OK to close the Radio Group dialog box.

The line breaks option places the radio buttons in your document with each entry on a separate line. The table option inserts a table with each entry in a separate row.

To test the radio buttons, click each one in the browser. When you click one to select it, the other one should deselect. You must preview the file in the browser to see the effect; form objects will not appear selected or checked in the Dreamweaver document window.

Save lights_quiz.html and leave the file open for the next exercise.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint