1. Dreamweaver CS4 Concepts and Techniques Chapter 4 Forms

2. Chapter 4: Forms 2 Chapter Objectives 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

3. Chapter 4: Forms 3 Chapter Objectives Describe form objects Describe and add text fields and text areas to a form Describe and add check boxes and radio buttons to a form Describe and add lists and menus to a form

4. Chapter 4: Forms 4 Chapter Objectives Describe and add form buttons to a form Describe form accessibility options Apply behaviors to a form View and test a form

5. Chapter 4: Forms 5 Starting Dreamweaver and Creating a New Page on the Alaska Parks Web Site Click the Start button on the Windows taskbar Click Adobe Dreamweaver CS4 on the Start menu or point to All Programs on the Start menu, and then click Adobe Dreamweaver CS4 on the All Programs list to start Dreamweaver If necessary, display the panel groups If the Alaska Parks hierarchy is not displayed, click the Files panel button and then click Alaska Parks on the Files pop-up menu to display the Alaska Parks Web site hierarchy in the Files panel

6. Starting Dreamweaver and Creating a New Page on the Alaska Parks Web Site Chapter 4: Forms 6

7. 7 Copying Data Files to the Parks Web Site Click the Files panel button, and then click the name of the drive containing your data files, such as Removable Disk (M:) If necessary, click the plus sign (+) next to the folder containing your data files to expand that folder, and then click the plus sign (+) next to the Chapter04 folder to expand it Expand the parks folder to display the data file Click the volunteer.htm file to select it Press ctrl+c to copy the file If necessary, click the Files panel button, and then click the Alaska Parks Web site. Expand the your name folder and then the parks folder to select it Press ctrl+v to paste the volunteer file in the parks folder

8. Chapter 4: Forms 8 Opening a New Document Window Click File on the Application bar and then click New to open the New Document dialog box. If necessary, click Blank Page, click HTML in the Page Type list, click in the Layout list, and then click the Create button to create a Web page Click the Save button on the Standard toolbar to open the Save As dialog box Type hotel_form as the file name. If necessary, select the parks folder, and then click the Save button to save the hotel_form.htm page in the Alaska Parks local folder. The path and file name appear on the document tab

9. Chapter 4: Forms 9 Opening a New Document Window

10. Chapter 4: Forms 10 Adding a Background Image to the Hotel_form Page If necessary, click the panel groups Collapse to Icons arrow to collapse the panel groups If necessary, click the Property inspector expander arrow to display both the upper and lower sections Click the Page Properties button in the Property inspector to open the Page Properties dialog box If necessary, click Appearance (HTML) in the Category column to display the HTML options

11. Adding a Background Image to the Hotel_form Page Click the Browse button to the right of the Background image box to open the Select Image Source dialog box If necessary, navigate to the parks\images folder Click parks_bkg.jpg and then click the OK button in the Select Image Source dialog box to select the image Click the OK button in the Page Properties dialog box. If necessary, click the document window to display the hotel_form Web page with the background applied and the insertion point aligned at the left Chapter 4: Forms 11

12. Adding a Background Image to the Hotel_form Page Chapter 4: Forms 12

13. Chapter 4: Forms 13 Inserting and Formatting the Page Title If necessary, click the document window, and then type Alaska National Parks as the heading Press Enter and then type Hotel Reservation Form as the second heading Select both heading lines Click Format on the Application bar, point to Align, and then click Center to center the headings Apply Heading 1 to both lines to format the headings

14. Chapter 4: Forms 14 Inserting and Formatting the Page Title Click anywhere on the page to deselect the headings Title the page Alaska National Parks Hotel Form and then press Enter Click the Save button on the Standard toolbar to save the page with the centered and formatted heading Press the Enter key to move the insertion point below the second heading

15. Inserting and Formatting the Page Title Chapter 4: Forms 15

16. Chapter 4: Forms 16 Inserting a Horizontal Rule 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 Click the Horizontal rule text box in the Property inspector and type horz_rule as the ID for the horizontal rule Click the W (Width) text box and type 500 to decrease the line width. Press the tab key two times to move the insertion point to the H box

