1. Macromedia Dreamweaver 8-- Illustrated Introductory 1 Macromedia Dreamweaver 8 Unit H Collecting Data with HTML Forms

2. Macromedia Dreamweaver 8--Illustrated Introductory 2 U n i t O b j e c t i v e s Understand forms and form objects Insert a form on a page Add a text form field Add a radio group

3. Macromedia Dreamweaver 8--Illustrated Introductory 3 U n i t O b j e c t i v e s Add a check box Insert a Submit and a Reset button Format a form Update files

4. Macromedia Dreamweaver 8--Illustrated Introductory 4 Understanding Forms and Form Objects Form fields Radio buttons Check boxes List/menusButtons

5. Macromedia Dreamweaver 8--Illustrated Introductory 5 Understanding Forms and Form Objects

6. Macromedia Dreamweaver 8--Illustrated Introductory 6 Understanding Forms and Form Objects

7. Macromedia Dreamweaver 8--Illustrated Introductory 7 Inserting a Form on a Page Start Dreamweaver, open The Striped Umbrella Web site, then open the activities.html page Place the insertion point after the last sentence on the page, then insert a paragraph break Click the Form button in the Forms group on the Insert bar Select the form name in the Property inspector if necessary, then type feedback, replacing the default form name in the Form Name text box, then press [Tab]

8. Macromedia Dreamweaver 8--Illustrated Introductory 8 Inserting a Form on a Page Click the Show Code View button Locate the tags for the form Click the Show Design View button to return to Design View

9. Macromedia Dreamweaver 8--Illustrated Introductory 9 Inserting a Form on a Page

10. Macromedia Dreamweaver 8--Illustrated Introductory 10 Clues to Use Processing HTML forms  Forms are processed according to the properties specified in the form action attribute  Client-side scripting  Server-side scripting

11. Macromedia Dreamweaver 8--Illustrated Introductory 11 Adding Text to a Form Field Place the insertion point inside the form if necessary Click the Table button in the Common group on the Insert bar Set the table rows to 7, the table columns to 3, the table width to 700 pixels, the border to 0 if necessary, leave the cell padding text box blank, the cell spacing to 3, the Top header option, type This table is used for form layout. for the Summary, then click OK Using Figure H-5 on page 197 as a guide, enter the labels for your text fields into the table, select and format the labels as the subheading style, then drag the column border closer to the edge of the text labels

12. Macromedia Dreamweaver 8--Illustrated Introductory 12 Adding Text to a Form Field Place the insertion point in the cell next to the First Name label, then click the Text Field button in the Forms group on the Insert bar Click the No Label tag style option in the Input Tag Accessibility Attributes dialog box, click OK, type first_name in the TextField text box on the Property inspector, replacing the default name, then type 30 in both the Char Width and the Max Chars fields Repeat the previous two steps to enter Single-line text fields for each text label, using the information in Table H-1 on page 196 Drag the column border closer to the edge of the form fields, click the first_name field to select it, then save your work

13. Macromedia Dreamweaver 8--Illustrated Introductory 13 Adding Text to a Form Field

14. Macromedia Dreamweaver 8--Illustrated Introductory 14 Clues to Use Understanding text fields  Single-line text fields  Multi-line text fields  Password fields

15. Macromedia Dreamweaver 8--Illustrated Introductory 15 Adding a Radio Group Select the third cells in the second, third, and fourth rows, expand the Property inspector if necessary, then click the Merges selected cells using spans button on the Property inspector Place the insertion point in the newly merged cell in the third column, then type Would you like to receive our quarterly newsletters? Press [Shift][Enter] (Win) or [shift][return] (Mac), then click the Radio Group button in the Forms group on the Insert bar Type newsletters in the Name text box Using Figure H-8 on page 199 as a guide, select the first instance of Radio in the Label column of the Radio Group dialog box to select it, then type Yes

16. Macromedia Dreamweaver 8--Illustrated Introductory 16 Adding a Radio Group Press [Tab] to select the first instance of radio in the Value column, then type positive Repeat the previous two stpes to add another radio button named No with a value of negative Verify that the Lay out using Line breaks ( tags) option is selected, then click OK Format the button labels with the body_text style and the sentence above them using the subheading style, save your work, then compare your screen to Figure H-9 on page 199

17. Macromedia Dreamweaver 8--Illustrated Introductory 17 Adding a Radio Group

