| Checkboxes allow users to choose one or more options in a group of related items. Checkboxes are typically used when you want the user to choose as many of the listed options as desired. If you want your user to choose only one selection, you should use a radio button as demonstrated in the exercise that follows this one. In this exercise, you will insert a group of checkboxes. 1. | Place the insertion point inside the Experience And Interests legend, select the <legend> tag in the tag selector, press the right arrow key once, and press Return (Macintosh) or Enter (Windows). Type I am interested in specific training segment(s):. Add a line break after the text by pressing Shift+Return (Macintosh) or Shift+Enter (Windows); then enter (check all that apply), followed by another line break.
Recall from Lesson 2 that a line break moves the insertion point to the next line without inserting a blank line, as a regular paragraph return would do.
| 2. | In the Forms category on the Insert bar, click the Checkbox button.
Tip You can also choose Insert > Form > Check Box.  The Input Tag Accessibility Attributes dialog box opens.
| 3. | In the Label text field, type Anusara Yoga Immersion. Select Wrap with label tag in the Style section and select After form item in the Position section. Leave the other fields blank and click OK.
A checkbox is inserted into the form, along with the corresponding label text.
| | | 4. | Select only the checkbox. In the CheckBox Name text field on the Property inspector, replace checkbox with segment. In the Checked Value text field, enter immersion.
Tip If both the label and checkbox are selected, the Property inspector does not display the CheckBox properties. If a visitor checks the Anusara Yoga Immersion checkbox, the immersion value indicates that the corresponding checkbox has been selected, and the sources value identifies the group of checkboxes. You can designate a number of checkboxes as a group by giving them all the same namesbe sure, however, to give them individual, clear, and accurate values.
| 5. | Place a line break after the space that exists after the Anusara Yoga Immersion label. Repeat Steps 2 through 5 to add checkboxes using In-Depth Asana Training & Practice, Yoga Philosophy Series, and Satsang: Kirtan, Meditation and Discussion for the labels. Each checkbox and its corresponding label should be on its own line. In the CheckBox Name text field on the Property inspector, replace checkbox each time with segment. Enter asana, philosophy, and satsang in each Checked Value text field, respectively.
Placing the insertion point after the space that exists after the labels is important because the insertion point will be placed outside of the label tag that surrounds the checkbox and text. You can verify this by looking at the tag selector. If you see <p><label> at the right end of the tag hierarchy, the insertion point is still between the label tags, and you need to move it. If you see only the <p> tag, you are ready to insert the line break in preparation for the next checkbox.
The last tag in the hierarchy of code for the position of the insertion point is displayed at the right end of the tag selector. The tag selector hierarchy always begins with <body>; however, you might not see the <body> tag at the left (beginning) of the tag selector if the hierarchy of tags is too long to be fully displayed. Tags in the tag selector will begin to disappear on the left to make room for the more recent tags. Expanding the Document window will give the tag selector more room if you want to see the other tags.
As you continue to insert form objects, the table expands downward to accommodate its content. As this happens, the red dotted line of the form might appear to overlap the table and not be pushed down along with the bottom of the table. If this happens, click outside the table in the Document window to cause Dreamweaver to refresh the view.
| 6. | Preview the page in the browser and test the checkboxes by clicking each one.
|
Your document should now look similar to the example shown here.  Save the training.html document and leave it open for the next exercise. |