17. Chapter 4: Forms 17 Inserting a Horizontal Rule Type 10 in the H (Height) text box to increase the line height If necessary, click the Shading check box to deselect it Click below the horizontal rule, and then click the Save button to save the hotel reservations form page

18. Chapter 4: Forms 18 Inserting a Horizontal Rule

19. Chapter 4: Forms 19 Inserting a Form Click the Forms tab on the Insert bar to display the Form buttons Verify that Invisible Elements is selected by clicking View on the Application bar, and then pointing to Visual Aids. If necessary, click Invisible Elements on the Visual Aids submenu to select it

20. Chapter 4: Forms 20 Setting the Form Properties Double-click the Form ID text box in the Property inspector to select the default form name. Type hotel_form and then press the tab key to name the form Type mailto:dedwards@parks.com (use your own e-mail address) in the Action text box Click the Target box arrow, select _self, and then press the tab key to move the insertion point to the Enctype box Type text/plain and press the Enter key to display text/plain in the Enctype box

21. Chapter 4: Forms 21 Setting the Form Properties

22. Chapter 4: Forms 22 Inserting a Table into a Form Click inside the form (the dotted red outline) Click Insert on the menu bar and then point to Table Click Table to display the Table dialog box.

23. Chapter 4: Forms 23 Inserting a Table into a Form Type the following values in the Table dialog box: Rows: 11 Columns: 2 Table width: 75 percent Border thickness: 4 Cell padding: 5 Cell spacing: 0 Summary text: Hotel reservation form for Alaska National Parks Click the OK button to insert the table into the form Verify that the table is selected. Click the Align button in the Property inspector, and then select Center to center the table in the form outline and to display the table properties in the Property inspector

24. Chapter 4: Forms 24 Inserting a Table into a Form

25. Chapter 4: Forms 25 Formatting the Form If necessary, select the table. In the Property inspector, click the Table box, type reservations as the ID, and then press the Enter key to name the table If necessary, scroll up, click row 1, column 1, and then drag to select all of column 1. Click the W text box, type 35%, and then press the Enter key to set the column width to 35 percent The column still should be selected. Click Format on the Application bar, point to Align, and then click Right to right align any text entered into column 1 Click the Save button on the Standard toolbar to save the table

26. Chapter 4: Forms 26 Formatting the Form

27. Chapter 4: Forms 27 Adding Descriptive Labels and Single-Line Text Fields to the Hotel Reservations Form If necessary, scroll up and then click row 1, column 1 to place the insertion point in the cell Type Name as the descriptive label and then press the TAB key to place the insertion point in row 1, column 2 Click the Text Field button on the Forms tab to insert a Text Field form object Double-click the TextField text box in the Property inspector to select the default name, type name to rename the TextField, and then press the tab key Type 50 in the Char Width text box and then press the TAB key. If necessary, click Single line as the type

28. Chapter 4: Forms 28 Adding Descriptive Labels and Single-Line Text Fields to the Hotel Reservations Form Click row 2, column 1, type Address, and then press the TAB key Click the Text Field button on the Forms tab to insert the Text Field form object Double-click the TextField text box in the Property inspector, type address, and then press the TAB key Type 50 in the Char Width text box and then press the TAB key to expand the text field width. If necessary, click Single line as the type Click row 3, column 1, and then type City. Press the TAB key to move the insertion point to column 2

29. Chapter 4: Forms 29 Adding Descriptive Labels and Single-Line Text Fields to the Hotel Reservations Form Click the Text Field button on the Forms category to Insert a text field Type city as the TextField name Type 50 in the Char Width text box and then press the TAB key to expand the field. Ensure that Single line is selected Click row 4, column 1. Type State/Zip Code as the label and then press the tab key to move the insertion point to row 4, column 2

30. Chapter 4: Forms 30 Adding Descriptive Labels and Single-Line Text Fields to the Hotel Reservations Form Type State and then press the SPACEBAR to add the State descriptive label Click the Text Field button to insert a text field for State. Type state as the TextField name in the Property Inspector Type 2 for the Char Width and Max Chars values. Press the tab key to resize the text field. Ensure that Single line is selected Click to the right of the State Text Field form object and then press the Spacebar. Type Zip Code and then press the spacebar to add Zip Code as the descriptive label

