Chapter 8
Download
1 / 22

Chapter 8 - PowerPoint PPT Presentation


  • 104 Views
  • Uploaded on

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 process a form. Introduction. Collecting Data with Forms.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' Chapter 8' - doris-barber


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Chapter 8

Chapter 8

Collecting Data with Forms


Chapter 8 lessons
Chapter 8 Lessons

Introduction

  • Plan and create a form

  • Edit and format a form

  • Work with form objects

  • Test and process a form


Collecting data with forms

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


Planning forms

Lesson 1: Plan and Create a Form

Planning Forms

  • 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


Creating forms

Lesson 1: Plan and Create a 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

      • Should have some script or program that will process the information


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


Processing form information cont

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


Setting form properties

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


Setting form properties cont

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


Form controls in the property inspector

Lesson 1: Plan and Create a Form

Form Controls in the Property Inspector

Form

Form Properties

Method property

Action property

Target property

Form ID property


Understanding cgi scripts

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


Using tables to layout a form

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


Adding labels to form objects

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


Understanding form objects

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


Understanding form objects cont

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


Understanding form objects cont1

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


Understanding form objects cont2

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


Understanding form objects cont3

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


Understanding form objects cont4

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


Website with several form objects

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


Creating user friendly forms

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


Testing dynamic content

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


ad