Chapter PowerPoint

Chapter 8

Collecting Data with Forms

© 2010 Delmar, Cengage Learning

Chapter 8 Lessons

1. Plan and create a form

2. Edit and format a form

3. Work with form objects

4. Test and process a form

© 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


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 command

Form outline


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

Insertion point between Label tags in Code view


Label button

Understanding Form Objects

• 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



• 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

Text field

Radio button

Menu list

Submit button

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

New text field

ID


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

Add button

New item labels

Values of new items


Fig. 28: Property Inspector Showing

Properties of Selected Hidden Field

Hidden Field button

Hidden Field

Hidden Field text box


Fig. 29: New Submit and Reset

Buttons Added to Form

Button button

Submit button

Reset button

Button name text box

Value text box


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


Chapter PowerPoint

Related documents

Products

Support

Chapter PowerPoint

Related documents

Add this document to collection(s)

Add this document to saved

Suggest us how to improve StudyLib