chapter 4
DESCRIPTION
Chapter 4. Forms. 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. Chapter Objectives. Describe form objects - PowerPoint PPT PresentationTRANSCRIPT
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
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
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
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
Chapter 4: Forms
Starting Dreamweaver and Creating a New Page on the Alaska Parks Web Site
6
Chapter 4: Forms 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
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 <none> 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
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
Chapter 4: Forms
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
11
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
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
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
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
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
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:[email protected] (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
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.
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
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
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
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
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
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
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
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
Chapter 4: Forms 33
Adding Descriptive Labels and Single-Line Text Fields to the Hotel Reservations Form
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
Chapter 4: Forms
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
58
Chapter 4: Forms
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
59
Chapter 4: Forms
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
60
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
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
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
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
Chapter 4: Forms 68
Adding the Submit and Reset Buttons to the Volunteer.htm Form
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
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
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
Chapter 4: Forms
Adding Links to the Volunteer.htm, Hotel_Form.htm, and Index.htm Web Pages
72
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
<form#hotel_form> in the tag selector to select the form
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
Chapter 4: Forms
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
75
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
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 <form#newsletter> 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
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
Chapter 4: Forms 80
Adding Behaviors, Viewing, and Testing the Volunteer.htm Form
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
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
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
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