1. © 2011 Delmar, Cengage Learning Chapter 9 Collecting Data with Forms

2. © 2011 Delmar Cengage Learning 1.Plan and create a form 2.Edit and format a form 3.Work with form objects 4.Test and process a form Chapter 9 Lessons

3. © 2011 Delmar Cengage Learning Collecting Data with Forms A form on a web page consists of form objects into which users type information or from which they make selections. Form labels identify the form object by its function.

4. © 2011 Delmar Cengage Learning Collecting Data with Forms Tools You’ll Use

5. © 2011 Delmar Cengage Learning Plan and Create a Form When you are planning your form content, you should organize it in a logical order that will make sense to users. The most important part should be “above the fold” which is the part of the page you see before you scroll.

6. © 2011 Delmar Cengage Learning Plan and Create a Form Server-side scripting uses applications that reside on your web server and interact with the form information collected.

7. © 2011 Delmar Cengage Learning Plan and Create a Form Common types of server-side applications: –Common Gateway Interface (CGI) –Cold Fusion –Java Server Page (JSP) –Active Server Pages (ASP)

8. © 2011 Delmar Cengage Learning Plan and Create a Form The most common types of scripts stored on a web page are created with a scripting language called JavaScript or Jscript. The Action property in the Property inspector specifies the application or script that will process the form data.

9. © 2011 Delmar Cengage Learning Plan and Create a Form Form controls in the Property inspector Form Form ID propertyMethod propertyAction propertyTarget property Form properties

10. © 2011 Delmar Cengage Learning Plan and Create a Form The Method Property specifies HyperText Transfer Protocol (HTTP) used to send the form data to the web server. The GET method specifies that ASCII data collected in the form will be sent to the server appended to the URL.

11. © 2011 Delmar Cengage Learning Plan and Create a Form The Post method specifies that the form data should be sent to the processing script as a binary or encrypted file. The Form name property specifies a unique name for the form. The Target property lets you specify the window in which you want the form data to be processed.

12. © 2011 Delmar Cengage Learning Plan and Create a Form CGI scripts: –Allows a web browser to work directly with the programs that are running on the server –Makes it possible for a website to change in response to user input

13. © 2011 Delmar Cengage Learning Edit and Format a Form You can use CSS or tables to help you lay out forms. Website that uses tables to lay out a form

14. © 2011 Delmar Cengage Learning Edit and Format a Form When you create a form you need to include form field labels Website that clearly marks labels for form fields

15. © 2011 Delmar Cengage Learning Work with Form Objects Form objects are also called: –Form elements –Form controls –Form inputs –Form fields

16. © 2011 Delmar Cengage Learning Work with Form Objects Text fields are the most common type of form object and are used for collecting a string of characters. A text area field is a text field that can store several lines of text.

17. © 2011 Delmar Cengage Learning Work with Form Objects You can use check boxes to create a list of options from which a user can make multiple selections. You can use radio buttons to provide a list of options from which only one selection can be made. A radio group is a group of radio buttons.

18. © 2011 Delmar Cengage Learning Work with Form Objects Website form with several form objects

19. © 2011 Delmar Cengage Learning Work with Form Objects You can insert a menu when you want a user to select a single option from a list of choices. You can insert a list when you want a viewer to select one or more options from a list of choices.

20. © 2011 Delmar Cengage Learning Work with Form Objects Hidden fields make it possible to provide information to the web server and form-processing script without the user knowing the information is being sent. You can use an image field to create buttons that contain custom graphics.

21. © 2011 Delmar Cengage Learning Work with Form Objects A file field lets the user upload sample files to your website. A Submit button is what users click to transfer form data. The Reset button lets users clear data from a form.

22. © 2011 Delmar Cengage Learning Work with Form Objects A custom button triggers an action that you specify on the page. Jump menus let users go quickly to different pages in your site. Label tags clearly identify each form object and are read with screen readers.

23. © 2011 Delmar Cengage Learning Work with Form Objects Using Adobe Marketplace and Exchange Adobe Marketplace & Exchange is a central storage location for program extensions, known as add-ons.

24. © 2011 Delmar Cengage Learning Test and Process a Form After you create a form, you should test it to make sure it works correctly. When a form has several required fields, you should highlight those fields in a different color. When your form is finished, you should have people test it before you publish it.

25. © 2011 Delmar Cengage Learning Test and Process a Form Adding visual clues for required fields Hint for userAsterisks added after labels