Title: Collecting Data with Forms
1Chapter 8
- Collecting Data with Forms
2Chapter 8 Lessons
- Introduction
- Plan and create a form
- Edit and format a form
- Work with form objects
- Test and process a form
3Collecting Data with Forms
Introduction
- 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
4Planning Forms
Lesson 1 Plan and Create a Form
- Steps
- Write down information you want to collect
- Make a sketch of the form
- Planning will save you time
- 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
5Creating Forms
Lesson 1 Plan and Create a Form
- 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 - Should have some script or program that will
process the information
6Processing Form Information
Lesson 1 Plan and Create a Form
- 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 users computer
- Script resides on the web page
- Examples JavaScript
7Processing Form Information cont.
Lesson 1 Plan and Create a Form
- 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
8Setting Form Properties
Lesson 1 Plan and Create a Form
- 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
9Setting Form Properties cont.
Lesson 1 Plan and Create a Form
- 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
10Form Controls in the Property Inspector
Lesson 1 Plan and Create a Form
Form
Form Properties
Method property
Action property
Target property
Form ID property
11Understanding CGI Scripts
Lesson 1 Plan and Create a Form
- 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
12Using Tables to Layout a Form
Lesson 2 Edit and Format 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
13Adding Labels to Form Objects
Lesson 2 Edit and Format a Form
- 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
14Understanding Form Objects
Lesson 3 Work with 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
15Understanding Form Objects cont.
Lesson 3 Work with Form Objects
- 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
16Understanding Form Objects cont.
Lesson 3 Work with Form Objects
- 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
17Understanding Form Objects cont.
Lesson 3 Work with Form Objects
- 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
18Understanding Form Objects cont.
Lesson 3 Work with Form Objects
- 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
19Understanding Form Objects cont.
Lesson 3 Work with Form Objects
- 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
20Website with Several Form Objects
Lesson 3 Work with Form Objects
Text field
Radio button
Menu list
Submit button
American Airlines website used with permission
from American Airlines www.aa.com
21Creating User-Friendly Forms
Lesson 4 Test and Process a Form
- 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
22Testing Dynamic Content
Lesson 4 Test and Process a Form
- 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