Transcript Collect data with forms

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 and process a form
Introduction
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
– 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
Lesson 1: Plan and Create a Form
Planning Forms
• Steps:
1. Write down information
you want to collect
2. 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 Form
Creating 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
Lesson 1: Plan and Create a Form
Processing Form Information
• There are two primary types of programs that can process
the information your form collects:
• 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
Lesson 1: Plan and Create a Form
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
Lesson 1: Plan and Create a Form
Setting 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
Lesson 1: Plan and Create a Form
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
Lesson 1: Plan and Create a Form
Form Controls in the Property Inspector
Form
Form
Properties
Form ID property
Method property
Action property
Target property
Lesson 1: Plan and Create a Form
Understanding 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
Lesson 2: Edit and Format a Form
Using 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
Form Outline identified by red dotted line
Lesson 2: Edit and Format a Form
Adding 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 3: Work with Form Objects
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
– Examples: checkboxes, text
boxes, radio buttons
– Also called form elements, form
controls or fields
Lesson 3: Work with Form Objects
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
Lesson 3: Work with Form Objects
Understanding Form Objects – cont.
• 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
Lesson 3: Work with Form Objects
Understanding Form Objects – cont.
• 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
Lesson 3: Work with Form Objects
Understanding Form Objects – cont.
• 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
Lesson 3: Work with Form Objects
Understanding Form Objects – cont.
• 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
Lesson 3: Work with Form Objects
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
Lesson 4: Test and Process a Form
Creating 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 Form
Testing 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