Project 4

1
Project 4

• Forms

2
Project 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
• Discuss form design

3
Project Objectives

• Insert a table into a form
• 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
Project Objectives

• Describe and add form buttons to a form
• Describe form accessibility options
• Apply behaviors to a form
• View and test a form

5
Form Processing

• Server-side scripts
• Common Gateway Interface (CGI)
• ltformgt tag
• GET method
• POST method
• Form components
• ltinputgt tag
• ltselectgt tag
• lttextareagt tag

6
Copying Data Files to the Parks Web Site

• Click the Start button on the Windows taskbar and
  then click My Computer
• Double-click Local Disk (C) and then navigate to
  the location of the data files for Project 4
• Double-click the DataFiles folder, double-click
  the Proj04 folder, and then double-click the
  parks folder
• Hold down the SHIFT key and select the two data
  files. Right-click and click the Copy command
• Navigate back to the your name folder. Paste the
  two data files into the parks folder. Close the
  parks folder

7
Copying Data Files to the Parks Web Site
8
Starting Dreamweaver and Opening the Colorado
Parks Web Site

• Click the Start button on the Windows taskbar
• Point to All Programs on the Start menu, point to
  Macromedia on the All Programs submenu, and then
  click Macromedia Dreamweaver 8 on the Macromedia
  submenu
• If necessary, display the panel groups
• Click the Files panel box arrow and then click
  Colorado Parks on the Files pop-up menu

9
Starting Dreamweaver and Opening the Florida
Parks Web Site
10
Inserting and Formatting the Heading

• Double-click hotel_form.htm in the Files panel
• Click the Document window, type Colorado National
  Parks as the first line of the heading and then
  press SHIFTENTER to insert a line break. Type
  Hotel Reservations Form as the second heading
  line
• Drag to select both lines of text, apply Heading
  1, and then click the Align Center button in the
  Property inspector. Deselect the text and then
  press the ENTER key

11
Inserting and Formatting the Heading

• Click View on the menu bar, point to Visual Aids,
  and verify that there is a checkmark to the left
  of the Invisible Elements command. If the
  checkmark is not displayed, click the Invisible
  Elements command
• Click the Save button on the Standard toolbar
• Hide the panel groups and collapse the Property
  inspector

12
Inserting and Formatting the Heading
13
Inserting a Horizontal Rule

• Click Insert on the menu bar, point to HTML, and
  then point to Horizontal Rule
• Click Horizontal Rule
• Click the Horizontal rule text box and type
  horz_rule
• Click the W (Width) text box and type 500. Press
  the TAB key two times

14
Inserting a Horizontal Rule

• Type 10 in the H (Height) text box
• Click the Shading check box to deselect it
• Click at the end of the line and press the ENTER
  key. If necessary, click the Align Left button
• Click the Save button

15
Inserting a Horizontal Rule
16
Inserting a Form

• If necessary, display the Insert bar. Click the
  arrow to the right of the display category on the
  Insert bar and then point to Forms on the Insert
  bar pop-up menu
• Click Forms and then click the Form button

17
Setting the Form Properties

• Double-click the Form Name text box in the
  Property Inspector. Type hotel_form and then
  press the TAB key
• Type mailtodedwards_at_parks.com (use your own
  e-mail address)
• Click the Target box arrow, select _self, and
  then press the TAB key
• Type text/plain and then press the ENTER key

18
Setting the Form Properties
19
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

20
Inserting a Table into a Form

• Type the following values in the table Rows
  11, Columns 2, Table Width 75 percent, Border
  thickness 4, Cell padding 5, Cell spacing
  0, and Hotel reservation form for Colorados four
  national parks as the Summary text
• Click the OK button
• Verify that the table is selected, click the
  Align box arrow in the Property inspector and
  then select Center

21
Inserting a Table into a Form
22
Formatting the Form

• Click the Table Id box, type reservations and
  then press the ENTER key
• Expand the Property inspector
• 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

23
Formatting the Form

• Click the Align Right button in the Property
  inspector
• Click the lttablegt tag in the tag selector. Click
  the Brdr Color hexadecimal text box. Type
  993300 and then press the ENTER key
• Click the Save button on the Standard toolbar

24
Formatting the Form
25
Adding Descriptive Labels and Single-Line Text
Fields to the Hotel Reservations Form

• If necessary, scroll up and then click row 1,
  column 1
• Type Name as the descriptive label and then press
  the TAB key
• Click the Text Field button
• Double-click the TextField text box in the
  Property inspector, type name 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

