Dreamweaver - Forms - Adding a radio button

Go to the forms tab on the Insert menu:

Click on the

icon to create a new form. In Design view, the form is outlined by a dashed red line.

Once you've created a form, move your cursor inside the form area. Then click on the

icon to create a new radio button. Radio buttons are used to select one of several options, such as a favorite of three colors. Here's the code for that example:

<form name="myForm" action="javascript:alert('You chose ' + myForm.hid.value + '.')">
<input type="hidden" name="hid" value="Red">
<center><table width="60%" border="1" bgcolor="#dddddd"><tr><td><table width="100%" border="0">
 <tr>
  <td width="33%" align="left">Choose one:</td>
  <td width="34%" align="center">
   <input type="radio" name="rbtn" value="Red" onclick="myForm.hid.value=this.value" checked>Red<br>
   <input type="radio" name="rbtn" value="Blue" onClick="myForm.hid.value=this.value">Blue<br>
   <input type="radio" name="rbtn" value="Green" onClick="myForm.hid.value=this.value">Green
  </td>
  <td width="33%" align="center"><input type="submit" value="Submit"></td>
 </tr>
</table></td></tr></table></center>
</form>

This example also uses a hidden field.

If you want to change the properties of the radio button, right click on it and select what you want to edit.

Selecting "Name..." pops up a window that allows you to change the name of the radio button. If you'll look at the code for the example, all of the radio buttons have the same name. If there are multiple radio buttons with the same name, only one of them can be selected at a time.

Selecting "Value..." pops up a window that allows you to change what the value associated with the radio button is.

Selecting "Edit Tag <input>..." allows you to change all of the attributes at once:

The "Type" dropdown menu lets you change it from a radio button to a text field or any other kind of form element.
The "Name" field lets you change the name of the radio button. *Remember to give all of your radio buttons the same name if you want them in the same group.
The "Value" field lets you change the value of the radio button.
The "Checked" checkbox lets you specify if the radio button is selected by default.
The "Disabled" checkbox, if checked, greys out the radio button and will not allow the user to click on it.

Select "Edit Tag Code <input>..." if you want to edit the tag properties by hand.

Alternatively, you can change the properties of the text field through the properties menu:

The box under the word "RadioButton" on the left is the name of the radio button. *Remember to give all of your radio buttons the same name if you want them in the same group.
The "Checked Value" field is the value of the radio button.
The "Initial State" radio buttons let you specify if the radio button is selected by default.

Dreamweaver Home

CTU > Reference Desk > Web Development > Dreamweaver > Forms