31. Chapter 4: Forms 31 Adding Descriptive Labels and Single-Line Text Fields to the Hotel Reservations Form Click the Text Field button on the Forms tab to insert a text field for Zip Code Type zip as the TextField name Type 10 for the Char Width and Max Chars values and then press the TAB key to set the values to 10 Type zip as the TextField name

32. Chapter 4: Forms 32 Adding Descriptive Labels and Single-Line Text Fields to the Hotel Reservations Form Type 10 for the Char width and Max chars values and then press the tab key to set the values to 10 Ensure that Single line is selected If necessary, scroll down. Click row 5, column 1, and then type E-mail address for the descriptive label Press the tab key and then click the Text Field button to insert a text field for E-mail address Type email as the TextField name to name the text field Type 45 for the Char width value and then press the Enter key to adjust the size. Ensure that Single line is selected Press ctrl+s to save the page

33. Chapter 4: Forms 33 Adding Descriptive Labels and Single-Line Text Fields to the Hotel Reservations Form

34. Chapter 4: Forms 34 Adding Check Boxes Click row 6, column 1, type Hotels as the descriptive label, and then press the TAB key Click the Checkbox button on the Forms tab to add the check box to the form Type hotel1 as the CheckBox name Press the TAB key and then type alaska_national in the Checked value text box. Press the ENTER key to display the properties for the first check box Click to the right of the Checkbox form object and then press SHIFT+ENTER to add a line break and to position the insertion point below the first check box

35. Chapter 4: Forms 35 Adding Check Boxes Click the Checkbox button on the Forms tab to insert a second check box Type hotel2 as the CheckBox name. Press the TAB key and then type fairbanks_royal in the Checked value text box to add the second check box. Press the ENTER key Click to the right of the second check box, press SHIFT+ENTER to add a line break, and then click the Checkbox button on the Forms tab to insert a third check box Type hotel3 as the CheckBox name Press the TAB key and then type denali_inn in the Checked value text box. Press the ENTER key to add the third check box

36. Chapter 4: Forms 36 Adding Check Boxes Click to the right of the third check box, press SHIFT+ENTER to add a line break, and then click the Checkbox button on the Forms tab to insert a fourth check box Type hotel4 as the Checkbox name Press the TAB key and then type arctic_hotel in the Checked value text box. Press the Enter key to add the properties for the fourth check box

37. Chapter 4: Forms 37 Adding Check Boxes Click to the right of the first check box Type Alaska National as the descriptive label for the first check box, and then press the Down arrow key Type Fairbanks Royal as the descriptive label for the second check box, press the DOWN ARROW key, and then type Denali Inn as the label for the third check box Press the DOWN ARROW key, and then type Arctic Hotel as the label for the fourth check box to add the descriptive labels for all four check boxes Click the Save button on the Standard toolbar to save your work

38. Chapter 4: Forms 38 Adding Check Boxes

39. Chapter 4: Forms 39 Creating a Scrolling List Click row 7, column 1. Type Accommodations and then press the TAB key. Click the List/Menu button on the Forms tab Type accommodations as the List/Menu name to name the list Click List in the Type options Select the value in the Height box, and then type 2 to set the height to 2 Click the Selections check box to allow multiple selections

40. Chapter 4: Forms 40 Creating a Scrolling List Click the List Values button in the Property inspector to display the List Values dialog box Type Single as the first Item Label, press the TAB key, and then type single as the Value to add a second line to the Item Label list Press the TAB key Type Double as the second Item Label, and then press the tab key Type double as the Value and then press the TAB key Type Suite as the third Item Label, and then press the tab key

41. Chapter 4: Forms 41 Creating a Scrolling List Type suite as the Value and then press the TAB key Type Luxury Suite as the fourth Item Label, and the press the tab key Type luxury_suite as the Value to complete the items list Click the OK button to display the list Click Single in the Initially selected box in the Property inspector to designate it as the default item in the list Click the Save button on the Standard Toolbar to save your work

42. Chapter 4: Forms 42 Creating a Scrolling List

