1. Adobe Dreamweaver CS4 - Illustrated Collecting Data with Forms Collecting Data with Forms

2. Unit Objectives Understand forms and form objectsUnderstand forms and form objects Insert a form on a pageInsert a form on a page Add a text form fieldAdd a text form field Add a radio groupAdd a radio group Adobe Dreamweaver CS4 - Illustrated

3. Unit Objectives Add a check boxAdd a check box Insert a Submit and a Reset buttonInsert a Submit and a Reset button Format and test a formFormat and test a form Update filesUpdate files Adobe Dreamweaver CS4 - Illustrated

4. Understanding Forms and Form Objects Form fieldsForm fields Radio buttonsRadio buttons Check boxesCheck boxes List/menusList/menus ButtonsButtons Adobe Dreamweaver CS4 - Illustrated

5. Understanding Forms and Form Objects Adobe Dreamweaver CS4 - Illustrated

6. Inserting a Form on a Page Start Dreamweaver, open The Striped Umbrella Web site, then open the activities.html pageStart 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 breakPlace the insertion point after the last sentence on the page, then insert a paragraph break Click the Form button in the Forms category on the Insert panelClick the Form button in the Forms category on the Insert panel Select the form name in the Property inspector, type feedback, replacing the default form name, then press [Tab]Select the form name in the Property inspector, type feedback, replacing the default form name, then press [Tab] Adobe Dreamweaver CS4 - Illustrated

7. Inserting a Form on a Page Click the Show Code view buttonClick the Show Code view button Locate the tags for the formLocate the tags for the form Click the Show Design view button to return to Design ViewClick the Show Design view button to return to Design View Adobe Dreamweaver CS4 - Illustrated

8. Inserting a Form on a Page Adobe Dreamweaver CS4 - Illustrated

9. Clues to Use Processing formsProcessing forms Forms are processed according to the properties specified in the form action attributeForms are processed according to the properties specified in the form action attribute Client-side scriptingClient-side scripting Server-side scriptingServer-side scripting Adobe Dreamweaver CS4 - Illustrated

10. Adding a Text Form Field Place the insertion point inside the form if necessaryPlace the insertion point inside the form if necessary Click the Table button in the Common category on the Insert panelClick the Table button in the Common category on the Insert panel 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 OKSet 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 I-5 as a guide, enter the labels for your text fields into the table, select and format the labels with the subheading style, then drag the column border closer to the edge of the text labelsUsing Figure I-5 as a guide, enter the labels for your text fields into the table, select and format the labels with the subheading style, then drag the column border closer to the edge of the text labels Adobe Dreamweaver CS4 - Illustrated

11. Adding a Text Form Field Place the insertion point in the cell next to the First Name label, then click the Text Field button in the Forms category on the Insert panelPlace the insertion point in the cell next to the First Name label, then click the Text Field button in the Forms category on the Insert panel 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 fieldsClick 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 steps 5 and 6 to enter Single-line text fields for each text label, using the information in Table I-1Repeat steps 5 and 6 to enter Single-line text fields for each text label, using the information in Table I-1 Drag the column border closer to the edge of the form fields, click the first_name field to select it, then save your workDrag the column border closer to the edge of the form fields, click the first_name field to select it, then save your work Adobe Dreamweaver CS4 - Illustrated

12. Adding a Text Form Field Adobe Dreamweaver CS4 - Illustrated

13. Adding a Text Form Field Adobe Dreamweaver CS4 - Illustrated

14. Adding a Text Form Field Adobe Dreamweaver CS4 - Illustrated

15. Clues to Use Understanding text fieldsUnderstanding text fields Single-line text fieldsSingle-line text fields Multi-line text fieldsMulti-line text fields Password fieldsPassword fields Adobe Dreamweaver CS4 - Illustrated

16. 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 inspectorSelect 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?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 category on the Insert panelPress [Shift][Enter] (Win) or [shift][return] (Mac), then click the Radio Group button in the Forms category on the Insert panel Type newsletters in the Name text boxType newsletters in the Name text box Select the first instance of Radio in the Label column of the Radio Group dialog box to select it, then type YesSelect the first instance of Radio in the Label column of the Radio Group dialog box to select it, then type Yes Adobe Dreamweaver CS4 - Illustrated

17. Adding a Radio Group Press [Tab] to select the first instance of radio in the Value column, then type positivePress [Tab] to select the first instance of radio in the Value column, then type positive Repeat steps 5 and 6 to add another radio button named No with a value of negativeRepeat steps 5 and 6 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 OKVerify 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 I-9Format 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 I-9 Adobe Dreamweaver CS4 - Illustrated

18. Adding a Radio Group Adobe Dreamweaver CS4 - Illustrated

19. Adding a Radio Group Adobe Dreamweaver CS4 - Illustrated

20. 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 inspectorPlace 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)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 category on the Insert panelClick the Checkbox button in the Forms category on the Insert panel Type fishing in the ID text box, 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 OKType fishing in the ID text box, 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 Adobe Dreamweaver CS4 - Illustrated

