Chapter 8

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

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

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

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

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

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

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

10. 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

11. 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

12. 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

13. 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

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

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

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

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

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

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

20. 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

21. 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

22. 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