18. Macromedia Dreamweaver 8--Illustrated Introductory 18 Adding a Check Box Place the insertion point in the third row of the third column, drag to select that cell and the cell beneath it, then click the Merges selected cells using spans button on the Property inspector Place the insertion point in the newly merged cell and type Please select the materials you would like to receive:, then press [Shift][Enter] (Win) or [shift][return] (Mac) Click the Checkbox button in the Forms group on the Insert bar Type Fishing in the Label text box in the Input Tag Accessibilities Attributes dialog box, click the Wrap with label tag option button in the Style section, click the After form item option button in the Position section, then click OK

19. Macromedia Dreamweaver 8--Illustrated Introductory 19 Adding a Check Box Select the checkbox, then type fishing as the CheckBox name in the Property inspector, replacing the default name, and fish as the Checked value Click to place the insertion point after the word “Fishing” on the form, press [spacebar] once, then repeat Steps 3 through 5 to place one more check box on the form using Figure H-12 on page 201 as a guide for the check box properties Format the labels with the body_text style and the text line above it as the subheading style Save your work

20. Macromedia Dreamweaver 8--Illustrated Introductory 20 Adding a Check Box

21. Macromedia Dreamweaver 8--Illustrated Introductory 21 Inserting a Submit and a Reset Button Place the insertion point in the third column of the last row Click the Button button in the forms group on the Insert bar, click the No label tag option in the Input Tag Accessibility Attributes dialog box, then click OK Verify that the Submit form option button is selected in the Property inspector, as shown in Figure H-14 on page 203

22. Macromedia Dreamweaver 8--Illustrated Introductory 22 Inserting a Submit and a Reset Button Verify that “Submit” is entered in the Button name text box and in the Value text box in the Property inspector Click the Button button on the Insert bar, click the No label tag option in the Input Tag Accessibility Attributes dialog box, click OK, click the Reset form option in the Property inspector, verify that Reset is entered in the Button name text box and the Value text box, then compare your screen to Figure H-15 on page 203 Save your work

23. Macromedia Dreamweaver 8--Illustrated Introductory 23 Inserting a Submit and a Reset Button

24. Macromedia Dreamweaver 8--Illustrated Introductory 24 Formatting a Form Merge the top three cells in the table, then type To request further information please complete this form Apply the spa_names style to the sentence Select the labels in the first column and right-align them, as shown in Figure H-16 on page 205 Place the insertion point in the last cell of the table, press [Tab] to create a new row, select all the cells in the new row, then merge them

25. Macromedia Dreamweaver 8--Illustrated Introductory 25 Formatting a Form Place the insertion point in the newly merged cell, click the Horizontal Rule button in the HTML group on the Insert bar, then set the width to 95% and the alignment to Center Select the table, then center the table in the form Save your work, click the Preview/Debug in Browser button, then select Preview in [your browser name], enter some dummy data in the form, then click the Reset button Close your browser window, then close the page

26. Macromedia Dreamweaver 8--Illustrated Introductory 26 Formatting a Form

27. Macromedia Dreamweaver 8--Illustrated Introductory 27 Updating Files Open the file dwh_1.html from the unit_h folder where your Data Files are stored, then save it as fishing.html in the striped_umbrella root folder, overwriting the existing fishing page, but not updating links Click the broken link graphic placeholder, click the Browse for File icon next to the Src text box on the Property inspector, then browse to the unit_h Data Files assets folder and select the file heron_small.jpg to copy the file to the striped_umbrella assets folder Deselect the image placeholder Close the page

28. Macromedia Dreamweaver 8--Illustrated Introductory 28 Updating Files Open the file dwh_2.html from the the unit_h folder where your Data Files are stored, then save it as cruises.html in the striped_umbrella root folder, overwriting the existing cruises page, but not updating links Click the broken link graphic placeholder, click the Browse for File icon next to the Src text box on the Property inspector, then browse to the unit_h Data Files assets folder in your Data File location and select the file boats.jpg to copy the file to the striped_umbrella assets folder Deselect the image placeholder Close the page, then exit Dreamweaver

29. Macromedia Dreamweaver 8--Illustrated Introductory 29 Updating Files

30. Macromedia Dreamweaver 8--Illustrated Introductory 30 U n i t S u m m a r y Understand forms and form objects Insert a form on a page Add a text form field Add a radio group

31. Macromedia Dreamweaver 8--Illustrated Introductory 31 U n i t S u m m a r y Add a check box Insert a Submit and a Reset button Format a form Update files