© 2010 delmar, cengage learning chapter 8 collecting data with forms

© 2010 Delmar, Cengage Learning

Chapter 8

Collecting Data with Forms

© 2009 Delmar Cengage Learning

1. Plan and create a form

2. Edit and format a form

3. Work with form objects

4. Test and process a form

Chapter 8 Lessons

© 2009 Delmar Cengage Learning

Collecting Data with Forms

• Adding a form to a Web page provides interactivity between your viewers and your business

• Use forms to collect data from viewers• A form on a Web page consists of form

objects• All forms are connected to an application

that processes the information that the form collects

© 2009 Delmar Cengage Learning

Planning Forms

• Plan a new form• Make a sketch of the form• Decide what information you want to

collect from user

© 2009 Delmar Cengage Learning

Planning a Form

• Write down the information you want to collect and the order in which you want to collect it

• Organize the information in a logical order• Make a sketch of the form

© 2009 Delmar Cengage Learning

Fig. 1: Sketch of Web Form

© 2009 Delmar Cengage Learning

Creating Forms

• To create a form on a Web page:– Use the Insert Form button in the Forms

category of the Insert bar Dashed red outline appears around the

form– Configure the form

Should “talk” to the scripts or e-mail server

and processes the information submitted by the viewer

© 2009 Delmar Cengage Learning

Processing Form Information

• There are two primary types of programs that can process the information your form collects:– Server-side scripting

• Server-side applications– Client-side scripting

• Scripts on the Web page itself

© 2009 Delmar Cengage Learning

Server-side Scripting

• Uses applications that reside on the Web Server and interacts with the information collected in the forms

• Examples include:– Common Gateway Interface (CGI)– Cold Fusion– Active Server Pages (ASP)

© 2009 Delmar Cengage Learning

Client-side Scripting

• Form is processed on the user’s computer• Script resides on Web page (not on server)• Examples include:

– JavaScript – Jscript

© 2009 Delmar Cengage Learning

Setting Form Properties

• Action: specifies the application or script that will process the form information/data

• Method: specifies the HTTP method used to send the form data to the Web server– GET– POST

© 2009 Delmar Cengage Learning

Fig. 2: Form Controls in the Property Inspector

Form

Form properties

Form name property

Method property

Action property

Target property

© 2009 Delmar Cengage Learning

Fig. 3: CGI Process on Web Server

© 2009 Delmar Cengage Learning

Insert a Form

• Before you can add form objects to your form, you must create a form area

• The form area will have a name and set the Action and Method of the form

© 2009 Delmar Cengage Learning

Fig. 4: New Form Inserted on Feedback Page

Form outline

Form command

© 2009 Delmar Cengage Learning

Fig. 5: Property Inspector Showing Properties of Selected Form

Form ID box Method specifying data transfer method

Method list arrow

© 2009 Delmar Cengage Learning

Edit and Format a Form

• Insert a table to create a basic structure for the form

• Organize the form into different categories by inserting fieldsets

• Add and format labels

© 2009 Delmar Cengage Learning

Using Tables to Layout a Form

• To make sure that your labels and form objects appear in the exact positions you want on a web page, you can place them in table cells

• You create the table within the form outline or area

© 2009 Delmar Cengage Learning

Fig. 6: Website Using a Table to Lay Out a Form

Federal Bureau of Investigation website

– www.fbi.gov

© 2009 Delmar Cengage Learning

Using Fieldsets to Group Form Objects• Fieldset: HTML tag used to group related

form elements• Can have multiple fieldsets per page• To create a fieldset, use the Fieldset button

on the Insert bar

© 2009 Delmar Cengage Learning

Adding Labels to Form Objects• You can add labels to a form using the

following methods:– Type a label in the appropriate table cell

of your form– Use the Label button on the Forms group

of the Insert bar • Use simple and obvious labels

© 2009 Delmar Cengage Learning

Fig. 7: Website Using Clearly Marked Labels

Clearly labeled groups

Clearly labeled options within groups

Southwest Airlines website used with permission from Southwest Airlines – www.southwest.com

