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

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 message Introduction

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 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 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 There are two primary types of programs that can process the information your form collects: Lesson 1: Plan and Create a Form

Processing Form Information – cont. Ways to process form information: – Collect the information from the form and 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 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 propertyAction 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 1: Plan and Create 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 Lesson 2: Edit and Format a Form Form Outline identified by red dotted line

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 2: Edit and Format a Form

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 Radio button Submit button Menu list Text field American Airlines website used with permission from American Airlines – Lesson 3: Work with Form Objects

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 Lesson 4: Test and Process a Form