Dreamweaver CS4 Concepts and Techniques Chapter 4 Forms.

85
Dreamweaver CS4 Concepts and Techniques Chapter 4 Forms

Transcript of Dreamweaver CS4 Concepts and Techniques Chapter 4 Forms.

Page 1: Dreamweaver CS4 Concepts and Techniques Chapter 4 Forms.

Dreamweaver CS4Concepts and Techniques

Chapter 4

Forms

Page 2: Dreamweaver CS4 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• Insert a table into a form

Page 3: Dreamweaver CS4 Concepts and Techniques Chapter 4 Forms.

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

Page 4: Dreamweaver CS4 Concepts and Techniques Chapter 4 Forms.

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

Page 5: Dreamweaver CS4 Concepts and Techniques Chapter 4 Forms.

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

Page 6: Dreamweaver CS4 Concepts and Techniques Chapter 4 Forms.

Chapter 4: Forms

Starting Dreamweaver and Creating a New Page on the Alaska Parks Web Site

6

Page 7: Dreamweaver CS4 Concepts and Techniques Chapter 4 Forms.

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

Page 8: Dreamweaver CS4 Concepts and Techniques Chapter 4 Forms.

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

Page 9: Dreamweaver CS4 Concepts and Techniques Chapter 4 Forms.

Chapter 4: Forms 9

Opening a New Document Window

Page 10: Dreamweaver CS4 Concepts and Techniques Chapter 4 Forms.

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

Page 11: Dreamweaver CS4 Concepts and Techniques Chapter 4 Forms.

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

Page 12: Dreamweaver CS4 Concepts and Techniques Chapter 4 Forms.

Chapter 4: Forms

Adding a Background Image to the Hotel_form Page

12

Page 13: Dreamweaver CS4 Concepts and Techniques Chapter 4 Forms.

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

Page 14: Dreamweaver CS4 Concepts and Techniques Chapter 4 Forms.

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

Page 15: Dreamweaver CS4 Concepts and Techniques Chapter 4 Forms.

Chapter 4: Forms

Inserting and Formatting the Page Title

15

Page 16: Dreamweaver CS4 Concepts and Techniques Chapter 4 Forms.

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

Page 17: Dreamweaver CS4 Concepts and Techniques Chapter 4 Forms.

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

Page 18: Dreamweaver CS4 Concepts and Techniques Chapter 4 Forms.

Chapter 4: Forms 18

Inserting a Horizontal Rule

Page 19: Dreamweaver CS4 Concepts and Techniques Chapter 4 Forms.

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

Page 20: Dreamweaver CS4 Concepts and Techniques Chapter 4 Forms.

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

Page 21: Dreamweaver CS4 Concepts and Techniques Chapter 4 Forms.

Chapter 4: Forms 21

Setting the Form Properties

Page 22: Dreamweaver CS4 Concepts and Techniques Chapter 4 Forms.

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.

Page 23: Dreamweaver CS4 Concepts and Techniques Chapter 4 Forms.

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

Page 24: Dreamweaver CS4 Concepts and Techniques Chapter 4 Forms.

Chapter 4: Forms 24

Inserting a Table into a Form

Page 25: Dreamweaver CS4 Concepts and Techniques Chapter 4 Forms.

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

Page 26: Dreamweaver CS4 Concepts and Techniques Chapter 4 Forms.

Chapter 4: Forms 26

Formatting the Form

Page 27: Dreamweaver CS4 Concepts and Techniques Chapter 4 Forms.

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

Page 28: Dreamweaver CS4 Concepts and Techniques Chapter 4 Forms.

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

Page 29: Dreamweaver CS4 Concepts and Techniques Chapter 4 Forms.

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

Page 30: Dreamweaver CS4 Concepts and Techniques Chapter 4 Forms.

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

Page 31: Dreamweaver CS4 Concepts and Techniques Chapter 4 Forms.

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

Page 32: Dreamweaver CS4 Concepts and Techniques Chapter 4 Forms.

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

Page 33: Dreamweaver CS4 Concepts and Techniques Chapter 4 Forms.

Chapter 4: Forms 33

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

Page 34: Dreamweaver CS4 Concepts and Techniques Chapter 4 Forms.

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

Page 35: Dreamweaver CS4 Concepts and Techniques Chapter 4 Forms.

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

Page 36: Dreamweaver CS4 Concepts and Techniques Chapter 4 Forms.

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

Page 37: Dreamweaver CS4 Concepts and Techniques Chapter 4 Forms.

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

Page 38: Dreamweaver CS4 Concepts and Techniques Chapter 4 Forms.

Chapter 4: Forms 38

Adding Check Boxes

Page 39: Dreamweaver CS4 Concepts and Techniques Chapter 4 Forms.

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

Page 40: Dreamweaver CS4 Concepts and Techniques Chapter 4 Forms.

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

Page 41: Dreamweaver CS4 Concepts and Techniques Chapter 4 Forms.

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

Page 42: Dreamweaver CS4 Concepts and Techniques Chapter 4 Forms.

