Collecting Data with Forms - PowerPoint PPT Presentation

1 / 22
About This Presentation
Title:

Collecting Data with Forms

Description:

Chapter 8 Collecting Data with Forms * * * * * * * * * * Chapter 8 Lessons Introduction Plan and create a form Edit and format a form Work with form objects Test and ... – PowerPoint PPT presentation

Number of Views:148
Avg rating:3.0/5.0
Slides: 23
Provided by: clu75
Category:

less

Transcript and Presenter's Notes

Title: Collecting Data with Forms


1
Chapter 8
  • Collecting Data with Forms

2
Chapter 8 Lessons
  • Introduction
  • Plan and create a form
  • Edit and format a form
  • Work with form objects
  • Test and process a form

3
Collecting 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

4
Planning 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

5
Creating 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

6
Processing 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

7
Processing 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

8
Setting 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

9
Setting 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

10
Form Controls in the Property Inspector
Lesson 1 Plan and Create a Form
Form
Form Properties
Method property
Action property
Target property
Form ID property
11
Understanding 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

12
Using 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
13
Adding 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

14
Understanding 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

15
Understanding 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

16
Understanding 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

17
Understanding 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

18
Understanding 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

19
Understanding 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

20
Website 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
21
Creating 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

22
Testing 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
Write a Comment
User Comments (0)
About PowerShow.com