43. Chapter 4: Forms 43 Creating a Pop-Up Menu If necessary, scroll down and then click row 8, column 1 Type Number of nights and then press the TAB key Click the List/Menu button on the Forms tab to display the List/Menu form object Type nights in the List/Menu text box to name the pop-up menu, and make sure Menu is selected as the Type Click the List Values button in the Property inspector to display the List Values dialog box. Type 1 as the Item Label, press the tab key, and then type 1 for the Value

44. Chapter 4: Forms 44 Creating a Pop-Up Menu Press the TAB key. Repeat Step 3, incrementing the number each time by 1 in the Item Label and Value fields, until the number 7 is added to the Item Label field and the Value field Click the OK button to display the numbers in the Initially selected box Click the number 1 in the Initially selected box in the Property inspector to create the default value

45. Chapter 4: Forms 45 Creating a Pop-Up Menu

46. Chapter 4: Forms 46 Inserting a Jump Menu Click row 9, column 1, type Links, and then press the TAB key 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 it, type Choose one, and then click the Plus (+) button to add “Choose one” as a menu item Double-click the Text text box Type Denali National Park and Preserve as the text for the second menu item and then press the tab key to move to the When selected, go to URL: text box

47. Chapter 4: Forms 47 Inserting a Jump Menu Type http://www.nps.gov/dena and then point to the Plus button Click the Plus button, double-click the Text text box, type Gates of the Arctic National Park and Preserves as the entry, and then press the TAB key Type http://www.nps.gov/gaar to add Gates of the Arctic as the next menu item Click the Plus button, double-click the Text text box, type Noatak National Preserve as the entry, and then press the TAB key

48. Chapter 4: Forms 48 Inserting a Jump Menu Type http://www.nps.gov/noat to add Noatak National Preserve as the fourth menu item Click the Plus button, double-click the Text text box, type Sitka National Historical Park as the entry, and then press the tab key Type http://www.nps.gov/sitk for the link to add Sitka National Historical Park as the fifth menu item and to add the URL to the Insert Jump menu dialog box Double-click in the Menu ID text box and type park_web_sites to name the menu Click the Select first item after URL change check box to select the option

49. Chapter 4: Forms 49 Inserting a Jump Menu Click the OK button to add the jump menu to the form Click Choose one in the Initially selected box in the Property inspector Click the Save button on the Standard toolbar

50. Chapter 4: Forms 50 Inserting a Jump Menu

51. Chapter 4: Forms 51 Adding a TextArea Text Field If necessary, scroll down. Click row 10, column 1 Type Comments and then press the TAB key to insert the label Click the Textarea button on the Forms tab to add the Textarea form object to the form In the Property inspector, type comments as the name for the TextField Press the TAB key and type 50 for the Char width value. Press the TAB key and type 4 for the Num lines value

52. Chapter 4: Forms 52 Adding a TextArea Text Field Click the Init val box, type Please add your comments as the entry Verify that Multi line is selected Click the textarea in the form to display the initial value Click the Save button on the Standard toolbar to save the form

53. Chapter 4: Forms 53 Adding a TextArea Text Field

54. Chapter 4: Forms 54 Adding the Submit and Reset Buttons If necessary, scroll down and then click row 11, column 1 Click the Button button on the Forms tab to add the Submit button to the form Type submit in the Button name text box and then press the tab key Make sure Submit appears in the Value text box and that Submit form is selected as the Action

55. Chapter 4: Forms 55 Adding the Submit and Reset Buttons Click row 11, column 2, and then click the Button button on the Forms tab to add the Submit button form object Type reset in the Button name text box and then press the tab key Type Reset in the Value text box to rename the button and then click the Reset form option button in the Action area Click the Save button on the Standard toolbar

56. Chapter 4: Forms 56 Adding the Submit and Reset Buttons

57. Chapter 4: Forms 57 Opening the Volunteer.htm Web Page If necessary, click the Expand Panels button to display the panel groups Double-click volunteer.htm in the Files panel Click the Collapse to Icons button to collapse the panel groups Click below the text If necessary, scroll down and then position the insertion point at the end of the last line of text. Press the Enter key Click the Form button on the Forms tab to insert a form

