© 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


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


Planning Forms

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

collect from user


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


Fig. 1: Sketch of Web Form


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


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


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)


Client-side Scripting

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

– JavaScript – Jscript


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


Fig. 2: Form Controls in the Property Inspector

Form

Form properties

Form name property

Method property

Action property

Target property


Fig. 3: CGI Process on Web Server


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


Fig. 4: New Form Inserted on Feedback Page

Form outline

Form command


Fig. 5: Property Inspector Showing Properties of Selected Form

Form ID box Method specifying data transfer method

Method list arrow


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


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


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

Federal Bureau of Investigation website

– www.fbi.gov


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


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


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


Fig. 9: Table Dialog Box

Top header option

Table summary


Fig. 11: Typing and Formatting Labels in Table Cells


Fig. 12: Adding a Label to a Form

Label button

Insertion point between Label tags in Code view


• 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



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

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


• 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



• 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



• 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



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


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


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

Text Field button

ID

New text field


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


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


Fig. 21: Property Inspector with Check Box Properties Displayed

Fishing checkbox selected

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


Fig. 23: Radio Group Dialog Box

First instance

Second instance

Line breaks (<br> tags) option button


Fig. 26: List Values Dialog Box

Addbutton

New item labels

Values of new items


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

Hidden Field text box

Hidden Field

Hidden Field button


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

Submit button

Reset button

Button name text box

Value text box

Button button


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


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


Testing Dynamic Content

• Dynamic content• Testing server• Static content


Fig. 31: Viewing the Feedback Link

Link to feedback page


Fig. 32: Testing the Feedback Page

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

Documents

delmar cengage learningfig

form data

delmar cengage learningedit

delmar cengage learningserver

delmar cengage learningclient

delmar cengage learninginsert

sketch of web form

form collects3