Adding a Radio Button Group to an…

Radio buttons are slightly different from other HTML form elements in that they present multiple options and only allow one choice. This being the case, the HTML Editor contains a special tool for keeping your radio button options organized. Here’s how to use it:

1. Go to Insert > Form Items > Radio Button Group. This opens the Insert Radio Button Group window.
2. Enter a name for the group. This will appear in your form results. It also identifies which radio button items are a part of this group. Names should be lowercase and should not include any special characters, such as spaces, colons, semicolons, etc.
3. Enter your radio button items. To do this, click underneath Item and enter the text you want to appear next to the radio button. Next, under Value, enter the text you want to appear in the results if the corresponding item is selected. It’s usually best to make the value similar to its item. For example, if your item was “Vermont,” you could make the corresponding item “vt.”
4. Click Add to add more item-value pairs to your list.
5. Click OK. The code will be inserted on your page.

If you decide you would like to add more radio button items to this group, position the cursor where you would like the item to appear and go to Insert > Form Items > Radio Button. This adds the following code to your page:

<input type="radio" name="" value="">

Add the name of your radio group in the name attribute, and the desired value in the value attribute. Next to the closing bracket, enter the text you would like to appear next to the radio button.

Let’s do a quick example just to make sure you’ve got it. Create a new radio button group, and name it “new-england-states.” Next, add the following item-value pairs:

Item – Value
Maine – me
Vermont – vt
New Hampshire – nh
Connecticut – ct
Massachusetts – ma

Next, click OK. Switch over to the Preview tab to see your radio buttons in action. They should look like this:

Maine
Vermont
New Hampshire
Connecticut
Massachusetts

Looks pretty good, except for one thing: We left out Rhode Island. Let’s add it back in. Go back to the Code Editor, position the cursor after the <br> tag after “Massachusetts” and then go to Insert > Form Items > Radio Button. Next, change the radio button code so it looks like this:

<input type="radio" name="new-england-states" value="ri">Rhode Island<br>

See how we added this button to our group? Now switch over to the Preview tab again and see how your radio button group is looking:

Maine
Vermont
New Hampshire
Connecticut
Massachusetts
Rhode Island

Keep in mind that your radio button group (and any other form elements) will not work unless you have added <form></form> tags and a form processing script. For more information about this process, read this Knowledgebase article: Adding a Form in the HTML Editor.