The document discusses how to create and format forms in Adobe Dreamweaver CS5, including how to insert form elements like text fields, checkboxes, lists, and buttons; set properties for forms and form elements; add validation to forms using behaviors; and view and test forms in a web browser. It provides step-by-step instructions for common form creation and editing tasks in Dreamweaver.

1. AdobeDreamweaver CS5 Chapter 6 Forms

2. Discuss form processing Describe the difference between client-side and server-side form processing Add a horizontal rule to a Web page Create a form Insert a table into a form Describe form objects Describe and add text fields and text areas to a form Objectives Forms 2

3. Describe and add check boxes and radio buttons to a form Describe and add lists and menus to a form Describe and add form buttons to a form Describe form accessibility options Apply behaviors to a form View and test a form Forms 3 Objectives

4. Forms 4 Project – Adding Forms to a Web Site

5. Plan the format of the form pages Organize your content Consider the data you will collect Images Determine the types of controls you will add to the form Consider Web content accessibility factors Link the new content Create, test, and validate the form Forms 5 General Project Guidelines

6. Click Insert on the Application bar, point to HTML, and then point to Horizontal Rule to highlight the Horizontal Rule command Click Horizontal Rule to insert the horizontal rule below the heading and to display the Horizontal rule Property inspector Type the desired ID, W (Width), H (Height), and set whether the horizontal rule should contain shading Forms 6 Inserting and Formatting a Horizontal Rule

7. Forms 7 Inserting and Formatting a Horizontal Rule

8. Click the Forms tab on the Insert bar to display the Form buttons Click View on the Application bar and then point to Visual Aids to verify that Invisible Elements is selected If necessary, click Invisible Elements on the Visual Aids submenu to select it Click the Form button on the Forms tab to insert a form into the Document window and to display the Form Property inspector Forms 8 Inserting a Form on a Web Page

9. Forms 9 Inserting a Form on a Web Page

10. Forms 10 Form Property Inspector

11. Forms 11 Setting the Form Properties

12. If necessary, click inside the form (the dotted red outline) to display the insertion point in the form Click Insert on the Application bar to display the Insert menu and then point to Table Click Table to display the Table dialog box Type the desired values in the Table dialog box Click the OK button to insert the table into the form Click the Align button in the Property inspector and then select the desired alignment Forms 12 Inserting a Table into a Form

13. Forms 13 Inserting a Table into a Form

14. If necessary, select the table In the Property inspector, click the Table box, type the desired ID To change the width of a column, select the cells in the column and then type the desired width in the W text box To change the alignment of the selected column, click Format on the Application bar, point to Align, and then click the desired alignment option Forms 14 Formatting the Form

15. Forms 15 Formatting the Form

16. Forms 16 Form Objects

17. Forms 17 Form Objects

18. Position the insertion point at the location for the text field label Type the desired label for the text field Position the insertion point at the location for the text field Click the Text Field button on the Forms tab to insert a TextFieldform object Double-click the TextFieldtext box in the Property inspector to select the default name and then type the desired name Type the desired width in the Char width text box If necessary, click the Single line option button in the Type area to select the text field Forms 18 Adding Descriptive Labels and Single-Line Text Fields

19. Forms 19 Adding Descriptive Labels and Single-Line Text Fields

20. Position the insertion point where you wish to insert the check box Click the Checkbox button on the Forms tab to add the check box to the form Double-click the text in the Checkbox name text box and then type the desired Checkbox name Type the desired value in the Checked value text box Forms 20 Adding Check Boxes

21. Forms 21 Adding Check Boxes

22. Position the insertion point where you wish to insert the scrolling list Click the Select (List/Menu) button on the Forms tab to add a scrolling list to the form Type the desired name for the object in the Select text box Click the List option button in the Type area to select the list type of form object Select the value in the Height box and then type the desired height If desired, click the Selections check box to allow multiple selections Forms 22 Creating a Scrolling List

23. Click the List Values button in the Property inspector to display the List Values dialog box Type the first item label and then press the TAB key to move the insertion point to the Value column Type the desired value for the first item and then press the TAB key to add the first item to the Item Label list Repeat the previous two steps to add the remaining items. Do not press the TAB key after typing the last item’s value Click the OK button to display the item labels in the list box Forms 23 Creating a Scrolling List

24. Forms 24 Creating a Scrolling List

25. Position the insertion point where you wish to insert the pop-up menu Click the Select (List/ Menu) button on the Forms tab to insert a Select (List/Menu) form object Double-click the text in the Select text box and then type the desired name for the pop-up menu If necessary, click the Menu option button in the Type area to select the menu type of form object Click the List Values button in the Property inspector to display the List Values dialog box Forms 25 Creating a Pop-Up Menu