© 2009 Delmar Cengage Learning

Fig. 9: Table Dialog Box

Top header option

Table summary

© 2009 Delmar Cengage Learning

Fig. 11: Typing and Formatting Labels in Table Cells

© 2009 Delmar Cengage Learning

Fig. 12: Adding a Label to a Form

Label button

Insertion point between Label tags in Code view

© 2009 Delmar Cengage Learning

• A form provides a structure in which you can place form objects

• Form objects allow viewers to provide information and interact with the website– For example: checkboxes, text boxes– Also called form elements, form controls

or fields

Understanding Form Objects

© 2009 Delmar Cengage Learning

Understanding Form Objects

• Text fields• Text area fields• Checkboxes• Radio buttons• Radio groups

• Menu/list• Hidden fields• Image fields• Jump menus

© 2009 Delmar Cengage Learning

• Text fields are used for collecting a string of characters

• A text area field is a text field that can store several lines of text

• Checkboxes are used to create a list of options from which a viewer can make multiple selections

Understanding Form Objects

© 2009 Delmar Cengage Learning

• Radio buttons provide a list of options from which only one selection can be made– A group of radio buttons is called a radio

group• Menus are used to select a single option

from a list of choices• Lists are used to select one or more options

from a list of choices

Understanding Form Objects

© 2009 Delmar Cengage Learning

• Hidden fields provide information to the Web server and form processing script without the viewer knowing that the information is being sent

• The Image Field button is used to create buttons that contain custom graphics

• Jump menus are navigational menus

Understanding Form Objects

© 2009 Delmar Cengage Learning

Fig. 14: Website with Several Form Objects

Radio button

Submit button

Menu list

Text field

American Airlines website used with permission from American Airlines – www.aa.com

© 2009 Delmar Cengage Learning

Using Dreamweaver Exchange

• To obtain form controls designed for creating specific types of forms, such as online tests and surveys, you can visit Adobe Dreamweaver Exchange

• The Adobe Exchange site is a central storage location for program extensions, also known as add-ons

© 2009 Delmar Cengage Learning

Fig. 17: Property Inspector Showing Properties of Selected Text Field

Text Field button

ID

New text field

© 2009 Delmar Cengage Learning

Fig. 18: Form with Single-Line Text Fields Added

© 2009 Delmar Cengage Learning

Fig. 20: Input Tag Accessibility Attributes Dialog Box for Fishing Label

Fishing ID

Fishing label

Wrap with label tag option button

After form item option button

© 2009 Delmar Cengage Learning

Fig. 21: Property Inspector with Check Box Properties Displayed

Fishing checkbox selected

Checkbox name = fishing Checked value = fish Initial state = Unchecked

© 2009 Delmar Cengage Learning

Fig. 23: Radio Group Dialog Box

First instance

Second instance

Line breaks (<br> tags) option button

© 2009 Delmar Cengage Learning

Fig. 26: List Values Dialog Box

Addbutton

New item labels

Values of new items

© 2009 Delmar Cengage Learning

Fig. 28: Property Inspector Showing Properties of Selected Hidden Field

Hidden Field text box

Hidden Field

Hidden Field button

© 2009 Delmar Cengage Learning

Fig. 29: New Submit and Reset Buttons Added to Form

Submit button

Reset button

Button name text box

Value text box

Button button

© 2009 Delmar Cengage Learning

Test a Form

• After creating a form, it should be tested to make sure:– It works correctly– It is easy to use

• You should always have several people test your form before you publish it

© 2009 Delmar Cengage Learning

Creating User-Friendly Forms

• Label required fields (use colored *)• Forms should have good contrast between

the color of the text and the color of the table background

• There should be a logical flow for the data fields

• The Submit and Reset buttons should be at the end of the form

© 2009 Delmar Cengage Learning

Testing Dynamic Content

• Dynamic content• Testing server• Static content

© 2009 Delmar Cengage Learning

Fig. 31: Viewing the Feedback Link

Link to feedback page

© 2009 Delmar Cengage Learning

Fig. 32: Testing the Feedback Page