26
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 category
• If necessary, scroll down. 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. If necessary, click Single line
• Click row 3, column 1, and then type City. Press
  the TAB key

27
Adding Descriptive Labels and Single-Line Text
Fields to the Hotel Reservations Form

• Click the Text Field button on the Forms category
• Type city as the TextField name
• Type 50 in the Char Width text box and then press
  the TAB key. Ensure Single line is selected
• Click row 4, column 1. Type State/Zip Code as
  the label and then press the TAB key

28
Adding Descriptive Labels and Single-Line Text
Fields to the Hotel Reservations Form

• Type State and then press the SPACEBAR
• Click the Text Field button. Type state for the
  TextField name in the Property inspector
• Type 2 for the Char Width and Max Chars values.
  Ensure Single line is selected
• Click to the right of the State form object and
  then press the SPACEBAR. Type Zip Code and then
  press the SPACEBAR

29
Adding Descriptive Labels and Single-Line Text
Fields to the Hotel Reservations Form

• Click the Text Field button
• Type zip as the TextField name
• Type 10 for the Char Width and Max Chars values
  and then press the TAB key. Ensure Single line
  is selected
• If necessary, scroll down. Click row 5, column
  1, and then type E-mail address

30
Adding Descriptive Labels and Single-Line Text
Fields to the Hotel Reservations Form

• Press the TAB key and then click the Text Field
  button
• Type email as the TextField name
• Type 45 for the Char Width value and then press
  the ENTER key. Ensure Single line is selected
• Press CTRLS to save the page

31
Adding Descriptive Labels and Single-Line Text
Fields to the Hotel Reservations Form
32
Adding Check Boxes

• Click row 6, column 1, type Hotels, and then
  press the TAB key
• Click the Checkbox button on the Forms category
• Type hotel1 as the CheckBox name
• Press the TAB key and then type black_canyon in
  the Checked value text box. Press the ENTER key
• Click to the right of the check box form object
  and then press SHIFTENTER to add a line break

33
Adding Check Boxes

• Click the Checkbox button
• Type hotel2 as the CheckBox name. Press the TAB
  key and then type mesa_verde in the Checked value
  text box. Press the ENTER key
• Click to the right of the second check box, press
  SHIFTENTER to add a line break, and then click
  the Checkbox button on the Forms category
• Type hotel3 as the CheckBox name
• Press the TAB key and then type rocky_mountains
  in the Checked value text box. Press the ENTER key

34
Adding Check Boxes

• Click to the right of the third check box, press
  SHIFTENTER to add a line break, and then click
  the Checkbox button on the Forms category
• Type hotel4 as the Checkbox name
• Press the TAB key and then type sand_dunes in the
  Checked value text box. Press the ENTER key

35
Adding Check Boxes

• Click to the right of the first check box
• Type Black Canyon Royale and then press the DOWN
  ARROW key
• Type Mesa Verde Pueblo as the descriptive label
  for the second check box, press the DOWN ARROW
  key, and then type Rocky Mountains Station as the
  label for the third check box
• Press the DOWN ARROW key, and then type Sand
  Dunes Central as the label for the fourth check
  box
• Click the Save button on the Standard toolbar

36
Adding Check Boxes
37
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 category
• Type accommodations as the List/Menu name
• Click List in the Type options
• Type 2 in the Height box
• Click the Selections check box to allow multiple
  selections

38
Creating a Scrolling List

• Click the List Values button
• Type Single as the first Item Label, press the
• TAB key, and then type single as the Value
• Press the TAB key
• Type Double as the second Item Label

39
Creating a Scrolling List

• Type double as the Value and then press the TAB
  key
• Type Suite as the third Item Label
• Type suite as the Value and then press the TAB
  key
• Type Luxury Suite as the fourth Item Label

40
Creating a Scrolling List

• Type luxury_suite as the Value
• Click the OK button
• Click Single in the Initially selected box in the
  Property inspector
• Click the Save button on the Standard toolbar

41
Creating a Scrolling List
42
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 category
• Type nights in the List/Menu text box to name the
  pop-up menu
• Click the List Values button. In the List Values
  dialog box, type 1 as the Item Label, press the
  TAB key, and then type 1 for the Value

43
Creating a Pop-Up Menu

• Press the TAB key
• Repeat the previous step in the List Values
  dialog box, 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
• Click the number 1 in the Initially selected box
  in the Property inspector

44
Creating a Pop-Up Menu
45
Inserting a Jump Menu