26. Type the first item label and then press the TAB key to move the insertion point to the Value column Type the desired value for the first item and then press the TAB key to add the first item to the Item Label list Repeat the previous two steps to add the remaining items. Do not press the TAB key after typing the last item’s value Click the OK button to display the item labels in the pop-up menu Click the desired item to be initially selected in the Initially selected box in the Property inspector Forms 26 Creating a Pop-Up Menu

27. Forms 27 Creating a Pop-Up Menu

28. Position the insertion point where you wish to insert the jump menu Click the Jump Menu button on the Forms tab to display the Insert Jump Menu dialog box If necessary, double-click the Text text box to select its text and then type the desired name for the first menu item Press the TAB key to move the insertion point to the When selected, go to URL text box Type the desired URL for the jump menu item Click the plus (+) button to add the menu item Forms 28 Inserting a Jump Menu

29. Repeat the previous four steps to add the remaining items Click the OK button to display the item labels in the list box Click the OK button to add the jump menu to the form If desired, click the jump menu item you want to display initially in the Initially selected box in the Property inspector Forms 29 Inserting a Jump Menu

30. Forms 30 Inserting a Jump Menu

31. Position the insertion point where you wish to insert the textarea Click the Textarea button on the Forms tab to add the Textareaform object to the form Set the desired properties for the textarea Forms 31 Adding a Textarea Text Field

32. Position the insertion point where you wish to insert the buttons Click the Button buttonon the Forms tab to add a Submit button to the form Double-click the Button name text box, type submit to name the button, and then press the TAB key to select the text in the Value text box If necessary, type Submitin the Value text box If necessary, click the Submit form option button in the Action area to select Submit form as the action Forms 32 Adding the Submit and Reset Buttons

33. Click the Button buttonon the Forms tab to add the Submit button form object to the form Double-click the Button name text box, type Reset to name the button, and then press the TAB key to select the text in the Value text box Type Resetin the Value text box so that Reset appears on the new button Click the Reset form option button in the Action area Forms 33 Adding the Submit and Reset Buttons

34. Forms 34 Adding the Submit and Reset Buttons

35. Position the insertion point where you wish to insert the radio group Click the Radio Group button on the Forms tab to display the Radio Group dialog box Type the desired name in the Name text box to provide a name for the radio group Click the first instance of Radio in the Label column to select it Type the desired label for the radio button and then press the TAB key to enter the label Type the desired value in the Value column and then press the TAB key Forms 35 Adding a Radio Group

36. Repeat the previous two steps to add the next radio button If desired, click the plus (+) button to insert another pair of values in the Radio buttons area When you are finished adding all desired radio buttons to the radio group, click the OK button to insert the radio group and labels in the form Forms 36 Adding a Radio Group

37. Forms 37 Adding a Radio Group

38. Click Window on the Application bar to display the Window menu and then point to Behaviors to highlight the command Click Behaviors to display the Behaviors panel If necessary, click anywhere inside the form to move the insertion point to the form Select the form tag in the tag selector to select the form Click the Add behavior button in the Behaviors panel and then point to Validate Form on the pop-up menu to highlight the command Click Validate Form to display the Validate Form dialog box Forms 38 Adding the Validate Form Behavior

39. Select the field to validate in the Fields list If desired, click the Required check box to require the field Click the desired field type in the Accept section to specify the type of data to require in the selected field When you are finished, click the OK button to accept the entries in the Validate Form dialog box Forms 39 Adding the Validate Form Behavior

40. Forms 40 Adding the Validate Form Behavior

41. Press the F12 key to display the form page in the browser Complete the form, typing data in each field. Ensure all fields function as designed Click the Submit button to submit the form If the form is to be submitted via e-mail, click the OK button in the Windows Internet Explorer dialog box Forms 41 Viewing and Testing a Form

42. Forms 42 Viewing and Testing a Form

43. Discuss form processing Describe the difference between client-side and server-side form processing Add a horizontal rule to a Web page Create a form Insert a table into a form Describe form objects Describe and add text fields and text areas to a form Chapter Summary Forms 43

44. Describe and add check boxes and radio buttons to a form Describe and add lists and menus to a form Describe and add form buttons to a form Describe form accessibility options Apply behaviors to a form View and test a form Forms 44 Chapter Summary

45. Chapter 6 Complete Adobe Dreamweaver CS5