Dreamweaver CS3 Concepts and Techniques Chapter 4 Forms.
83
Dreamweaver CS3 Concepts and Techniques Chapter 4 Forms
-
Upload
zion-slemmons -
Category
Documents
-
view
225 -
download
0
Transcript of Dreamweaver CS3 Concepts and Techniques Chapter 4 Forms.
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• Discuss form design
Chapter 4: Forms 3
Chapter 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
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
Form Processing
• Server-side scripts• Common Gateway Interface (CGI)• <form> tag
– GET method– POST method
• Form components– <input> tag– <select> tag– <textarea> tag
Chapter 4: Forms 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 Chapter 4
• Double-click the DataFiles folder, double-click the Chap04 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
Chapter 4: Forms 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
Adobe on the All Programs submenu, and then click Adobe Dreamweaver CS3 on the Adobe submenu
• If necessary, display the panel groups• Click the Files panel box arrow and then click
Colorado Parks on the Files pop-up menu
Chapter 4: Forms 9
Starting Dreamweaver and Opening the Florida Parks Web Site
Chapter 4: Forms 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 SHIFT+ENTER 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
Chapter 4: Forms 11
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 SHIFT+ENTER 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. Apply text color #336633 to the heading. Deselect the text and then press the ENTER key.
• Click View on the menu bar, point to Visual Aids, and if necessary, deselect the CSS Layout Outlines and AP Element Outlines commands.
• Click the Save button on the Standard toolbar.• Hide the panel groups and collapse the Property inspector, if
necessary.
Chapter 4: Forms 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
Chapter 4: Forms 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
Chapter 4: Forms 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
Chapter 4: Forms 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 mailto:[email protected] (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
Chapter 4: Forms 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
Chapter 4: Forms 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 Colorado’s 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
Chapter 4: Forms 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
Chapter 4: Forms 23
Formatting the Form
• Click the Align Right button in the Property inspector
• Click the <table> 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
Chapter 4: Forms 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
Chapter 4: Forms 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
Chapter 4: Forms 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
Chapter 4: Forms 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
Chapter 4: Forms 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
Chapter 4: Forms 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 CTRL+S to save the page
Chapter 4: Forms 31
Adding Descriptive Labels and Single-Line Text Fields to the Hotel Reservations Form
Chapter 4: Forms 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 SHIFT+ENTER to add a line break
Chapter 4: Forms 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 SHIFT+ENTER 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
Chapter 4: Forms 34
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 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
Chapter 4: Forms 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
Chapter 4: Forms 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 tab
• 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
Chapter 4: Forms 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• Type double as the Value and then press the
TAB key• Type Suite as the third Item Label
Chapter 4: Forms 39
Creating a Scrolling List
• Type suite as the Value and then press the TAB key
• Type Luxury Suite as the fourth Item Label.• 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
Chapter 4: Forms 41
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• 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
Chapter 4: Forms 42
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• Click the number 1 in the Initially selected box in
the Property inspector
Chapter 4: Forms 44
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
Chapter 4: Forms 45
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
Chapter 4: Forms 46
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 ID text box and type park_web_sites
• Click the Select first item after URL change check box
Chapter 4: Forms 47
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
Chapter 4: Forms 49
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 tab• 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 50
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
Chapter 4: Forms 52
Adding the Submit and Reset Buttons
• If necessary, scroll down and then click row 11, column 1 (Figure 4-71)
• Click the Button button on the Forms tab. If the Input Tag Accessibility Attributes dialog box is displayed, click the Cancel button
• Click row 11, column 2, and then click the Button button on the Forms tab
Chapter 4: Forms 53
Adding the Submit and Reset Buttons
• Type reset in the Button name text box 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
Chapter 4: Forms 55
Opening the Volunteer.htm Web Page
• If necessary, 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
Chapter 4: Forms 56
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 tab• In the Property inspector, type newsletter as
the form name• Uses 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
Chapter 4: Forms 57
Adding a Form and Table to the Volunteer.htm Web Page
• 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 text box and type newsletter_form
as the entry• Click the Align button in the Property inspector, and then
center the table• Enter #336633 in the Brdr color hexadecimal text box
and then press the ENTER key
Chapter 4: Forms 58
Adding a Form and Table to the Volunteer.htm Web Page
• Select row 1 and then merge the cells• Click row 1, type Colorado National Parks
as the entry, and then press SHIFT+ENTER to insert a line break
• Type Newsletter Information and then select the two lines of text
• Apply Heading 2 and 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
Chapter 4: Forms 60
Adding an E-mail Address and 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 tab• 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
Chapter 4: Forms 62
Adding a Radio Group
• Click row 3, column1. Type I am interested in receiving a newsletter and then press the TAB key
• Point to the Radio Group button on the Forms tab• Click the Radio Group button• Type newsletter and then click the first
instance of Radio in the Label field• Type Daily as the Label and then press the TAB
key
Chapter 4: Forms 63
Adding a Radio Group
• Type daily as the Value• Press the TAB key, type Weekly in the Label
field, and then press the TAB key• Type weekly as the entry• 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 (<br> tags) radio button
• Click the OK button
Chapter 4: Forms 65
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
• Click row 4, column 2, and then click the Button button on the Forms tab
• 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
Chapter 4: Forms 66
Adding the Submit and Reset Buttons to the Volunteer.htm Form
Chapter 4: Forms 67
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 as the entry
• Select the text Colorado National Parks Volunteer Association and Parks Hotel Reservations and create a link to the hotel_form.htm Web page
• Save the create a link to the volunteer.htm Web page. Select the text Colorado National 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 natl_parks.htm Web page
Chapter 4: Forms 68
Adding Links to the Volunteer.htm, Hotel_Form.htm, and Natl_Parks.htm Web Pages
• 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• Select the Colorado National Parks text and then
create a link to the natl_parks.htm Web page• Save the volunteer.htm Web page
Chapter 4: Forms 69
Adding Links to the Volunteer.htm, Hotel_Form.htm, and Natl_Parks.htm Web Pages
• 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• 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
Chapter 4: Forms 70
Adding Links to the Volunteer.htm, Hotel_Form.htm, and Natl_Parks.htm Web Pages
• 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. Close the browser
Chapter 4: Forms
Adding Links to the Volunteer.htm, Hotel_Form.htm, and Natl_Parks.htm Web Pages
71
Chapter 4: Forms 72
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• If necessary, click anywhere inside the form. Click
<form#hotel_form> in the tag selector. Click the Add behavior button in the Behaviors panel and then point to Validate Form on the pop-up menu
Chapter 4: Forms 73
Adding the Validate Form Behavior
• Click Validate Form• Click the Value Required check box• Click the text input “address” and then click Value
Required for the “address” field• Repeat the above step for the city, state, and zip
fields• Click input “email” (RisEmail) in the Fields box. If
necessary, click the Value Required check box, and then click the Email address radio button
Chapter 4: Forms 74
Adding the Validate Form Behavior
• Click the OK button• Click anywhere in the Document window (except
in the form) to deselect the form• Click the Save button on the Standard toolbar
Chapter 4: Forms 75
Viewing and Testing the Forms
• Press the F12 key. If an information bar is displayed, click the bar to allow the content
• 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
Chapter 4: Forms 76
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 77
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 Windows 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
Chapter 4: Forms 78
Adding Behaviors, Viewing, and Testing the Volunteer.htm Form
Chapter 4: Forms 79
Closing the Web Site and Quitting Dreamweaver
• Click the Close button on the upper-right corner of the Dreamweaver title bar
Chapter 4: Forms 80
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• Discuss form design
Chapter 4: Forms 81
Chapter 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
Chapter 4: Forms 82
Chapter Summary
• Describe and add form buttons to a form• Describe form accessibility options• Apply behaviors to a form• View and test a form