• Click row 9, column 1, type Links, and then press
  the TAB key
• Click the Jump Menu button
• Type Choose one in the Text text box and then
  click the plus () button
• Double-click the Text text box
• Type Black Canyon of the Gunnison National Park
  as the text for the second menu item and then
  press the TAB key

46
Inserting a Jump Menu

• Type http//www.nps.gov/blca and then point to
  the Plus button
• Click the Plus button, double-click the Text text
  box, type Great Sand Dunes National Park as the
  entry, and then press the TAB key
• Type http//www.nps.gov/grsa and then point to
  the Plus button
• Click the Plus button, double-click the Text text
  box, type Mesa Verde National Park as the entry,
  and then press the TAB key

47
Inserting a Jump Menu

• Type http//www.nps.gov/meve and then click the
  Plus button
• Double-click the Text text box, type Rocky
  Mountain National Park as the entry, and then
  press the TAB key
• Type http//www.nps.gov/romo for the link
• Double-click in the Menu name text box and type
  park_web_sites
• Click the Select first item after URL change
  check box

48
Inserting a Jump Menu

• Click the OK button
• Click Choose one in the Initially selected box in
  the Property inspector
• Click the Save button on the Standard toolbar

49
Inserting a Jump Menu
50
Adding a TextArea Text Field

• If necessary, scroll down. Click row 10, column
  1
• Type Comments and then press the TAB key
• Click the Textarea button on the Forms category
• Type comments as the name for the TextField

51
Adding a TextArea Text Field

• Press the TAB key and type 50 for the Char Width
  value. Press the TAB key and type 4 for the Num
  Lines value
• 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

52
Adding a TextArea Text Field
53
Adding the Submit and Reset Buttons

• If necessary, scroll down and then click row 11,
  column 1
• Click the Button button on the Forms category
• Click row 11, column 2, and then click the Button
  button on the Forms category

54
Adding the Submit and Reset Buttons

• Type reset in the Button name text box and then
  press the TAB key
• Type Reset in the Label text box and then click
  Reset form in the Action area
• Click the Save button on the Standard toolbar

55
Adding the Submit and Reset Buttons
56
Opening the Volunteer.htm Web Page

• Click the expand/collapse arrow to display the
  panel groups
• Double-click volunteer.htm in the Files panel
• Click the expand/collapse arrow to hide the panel
  groups

57
Adding a Form and Table to the Volunteer.htm Web
Page

• 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 category
• In the Property inspector, type newsletter as the
  form name
• Use the mailto format and type your e-mail
  address in the Action text box

58
Adding a Form and Table to the Volunteer.htm Web
Page

• 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 menu bar and then click the
  Table command
• Create a four-row, two-column table, with a width
  of 75, a border thickness of 4, and a cell
  padding of 5. Type Colorado National Parks
  newsletter in the Summary text box. Click the OK
  button
• Scroll up and down as necessary
• Click the Table ID and type newsletter_form

59
Adding a Form and Table to the Volunteer.htm Web
Page

• Select the table, click the Align pop-up menu in
  the Property inspector, and then center the table
• Enter 993300 in the Brdr color hexadecimal text
  box and then press the ENTER key
• Select row 1 and then merge the cells
• Click row 1, type Colorado National Parks as the
  entry, and then press SHIFTENTER to insert a
  line break

60
Adding a Form and Table to the Volunteer.htm Web
Page

• Type Newsletter Information and then select the
  two lines of text
• Apply Heading 2 and then center the heading
• Select rows 2 through 4, column 1, and then click
  the Align Right button in the Property inspector
• Click the Save button on the Standard toolbar

61
Adding a Form and Table to the Volunteer.htm Web
Page
62
Inserting a Single-Line Text Box

• Select rows 2 through 4, column 1, and then set
  the column width to 35
• 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 category
• Double-click the TextField text box in the
  Property inspector. Type email and then press the
  TAB key
• Type 30 and then press the TAB key

63
Inserting a Single-Line Text Box
64
Adding a Radio Group

• Click row 3, column 1. Type I am interested in
  receiving a newsletter and then press the TAB key
• Point to the Radio Group button on the Forms
  category
• Click the Radio Group button
• Type newsletter and then click the first instance
  of Radio in the Label field

65
Adding a Radio Group

• Type Daily as the Label and then press the TAB
  key
• Type daily as the Value
• Press the TAB key, type Weekly in the Label
  field, and then press the TAB key
• Type weekly

66
Adding a Radio Group

• Click the Plus button, click Radio, and then type
  Monthly in the Label field. Press the TAB key
