1. 1 PROJECT 5 WEB/HTML COMPUTER PURCHASE FORM Management Information Systems, 9 th edition, By Raymond McLeod, Jr. and George P. Schell © 2004, Prentice Hall, Inc.

2. 2 Learning Objectives Understand how forms work to capture information from the Web page user. Understand the use of text boxes and text areas to acquire typed input from a user. Learn how to create a radio button and a check box to acquire user input from a mouse click. Learn how to create a choice of options from a drop-down menu.

3. 3 Introduction Forms provide a mechanism for gathering information from users who visit a Web page This project involves the generation of a form for a user to purchase a computer This project creates the form but does not provide the Web browser with instructions for processing the form results Information from a form is generally e-mailed back to the firm or assimilated into its database

4. 4 EXAMPLE This example creates a form to order a computer from Acme Computer Builders. The completed Web page form is shown in Figure P5.1 It represents the five most common techniques for capturing information from a Web site: –A text field –A drop-down menu –A radio button technique (such as for the monitor) –The check box (similar to a radio button but the user may select one or more of the choices) –A text area box for comments that allows the user to enter several lines of data into a single input

5. 5 SECTIONS OF THE EXAMPLE FORM The form begins in the same manner as Project 3, with the first information to be gathered aimed at helping the firm contact the customer From Figure P5.3 you can see that the customer information in the example is actually enclosed in a table The next section of the Web page asks about the computer to be purchased The drop-down icon is shown in Figure P5.1 just to the right of the phrase “select a computer” and the zip code field has a default value already entered into the field The next section of the form asks the user to choose a monitor Figure P5.1 presents check boxes for additional features on the computer to be purchased The submit command is shown in line 64 of Figure P5.2

6. 6

7. 7

8. 8

9. 9 SAVING THE EXAMPLE You must save the document as an HTML file. The default type of document in Notepad is a text document and the.txt file extension will be automatically added to the file name if the file is saved in “text” mode and a Web browser will not interpret text document types Enter a file name such as “Acme.htm” for your project but without the quotation marks The file type chosen (i.e., “Save as type”) must be “All Files” and the encoding is “ANSI”

10. 10 VIEW THE WEB PAGE Once the Web page has been saved you can view it to see if it works correctly If you need to make any corrections, choose the Notepad editor again Edit the document’s HTML code and save the document again. It is very important that each time you save the HTML file using Notepad, the file type is “All Files” Reopen the Web browser and choose the “View” command followed by the “Refresh” subcommand Repeat the process until you are satisfied with your Web page

11. 11 ASSIGNMENT 1. You are required to make an order form for Creation Computers. A sample of what your results should look like is shown in Figure P5.4. Notice that the name “Creation Computers” is in a paragraph at the top of the page and is both centered and in a font size larger than the rest of the sample. 2. Use text fields to capture the last name, first name, and e-mail address of the customer. Each name field should be allowed a size of 20 characters of text and the e-mail address should have a field size of 30. The default e-mail domain of “@aol.com” should be in the e-mail field. The text fields are in a table that has two columns and three rows. “Last Name,” “First Name,” and “E-mail Address” are in the first column. Notice that they are in data cells aligned to the right so that the label is aligned next to the input field.

12. 12 ASSIGNMENT 3. A drop-down menu is used to select the computer model to purchase. The phrase “make a selection” is shown and the other choices are “Standard Creation,” “Deluxe Creation,” and “Creation Notebook.” 4. Use radio buttons to find out how the customer will pay for the purchase. Notice that the “Cash” choice should be checked as the default response. 5. Check boxes are used to ask customers how they learned about Creation Computers. 6. A comments box should be made that is five rows deep and 50 characters across. 7. Create a submit button and a reset button similar to those in the sample of Figure P5.4.

13. 13

14. 14 END OF PROJECT 5