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

Lesson 13. Creating Forms > Adding Radio Buttons

Adding Radio Buttons

Radio buttons are a group of options in which 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 in the table.

In the myform.htm document, type Have you ever taken an adventure trip before? in row 6 of the table.

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

Choose Insert > Form Objects > Radio Button.

A radio button is inserted into the form. The property inspector displays radio button properties.

In the document window, type Yes to the right of the radio button you just inserted.

When inserting text labels in the document for radio buttons or checkboxes, make sure the text is close enough to the corresponding button or box and not too close to another. This will help to avoid confusing your Web site visitors.

Select the radio button. In the Name text box of the property inspector, replace radiobutton with trip.

When using radio buttons, you must use the same name for each group of items. Radio buttons are meant to allow only one selection. Using the same name for several 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. Keep in mind that names are case-sensitive, so “Trip” is not the same as “trip.”

In the Checked Value text box, type yes.

When the form is submitted, this value will be sent to the script that processes the form on the server.

Repeat steps 2 through 5 for the “No” answer to the right of “Yes.” Type no in the Checked Value text box.

Make sure you use the same name (trip) in the Name text box for both radio buttons. It is also important to be sure you give each radio button a different Checked Value so that you know which option the user chose.

Save the file and preview it in the browser.

To test the radio buttons, click each one in the browser. When you click one to select it, the other one should deselect. If not, that means you gave the radio buttons different names. The names need to be typed exactly the same for them to function correctly.

Leave this 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