Chapter 8 Collecting Data with Forms. Chapter 8 Lessons Introduction 1.Plan and create a form 2.Edit and format a form 3.Work with form objects 4.Test

Chapter Chapter 88

Collecting Data with FormsCollecting Data with Forms

Chapter 8 LessonsChapter 8 Lessons

Introduction1. Plan and create a form2. Edit and format a form3. Work with form objects4. Test and process a form

Collecting Data with FormsCollecting 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

– Simple: one form object and a button that submits information to a web server

– Complex: collect contact information• All forms are connected to an application that processes

the information that the form collects– Information can be stored in Database or simply sent to you in

an email message

IntroductionIntroduction

Planning FormsPlanning Forms

• Steps:1. Write down information

you want to collect2. Make a sketch of the form• Planning will save you

time 3. Create the form

• Organize information in a logical manner– Ex. Name is collected

before address

• Web users will usually only fill information that is required or at the top half of a form

Lesson 1: Plan and Create a FormLesson 1: Plan and Create a Form

Creating FormsCreating Forms

• To create a form on a Web page:1. Use the Insert Form button in the Forms category of the Insert

bar Dashed red outline appears around the form

2. Configure the form Should “talk” to the scripts or e-mail server

and processes the information submitted by the viewer Should have some script or program that will process the

information


Processing Form InformationProcessing Form Information

• Server-side scripting– Server-side applications that

reside on your web server and interact with the information collected in the form

– Examples: Common Gateway Interface (CGI); Cold Fusion; Java Server Page (JSP), Active Server Pages (ASP)

• Client-side scripting– Form is processed on the

user’s computer– Script resides on the web page– Examples: JavaScript

• There are two primary types of programs that can process the information your form collects:


Processing Form Information – cont.Processing Form Information – cont.

• Ways to process form information:– Collect the information from the form and email it to the

website contact person– Form data can be stored in a database to use at a later date– Collect the form data in a database and send it in an email

message– Form data be processed instead of stored


Setting Form PropertiesSetting Form Properties

• Use the Property Inspector to:– specify the application

that will process the form information

– specify how the information will be sent to the processing application

• 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


Setting Form Properties – cont.Setting Form Properties – cont.

• GET Method:– Data collected in the form

sent to the server attached to the URL or file included in the Action Property

– Data sent limited to 8KB or less

• POST Method:– The Form data sent to the

processing script as secure binary or encrypted file

– No size limit

• Form ID property:– Specifies a unique name for

the form– String of alphanumeric

characters with no spaces• Target property:

– Specify the window in which you want the form data to be processed


Form Controls in the Property InspectorForm Controls in the Property Inspector

Form

Form Properties

Form ID property Method property Action property Target property


Understanding CGI ScriptsUnderstanding CGI Scripts

• CGI is one of the most popular tools used to collect form data

• CGI allows:– a web browser to work directly

with the programs that are running on the server and

– makes it possible for a website to change in response to user input

• CGI programs can be written in the computer languages Perl or C, depending on the type of server that is hosting your website


Using Tables to Layout a FormUsing Tables to Layout a Form

• Use CSS or tables to lay out forms• Use table cells to make sure that your

labels and form objects appear in the exact positions you want on a web page

• You create the table within the form outline or area

• If you use a table to position data in a form, you will need to create or modify CSS rules to format the labels and data fields, such as your horizontal and vertical alignment

Lesson 2: Edit and Format a FormLesson 2: Edit and Format a Form

Form Outline identified by red dotted line

Adding Labels to Form ObjectsAdding Labels to Form Objects

• Include form field labels so viewers know what information you want them to enter in each field of the form

• Use simple and obvious labels– If not possible, explain

information to be collected in short paragraph

• 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 Panel

Lesson 2: Edit and Format a FormLesson 2: Edit and Format a Form

Understanding Form ObjectsUnderstanding 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– Examples: checkboxes, text

boxes, radio buttons– Also called form elements, form

controls or fields

Lesson 3: Work with Form ObjectsLesson 3: Work with Form Objects

Understanding Form Objects – cont.Understanding Form Objects – cont.

• Text fields:– Most common type of form object– Used for collecting a string of characters– Ex. Names, address, password

• Text area fields:– A text field that can store several lines of text– Ex. Descriptions of problems, answer long questions



• Checkboxes:– Create a list of options from which a viewer can make multiple

selections– A group of Check Boxes is called a Check Box Group– Ex. Series of check boxes listing hobbies that viewer can select

from• Radio buttons:

– Provides a list of options from which on only one selection can be made



• Radio groups:– Group of radio buttons– Allowed only one selection from within group– Ex. Ask viewers to select age, salary range, answer yes/no

questions• Select (List/Menu):

– Menus allow users to select one option from a list of choices– Lists allow users to select one or more options from a list of

choices



• Hidden fields:– Viewer does not know

that the information is being sent to web server

– Collects information that a viewer does not enter and cannot see on the screen

• Image fields:– Create buttons that

contain custom graphics

• Jump menus:– Navigational menus that

let viewers go quickly to different pages



• Submit:– users click to transfer

the form data to the web server

• Reset:– lets users clear data from a

form and reset it to its default values, or a custom button to trigger an action that you specify on the page


Website with Several Form ObjectsWebsite with Several Form Objects

Radio button

Submit button

Menu list

Text field

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


Creating User-Friendly FormsCreating User-Friendly Forms

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

• Provide visual clues such as a different font color or other notion that label required fields– Use notes at top or bottom of

form explaining that all fields marked with asterisk are required

• 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

Lesson 4: Test and Process a FormLesson 4: Test and Process a Form

Testing Dynamic ContentTesting Dynamic Content

• Dynamic content– Web pages that contains content that allows the user to

interact with the page by clicking or typing, and then responds to this input in some way

• Testing server– Used to evaluate how the form works and the data is processed

(Usually your local computer)

• Static content– Page content that does not change or allow user interaction

Lesson 4: Test and Process a FormLesson 4: Test and Process a Form

Documents

Chapter 8 Collecting Data with Forms. Chapter 8 Lessons Introduction 1.Plan and create a form 2.Edit and format a form 3.Work with form objects 4.Test