Chapter 4: Forms 42

Creating a Scrolling List

Page 43: Dreamweaver CS4 Concepts and Techniques Chapter 4 Forms.

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

Page 44: Dreamweaver CS4 Concepts and Techniques Chapter 4 Forms.

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

Page 45: Dreamweaver CS4 Concepts and Techniques Chapter 4 Forms.

Chapter 4: Forms 45

Creating a Pop-Up Menu

Page 46: Dreamweaver CS4 Concepts and Techniques Chapter 4 Forms.

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

Page 47: Dreamweaver CS4 Concepts and Techniques Chapter 4 Forms.

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

Page 48: Dreamweaver CS4 Concepts and Techniques Chapter 4 Forms.

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

Page 49: Dreamweaver CS4 Concepts and Techniques Chapter 4 Forms.

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

Page 50: Dreamweaver CS4 Concepts and Techniques Chapter 4 Forms.

Chapter 4: Forms 50

Inserting a Jump Menu

Page 51: Dreamweaver CS4 Concepts and Techniques Chapter 4 Forms.

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

Page 52: Dreamweaver CS4 Concepts and Techniques Chapter 4 Forms.

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

Page 53: Dreamweaver CS4 Concepts and Techniques Chapter 4 Forms.

Chapter 4: Forms 53

Adding a TextArea Text Field

Page 54: Dreamweaver CS4 Concepts and Techniques Chapter 4 Forms.

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

Page 55: Dreamweaver CS4 Concepts and Techniques Chapter 4 Forms.

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

Page 56: Dreamweaver CS4 Concepts and Techniques Chapter 4 Forms.

Chapter 4: Forms 56

Adding the Submit and Reset Buttons

Page 57: Dreamweaver CS4 Concepts and Techniques Chapter 4 Forms.

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

Page 58: Dreamweaver CS4 Concepts and Techniques Chapter 4 Forms.

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

Page 59: Dreamweaver CS4 Concepts and Techniques Chapter 4 Forms.

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

Page 60: Dreamweaver CS4 Concepts and Techniques Chapter 4 Forms.

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

Page 61: Dreamweaver CS4 Concepts and Techniques Chapter 4 Forms.

Chapter 4: Forms

Opening the Volunteer.htm Web Page

61

Page 62: Dreamweaver CS4 Concepts and Techniques Chapter 4 Forms.

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

Page 63: Dreamweaver CS4 Concepts and Techniques Chapter 4 Forms.

Chapter 4: Forms

Adding an E-mail Address

63

Page 64: Dreamweaver CS4 Concepts and Techniques Chapter 4 Forms.

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

Page 65: Dreamweaver CS4 Concepts and Techniques Chapter 4 Forms.

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

Page 66: Dreamweaver CS4 Concepts and Techniques Chapter 4 Forms.

Chapter 4: Forms 66

Adding a Radio Group

Page 67: Dreamweaver CS4 Concepts and Techniques Chapter 4 Forms.

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

Page 68: Dreamweaver CS4 Concepts and Techniques Chapter 4 Forms.

Chapter 4: Forms 68

Adding the Submit and Reset Buttons to the Volunteer.htm Form

Page 69: Dreamweaver CS4 Concepts and Techniques Chapter 4 Forms.

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

Page 70: Dreamweaver CS4 Concepts and Techniques Chapter 4 Forms.

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

Page 71: Dreamweaver CS4 Concepts and Techniques Chapter 4 Forms.

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

Page 72: Dreamweaver CS4 Concepts and Techniques Chapter 4 Forms.

Chapter 4: Forms

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

72

Page 73: Dreamweaver CS4 Concepts and Techniques Chapter 4 Forms.

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

Page 74: Dreamweaver CS4 Concepts and Techniques Chapter 4 Forms.

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

Page 75: Dreamweaver CS4 Concepts and Techniques Chapter 4 Forms.

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

Page 76: Dreamweaver CS4 Concepts and Techniques Chapter 4 Forms.

Chapter 4: Forms

Adding the Validate Form Behavior

76

Page 77: Dreamweaver CS4 Concepts and Techniques Chapter 4 Forms.

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

Page 78: Dreamweaver CS4 Concepts and Techniques Chapter 4 Forms.

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

Page 79: Dreamweaver CS4 Concepts and Techniques Chapter 4 Forms.

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

Page 80: Dreamweaver CS4 Concepts and Techniques Chapter 4 Forms.

Chapter 4: Forms 80

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

Page 81: Dreamweaver CS4 Concepts and Techniques Chapter 4 Forms.

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

Page 82: Dreamweaver CS4 Concepts and Techniques Chapter 4 Forms.

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

Page 83: Dreamweaver CS4 Concepts and Techniques Chapter 4 Forms.

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

Page 84: Dreamweaver CS4 Concepts and Techniques Chapter 4 Forms.

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

Page 85: Dreamweaver CS4 Concepts and Techniques Chapter 4 Forms.

Dreamweaver CS4Concepts and Techniques

Chapter 4 Complete

Forms