58. Opening the Volunteer.htm Web Page In the Property inspector, type newsletter as the Form ID Use the mailto: format and type your e-mail address in the Action text box Select _self on the Target pop-up menu Type text/plain in the Enctype box, and then press the Enter key Click inside the form in the document window. Click Insert on the Application bar and then click the Table command to display the Table dialog box Create a four-row, two-column table, with a width of 75%, a border thickness of 4, and a cell padding of 5. Type Alaska National Parks newsletter in the Summary text box Chapter 4: Forms 58

59. Opening the Volunteer.htm Web Page Click the OK button to insert the table in the form Scroll up and down as necessary to display the entire table If necessary, select the table, click Format on the Application bar, point to Align, and then select Center to center the table Click the Table text box and type newsletter_form as the ID Select row 1, columns 1 and 2, and then merge the cells Click in row 1, type Alaska National Parks as the entry, and then press shift+enter to insert a line break Chapter 4: Forms 59

60. Opening the Volunteer.htm Web Page Type Newsletter Information and then select the two lines of text Apply Heading 2 and center the headings Select rows 2 through 4, column 1, click Format on the Application bar, point to Align, and then click Right to right-align the text Select rows 2 through 4, column 2, click the Horz button in the Property inspector, and then click Left to left-align the cells. Click outside of the table to deselect the cells Click the Save button on the Standard toolbar to add the form and table Chapter 4: Forms 60

61. Opening the Volunteer.htm Web Page Chapter 4: Forms 61

62. Chapter 4: Forms 62 Adding an E-mail Address Select rows 2 through 4, column 1, and then set the column width to 40% Click row 2, column 1. Type E-mail as the entry and then press the TAB key Click the Text Field button on the Forms tab to insert a text field Double-click the TextField text box in the Property inspector. Type email and then press the TAB key Type 30 as the Char width and then press the tab key to add the descriptive text and the text form object

63. Adding an E-mail Address Chapter 4: Forms 63

64. Chapter 4: Forms 64 Adding a Radio Group Click row 3, column1. Type I am interested in receiving a newsletter and then press the TAB key Click the Radio Group button on the Forms tab to display the Radio Group dialog box Type newsletter in the Name text box, and then click to select the first instance of Radio in the Label field Type Daily as the Label and then press the tab key to enter the label

65. Chapter 4: Forms 65 Adding a Radio Group Type daily as the Value Press the TAB key, type Weekly in the Label field to enter the label, and then press the TAB key Type weekly as the Value entry Press the tab key, and then type Monthly in the Label field. Press the tab key Type monthly as the Value entry Click the OK button to insert the radio group and labels

66. Chapter 4: Forms 66 Adding a Radio Group

67. Chapter 4: Forms 67 Adding the Submit and Reset Buttons to the Volunteer.htm Form If necessary, scroll down. Click row 4, column 1, and then click the Button button on the Forms tab to insert the Submit button In the Property inspector, enter submit as the Button name Click row 4, column 2 in the table, and then click the Button button on the Forms tab Type reset as the Button name and then press the TAB key to name the Reset Button Type Reset in the Value text box and then click Reset form in the Action area Click the Save button on the Standard toolbar

68. Chapter 4: Forms 68 Adding the Submit and Reset Buttons to the Volunteer.htm Form

69. Chapter 4: Forms 69 Adding Links to the Volunteer.htm, Hotel_Form.htm, and Index.htm Web Pages Display the panel groups and open the index.htm Web page Scroll to the end of the Web page and then add a line break after your name Type Alaska National Parks Volunteer Association Add a line break, and then type Alaska National Parks Hotel Reservations as the entry Select the text Alaska National Parks Volunteer Association and create a link to the volunteer.htm Web page Select the text Alaska National Parks Hotel Reservations and create a link to the hotel_form.htm Web page Save the index.htm Web page and then press the f12 key to display the page in your browser

70. Chapter 4: Forms 70 Adding Links to the Volunteer.htm, Hotel_Form.htm, and Index.htm Web Pages Verify that the links work and close the browser. Close the index.htm Web page If necessary, click the volunteer.htm tab and then scroll to the bottom of the page. Click below the table and then type Home Select the Home text and then create a link to the index.htm Web page Save the volunteer.htm Web page Press the F12 key to display the Web page in your browser and then verify that the links work Close the browser

