1. CIS101 Introduction to Computing Week 08

2. Agenda Your questions JavaScript text Resume project HTML Project Six This week online Next class

3. CIS101 JavaScript Text JavaScript Text is in the PLV bookstore Bring it to class next week

4. The resume project Final resume due next class meeting Counts as 10% of final grade Will be graded on A, B, C scale Complete resume along with any required image files must be uploaded to your personal Web space Link from index.htm to your resume

5. What to hand in Submit printout of html code Open resume code in 1 st page 2000 then select File, print Submit Printout of resume Open resume in browser then select File, print Include your name on all printouts!

6. HTML Project Six Describe the different form controls Use the tag Create radio buttons Create a text field Create a textarea field

7. Project six cont. Use the tag Create a selection menu Insert options into a selection menu Create a Submit button Create a Reset button

8. What are forms? Forms allow Web sites to collect and submit information in an automated standardized way Forms interact with Web page visitors in a variety of ways: Get feedback about the Web page Find out who is visiting the Web page Sell products or services Act as a guestbook

9. Creating Web Page forms A Web page form has three components FORM tag, which contains the information necessary to process the form Input controls Submit button, which sends the data to be processed

10. Input controls An input control is a type of input mechanism on a form A data input control allows a user to simply make a selection A text input control allows the user to enter text into the control (see table 6-1 on p. 6.06)

11. Input controls Each input control has the following one or two attributes NAME: Identifies the specific information that is being sent All controls have a NAME VALUE: The data that is contained in the named input control When user clicks submit button, NAME and VALUE are sent See figure 6-18 on p. 6-18 for sample of data submitted from form

12. Start project six Create project six folder on your desktop Copy the following files into project six folder from f: drive survey1.htm survey2.htm Start 1 st Page 2000 and open survey1.htm for editing

13. Attributes METHOD specifies how the form’s data is sent to the server METHOD=POST sends a separate data file to the URL another option is METHOD=GET, we won’t use it This project will utilize the POST method

14. Attributes cont. ACTION: specifies the action that will be taken when the form is submitted For this project data will be sent via e-mail Another alternative is to send data to Web server (see p. 6.11) Web sites can process information from forms using Common Gateway Interface (CGI) scripting

15. Adding Radio Buttons Project has two sets of radio buttons to allow the visitor to select only one option from a list of options Visitors can select only one item per group Radio buttons that have the same name belong to the same group (see p. 6.13)

16. Submit and reset buttons Submit sends a file like the one displayed in figure 6-18 (p. 6.18) to the specified e-mail address Reset clears data from form fields

17. Using Selection Menus The SELECT control creates a selection menu This control only allows the visitor to choose pre-defined choices There are four types of selection menus (see p. 6.23 for examples)

18. Open up survey2.htm Save survey1.htm Open up survey2.htm using 1 st Page 2000 You will add selection menus to this Web page Radio buttons p. 6.26 Selection controls and menu p. 6.27 Add submit and reset buttons p. 6.30

19. Testing the Submit Buttons SUBMIT currently sends file to pretend e-mail address (ahs@isp.com) To test out your code, replace ahs@isp.com with your e-mail address in both survey1.htm and survey2.htm Then test the page: Open it in a browser Enter values in all controls Click the Submit button Check your e-mail to see if file arrived

20. This week online Readings Concepts Chapter 7, “Storage” HTML Project Six This week’s Quiz Concepts Chapter 7, “Storage”

21. Next class meeting Bring your JavaScript book to class We will begin new topic in class next week