21. Adding a Check Box Select the check box, type fish as the Checked value in the Property inspectorSelect the check box, type fish as the Checked value in the Property inspector 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 I-12 as a guide for the check box properties and Cruises as the label on the pageClick 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 I-12 as a guide for the check box properties and Cruises as the label on the page Format the labels with the body_text style and the text line above it as the subheading styleFormat the labels with the body_text style and the text line above it as the subheading style Save your workSave your work Adobe Dreamweaver CS4 - Illustrated

22. Adding a Check Box Adobe Dreamweaver CS4 - Illustrated

23. Adding a Check Box Adobe Dreamweaver CS4 - Illustrated

24. Inserting a Submit and a Reset Button Place the insertion point in the third column of the last rowPlace the insertion point in the third column of the last row Click the Button button in the forms category on the Insert panel, click the No label tag option in the Input Tag Accessibility Attributes dialog box, then click OKClick the Button button in the forms category on the Insert panel, click the No label tag option in the Input Tag Accessibility Attributes dialog box, then click OK Verify that the Submit form option button next to Action is selected in the Property inspector, and type Submit as the button nameVerify that the Submit form option button next to Action is selected in the Property inspector, and type Submit as the button name Adobe Dreamweaver CS4 - Illustrated

25. Inserting a Submit and a Reset Button Click to place the insertion point to the right of the Submit button, click the Button button on the Insert panel, click the No label tag option in the Input Tag Accessibility Attributes dialog box if necessary, click OK, select the new button, click the Reset form option button next to Action in the Property inspector, verify that the Button name text box and the Value text box contain ResetClick to place the insertion point to the right of the Submit button, click the Button button on the Insert panel, click the No label tag option in the Input Tag Accessibility Attributes dialog box if necessary, click OK, select the new button, click the Reset form option button next to Action in the Property inspector, verify that the Button name text box and the Value text box contain Reset Save your workSave your work Adobe Dreamweaver CS4 - Illustrated

26. Inserting a Submit and a Reset Button Adobe Dreamweaver CS4 - Illustrated

27. Inserting a Submit and a Reset Button Adobe Dreamweaver CS4 - Illustrated

28. Formatting and Testing a Form Merge the top three cells in the table, then in the merged cell type To request further information please complete this formMerge the top three cells in the table, then in the merged cell type To request further information please complete this form Apply the blue_bold style to the sentenceApply the blue_bold style to the sentence Select the labels in the first column and set the Horizontal alignment to rightSelect the labels in the first column and set the Horizontal alignment to right 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 themPlace 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 Adobe Dreamweaver CS4 - Illustrated

29. Formatting and Testing a Form Place the insertion point in the newly merged cell, click Insert on the Application bar (Win) or Menu bar (Mac), point to HTML, click Horizontal Rule, then set the width to 95% and the alignment to CenterPlace the insertion point in the newly merged cell, click Insert on the Application bar (Win) or Menu bar (Mac), point to HTML, click Horizontal Rule, then set the width to 95% and the alignment to Center Select the table, then center the table in the formSelect 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 buttonSave 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 pageClose your browser window, then close the page Adobe Dreamweaver CS4 - Illustrated

30. Formatting and Testing a Form Adobe Dreamweaver CS4 - Illustrated

31. Formatting and Testing a Form Adobe Dreamweaver CS4 - Illustrated

32. Updating Files Open the file dwh_1.html from the unit_i 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 linksOpen the file dwh_1.html from the unit_i 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_i Data Files assets folder and double-click the file heron_small.jpg to copy the file to the striped_umbrella assets folderClick 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_i Data Files assets folder and double-click the file heron_small.jpg to copy the file to the striped_umbrella assets folder Deselect the image placeholderDeselect the image placeholder Close the file dwi_1.html, then close the fishing pageClose the file dwi_1.html, then close the fishing page Adobe Dreamweaver CS4 - Illustrated

33. Updating Files Open the file dwh_2.html from the the unit_i 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 linksOpen the file dwh_2.html from the the unit_i 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 Close the dwi_2.html page, 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_i Data Files assets folder in your Data File location and double-click the file boats.jpg to copy the file to the striped_umbrella assets folderClose the dwi_2.html page, 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_i Data Files assets folder in your Data File location and double-click the file boats.jpg to copy the file to the striped_umbrella assets folder Adobe Dreamweaver CS4 - Illustrated

34. Updating Files Deselect the image placeholderDeselect the image placeholder Run reports on the Entire Current Local Site to check for Missing Alt Text and Untitled DocumentsRun reports on the Entire Current Local Site to check for Missing Alt Text and Untitled Documents Recreate the site cache, then run reports on broken links and orphaned filesRecreate the site cache, then run reports on broken links and orphaned files Close the page, then exit DreamweaverClose the page, then exit Dreamweaver Adobe Dreamweaver CS4 - Illustrated

35. Updating Files Adobe Dreamweaver CS4 - Illustrated

36. Unit Summary Understand forms and form objectsUnderstand forms and form objects Insert a form on a pageInsert a form on a page Add a text form fieldAdd a text form field Add a radio groupAdd a radio group Adobe Dreamweaver CS4 - Illustrated

37. Unit Summary Add a check boxAdd a check box Insert a Submit and a Reset buttonInsert a Submit and a Reset button Format and test a formFormat and test a form Update filesUpdate files Adobe Dreamweaver CS4 - Illustrated