| Radio buttons are used when you want the user to choose only one out of a set of options. Selecting one option automatically deselects all other options. Typical uses for radio buttons are selecting credit card types, and questions that take a yes or no answer. In this exercise, you will insert a group of radio buttons into the table. 1. | Place the insertion point on the Phone text label in the Document window. Select the <label> tag in the tag selector, press the right arrow key once and then press Return (Macintosh) or Enter (Windows).
In the next step, you will place the radio buttons in this new paragraph.
| 2. | In the Forms category of the Insert bar, click the Radio Group button.
Tip You can also choose Insert > Form > Radio Group. The Radio Group dialog box appears.
 | | | 3. | In the Radio Group dialog box, type contact in the Name text field.
When using radio buttons, you must use the same name for each radio button in the same group. Radio buttons are meant to allow only one selection.
Note If you insert radio buttons one by one (either by using the Radio Button button on the Insert bar or by using the Insert > Form > 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 after your visitor clicks the button, the only way for that visitor to deselect the button will be to reset the form, which will also clear any information the visitor has typed or selected in other form objects. Also keep in mind that the names of form objects are case-sensitive when used with CGI and JavaScripts, so contact is not the same as Contact.
| 4. | Click the first instance of Radio in the Radio Buttons list area and replace that text with Email. Use the same name in the corresponding Value text field. Click the second instance of Radio and replace it with Phone. Use the same name in the corresponding Value text field.
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 highlights the text and allows you to change it.
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 a form is submitted, the values are sent to the script that processes the form on the server. It is important to be sure you give each radio button a different value so you know which option the user chose.
| 5. | Leave the Line breaks option selected in the Lay out using area and click OK to close the Radio Group dialog box. Delete the last line break that occurs just beneath the last radio button.
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.
| | | 6. | Preview the page in the browser and test the radio buttons by clicking each one.
|
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 do not appear selected or checked in the Dreamweaver Document window.  Save the training.html document and leave it open for the next exercise. |