• Type monthly and then, if necessary, click the
  Lay out using Line Breaks (ltbrgt tags) radio
  button
• Click the OK button

67
Adding a Radio Group
68
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
  category
• Click row 4, column 2, and then click the Button
  button on the Forms category
• Type Reset as the Button name and then press the
  TAB key
• Type Reset in the Value text box and then click
  Reset form in the Action area
• Click the Save button on the Standard toolbar

69
Adding the Submit and Reset Buttons to the
Volunteer.htm Form
70
Adding Links to the Volunteer.htm,
Hotel_Form.htm, and Natl_Parks.htm Web Pages

• Display the panel groups and open the
  natl_parks.htm Web page
• Scroll to the end of the Web page and then add a
  line break after the Home link. Press the END key
• Type Colorado National Parks Volunteer
  Association. Add a line break, and then type
  Colorado National Parks Hotel Reservations
• Select the text Colorado National Parks Volunteer
  Association and create a link to the
  volunteer.htm Web page. Select the text Colorado
  National Parks Hotel Reservations and create a
  link to the hotel_form.htm Web page

71
Adding Links to the Volunteer.htm,
Hotel_Form.htm, and Natl_Parks.htm Web Pages

• Save the natl_parks.htm Web page and then press
  the F12 key to display the page in your browser.
  Verify that the links work and close the browser.
  Close the national.htm Web page
• Click the volunteer.htm tab and then scroll to
  the bottom of the page. Type Home and then add a
  line break
• Type Colorado National Parks as the entry
• Select the Home text and then create a link to
  the index.htm Web page

72
Adding Links to the Volunteer.htm,
Hotel_Form.htm, and Natl_Parks.htm Web Pages

• Select the Colorado National Parks text and then
  create a link to the natl_parks.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
• Click the hotel_form.htm tab and then, if
  necessary, scroll to the bottom of the page. Type
  Home and then add a line break
• Type Colorado National Parks as the entry

73
Adding Links to the Volunteer.htm,
Hotel_Form.htm, and Natl_Parks.htm Web Pages

• Select the Home text and then create a link to
  the index.htm Web page
• Select the Colorado National Parks text and then
  create a link to the natl_parks.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 links work.
  Close the browser

74
Adding Links to the Volunteer.htm,
Hotel_Form.htm, and Natl_Parks.htm Web Pages
75
Adding the Validate Form Behavior

• Display the panel groups and hide the Property
  inspector
• If necessary, click the hotel_form.htm tab
• Click Window on the menu bar and then point to
  Behaviors
• Click Behaviors
• Click ltformhotel_formgt in the tag selector.
  Click the Add Behavior button in the Behaviors
  panel and then point to Validate Form on the
  pop-up menu

76
Adding the Validate Form Behavior

• Click Validate Form
• Click the Value Required check box
• Click the text address in form hotel_form
  field and then click Value Required for the
  address field
• Repeat the previous step for the city, state, and
  zip fields

77
Adding the Validate Form Behavior

• Click the text email in the form hotel_form
  field. Click the Value Required check box and
  the E-mail Address radio button
• Click the OK button
• Click anywhere in the Document window to deselect
  the form
• Click the Save button on the Standard toolbar

78
Viewing and Testing the Hotel_Form.htm Form

• Press the F12 key
• Complete the form, typing data in each field, and
  then click the Submit button
• Read the information in the dialog box, and then
  click the OK button
• Close the browser and return to Dreamweaver

79
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
  ltformnewslettergt in the tag selector. Verify
  that formnewsletter 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

80
Adding Behaviors, Viewing, and Testing the
Volunteer.htm Form

• Click the E-mail address 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 Microsoft Internet
  Explorer dialog box to e-mail the data
• Close the browser and return to Dreamweaver
• If instructed to do so, upload your Web site to a
  remote server. Appendix C contains information on
  uploading to a remote server. A remote folder is
  required before you can upload to a remote
  server. Generally, the remote folder is defined
  by the Web server administrator or your instructor

81
Adding Behaviors, Viewing, and Testing the
Volunteer.htm Form
82
Closing the Web Site and Quitting Dreamweaver

• Click the Close button on the upper-right corner
  of the Dreamweaver title bar

83
Project 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
• Discuss form design

84
Project Summary

• Insert a table into a form
• 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

85
Project Summary

• Describe and add form buttons to a form
• Describe form accessibility options
• Apply behaviors to a form
• View and test a form

86
Project 4 Complete

• Forms