71. Chapter 4: Forms 71 Adding Links to the Volunteer.htm, Hotel_Form.htm, and Index.htm Web Pages Click the hotel_form.htm tab and then, if necessary, scroll to the bottom of the page Click under the table and then type Home Select the Home text and then create a link to the index.htm Web page Save the hotel_form.htm Web page Press the F12 key to display the Web page in your browser and then verify that the link works Close the browser

72. Adding Links to the Volunteer.htm, Hotel_Form.htm, and Index.htm Web Pages Chapter 4: Forms 72

73. Chapter 4: Forms 73 Adding the Validate Form Behavior Display the panel groups and collapse the Property inspector If necessary, click the hotel_form.htm tab Click Window on the menu bar to display the Windows menu and then point to Behaviors Click Behaviors to display the Behaviors panel If necessary, click anywhere inside the form. Click in the tag selector to select the form

74. Chapter 4: Forms 74 Adding the Validate Form Behavior 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 Click the Value Required check box to insert an (R) to the right of the name field name Click the text input “address”, and then click the Value Required check box to insert an (R) to the right of the address field name Click the text input “city” and then click the Value Required check box to insert an (R) to the right of the city field name Click the text input “state” and then click the Value Required check box to insert an (R) to the right of the state field name

75. Adding the Validate Form Behavior Scroll down if necessary. Click the text input “zip”, and then click the Value Required box and the Number button in the Accept section to insert (RisNum) to the right of the zip field name Click the text input “email”, and then click the Value Required check box and the Email address option button to insert (RisNum) to the right of the email field name Click the OK button Click in the form outside the table to deselect the form and display the Event and Action in the Behaviors panel Click the Save button on the Standard toolbar Chapter 4: Forms 75

76. Adding the Validate Form Behavior Chapter 4: Forms 76

77. Chapter 4: Forms 77 Viewing and Testing the Forms Press the F12 key to display the hotel_form page in the browser Complete the form, typing data in each field, but skipping the Links jump menu, and then click the Submit button to display a Windows Internet Explorer dialog box Read the information in the dialog box, and then click the OK button to process the form and to have the data automatically e-mailed to you Check your e-mail to verify that the data is e-mailed to you. In some instances, your e-mail message may not include the data attachment. This is determined by the e-mail program server and the security set up on your computer Close the browser and return to Dreamweaver

78. Chapter 4: Forms 78 Adding Behaviors, Viewing, and Testing the Volunteer.htm Form Click the volunteer.htm tab. Click inside the form, but not in the table, and then click in the tag selector. Verify that form#newsletter is selected in the tag selector Click the Add behavior button on the Behaviors panel and then click Validate Form on the pop-up menu Click the Value Required check box and the Email address radio button and then click the OK button Save the form Press the F12 key to display the form in your browser

79. Chapter 4: Forms 79 Adding Behaviors, Viewing, and Testing the Volunteer.htm Form Click the E-mail form object and then type your e-mail address Click the Weekly radio button and then click the Submit button Click the OK button in the Windows Internet Explorer dialog box to e-mail the data Check your e-mail to verify that the data is e-mailed to you Close the browser and return to Dreamweaver If instructed to do so, upload your Web site to a remote server

80. Chapter 4: Forms 80 Adding Behaviors, Viewing, and Testing the Volunteer.htm Form

81. Chapter 4: Forms 81 Closing the Web Site and Quitting Dreamweaver Click the Close button on the upper-right corner of the Dreamweaver title bar to close the Dreamweaver window, the Document windows, and the parks Web site. If you have unsaved changes, click the Yes button in the Dreamweaver dialog box to save the page

82. Chapter 4: Forms 82 Chapter Summary 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

83. Chapter 4: Forms 83 Chapter Summary Describe form objects Describe and add text fields and text areas to a form Describe and add check boxes and radio buttons to a form Describe and add lists and menus to a form

84. Chapter 4: Forms 84 Chapter Summary Describe and add form buttons to a form Describe form accessibility options Apply behaviors to a form View and test a form

85. Dreamweaver CS4 Concepts and Techniques Chapter 4 Complete Forms