1. WDMD 170 – UW Stevens Point 1 WDMD 170 Internet Languages eLesson: Working with Forms in JavaScript (NON-audio version) © Dr. David C. Gibbs 2003-04

2. WDMD 170 – UW Stevens Point 2 Tutorial 6 Forms Section A - Working with Forms and Form Elements in JavaScript

3. WDMD 170 – UW Stevens Point 3 Tutorial 6A Topics Section A - Working with Forms in JavaScript –How to use HTML forms –About the submission of forms –How to use the tag –About form elements –How to create and use input fields button, checkbox, password, radio, reset, submit, text –How to create selection lists –How to create multiline text fields

4. WDMD 170 – UW Stevens Point 4 Overview of Forms What is a “Form?” –Here is an example we will use in this eLesson (please note that this code has been modified from Gosselin’s version – save it in your working Tutorial06 folder) Customer Information Forms are used to collect information for some subsequent processing –Information may be used for some further interaction with the Web page or be sent to a server for processing Server processing may include CGI, ASP, ISPI, etc. Server processing may also include interaction with a DB

5. WDMD 170 – UW Stevens Point 5 The “submission” of forms Typically, forms are sent to a server for processing. Server processing may include CGI, ASP, ISPI, etc. This course is not concerned with server-side processing. We will imitate submission to a server by opening another window and displaying the form fields. –Example: testFormSubmission.htmtestFormSubmission.htm You may copy and paste the code into your pages containing forms. The example shown above and the external.JS file to open the window are available for download: –FormSubmission.zipFormSubmission.zip Your task will be to implement the imitated form submission in your own pages.

6. WDMD 170 – UW Stevens Point 6 The Common Gateway Interface Gosselin describes the use of CGI for form processing. See Pages 293-296 for more information. You are not responsible for CGI processing in this course.

7. WDMD 170 – UW Stevens Point 7 The Tag Designates a form within an HTML document and contains all text and tags that make up the form Multiple forms can be included in a document –Forms cannot be nested

8. WDMD 170 – UW Stevens Point 8 Example with two forms

9. WDMD 170 – UW Stevens Point 9 Example with two forms cont’d.

10. WDMD 170 – UW Stevens Point 10 Output of example with two forms

11. WDMD 170 – UW Stevens Point 11 Attribute s of the Tag

12. WDMD 170 – UW Stevens Point 12 The tag For more background on the tag, see Musciano Section 9.2 (pages 312- 320). NOTE: some of this reading is challenging! Scan it now so you know what’s there, and can refer back to it later.

13. WDMD 170 – UW Stevens Point 13 Form Elements: An Overview There are three tags used within tag pair to create form elements: – Used to create input fields that users can interact with. – Displays choices in a drop-down menu or scrolling list known as a selection list. – Used to create a text field in which users can enter multiple lines of information.

14. WDMD 170 – UW Stevens Point 14 Input Fields The tag is used to create input fields that use different types of interface elements to gather information Attributes are available to characterize the input field The tag and its attributes are described very nicely in Musciano Section 9.5 starting on page 323.

15. WDMD 170 – UW Stevens Point 15 Attribut es of the tag

16. WDMD 170 – UW Stevens Point 16 Input Fields: Gosselin Example <form action=“http://example_url/cgi-bin/cgi_program” method=“post” name=“exampleForm”> Name Address

17. WDMD 170 – UW Stevens Point 17 Input Fields: Gosselin Example cont’d. City, State, Zip

18. WDMD 170 – UW Stevens Point 18 Output of Gosselin Example tags

19. WDMD 170 – UW Stevens Point 19 Input Fields: Customer Example From the Customer Information example:Customer Information Name Address City, State, Zip E-Mail Enter a password that you will need when you call technical support

20. WDMD 170 – UW Stevens Point 20 text boxes An tag with type = “text” –The user is allowed to type in the text field, which is accepted as the field’s value Can include attributes –NAME, VALUE, MAXLENGTH and SIZE Example: Name

21. WDMD 170 – UW Stevens Point 21 Simple Form Submission 1. 2. 3. 4. Simple Form Submission 5. 6. 7. 8. 9. 10. 11. 12. Simple Form Submission using external JS code 13. 14.Click submit to imitate form "submission". 15.<!-- the onsubmit handler calls the JS code to open the window and 16. display the form's fields --> 17. 18. A single text field: 19. 20. 21. 22. 23. SimpleFormSubmission.htm

22. WDMD 170 – UW Stevens Point 22 Output of SimpleFormSubmission.htm

23. WDMD 170 – UW Stevens Point 23 Complete Exercise #2 in Tutorial 06A in Gosselin. Add the code to imitate form submission as shown on the previous two slides. Save your file as SimpleForm.htm in your Tutorial06 folder. eTask 1

24. WDMD 170 – UW Stevens Point 24 password boxes An tag with type = “password” –Each character the user types in the text field shows up as an asterisk (*) to hide it from onlookers Can include other attributes –NAME, VALUE, MAXLENGTH and SIZE

25. WDMD 170 – UW Stevens Point 25 password boxes: Example Example: Enter a password that you will need when you call technical support

26. WDMD 170 – UW Stevens Point 26 radio buttons An tag with type = “radio” Used to create a group of buttons from which only one button can be selected Can specify a default value using the CHECKED attribute Only one name=value pair is submitted with form data

27. WDMD 170 – UW Stevens Point 27 radio buttons: Example Example: What platform do you use? Windows 2000 Windows 95/98 Windows NT Windows ME UNIX Macintosh

28. WDMD 170 – UW Stevens Point 28 check boxes An tag with type = “checkbox” Used to create a box that can be set to yes (checked) or no (unchecked) Can specify default state using CHECKED attribute Only name=value pair from checked boxes is submitted with form data Can be grouped (although not mutually exclusively)

29. WDMD 170 – UW Stevens Point 29 check boxes: Example Example: What types of software do you use? (check all that apply) Word Processing Spreadsheets Database Graphics/CAD Programming

30. WDMD 170 – UW Stevens Point 30 reset buttons An tag with type = “reset” Clears all form entries and resets each form element to its initial value specified by the VALUE attribute Default label (Reset) appears if the VALUE attribute is not included Example:

31. WDMD 170 – UW Stevens Point 31 reset buttons: Example You may wish to allow the user a chance to confirm before resetting the entire form. Examine this behavior by clicking the reset button in the Customer Information example.Customer Information Clicking the reset button triggers the “reset” event, handled by the form using the “onReset” event handler. (See the red text below!) For example, add the following function in the and the onReset event handler to the tag: function confirmReset() { var resetForm = confirm("Are you sure you want to reset the form?"); if (resetForm == true) return true; else return false; }

32. WDMD 170 – UW Stevens Point 32 submit buttons An tag with type = “submit”. Default label (“Submit Query”) appears if the VALUE attribute is not included. Submits the form to the page specified by the action attribute of the form tag. Since we don’t submit to a server, we will make use of the submit event, handled by the form’s onSubmit event handler. This behavior was already seen in the SimpleFormSubmission.htm example. SimpleFormSubmission.htm

33. WDMD 170 – UW Stevens Point 33 submit buttons: Example Note: in Tutorial 06B we will “intercept” the submission in order to validate the field’s data values.

34. WDMD 170 – UW Stevens Point 34 command buttons An tag with type = “button” Use an onClick event handler to execute JavaScript code that performs some operation (e.g., a calculation, or some action.) An example of this use is in the pop-up window that displays the form fields.

35. WDMD 170 – UW Stevens Point 35 command buttons: Example

36. WDMD 170 – UW Stevens Point 36 image submit buttons An tag with type = “image” Displays a graphical image and submits the form to a CGI script on a server Use SRC attribute to specify image to be displayed on the button

37. WDMD 170 – UW Stevens Point 37

38. WDMD 170 – UW Stevens Point 38 selection lists Creates a selection list that presents users with fixed lists of values from which to choose (also known as “drop-downs”). Can appear as: –List of choices (size=‘n’) –Drop-down menu (size=1 or excluding size) Can also have a scroll bar.

39. WDMD 170 – UW Stevens Point 39

40. WDMD 170 – UW Stevens Point 40

41. WDMD 170 – UW Stevens Point 41 selection lists: example Where will you use this product? Work School Home Home Office

42. WDMD 170 – UW Stevens Point 42 selection lists: example 2 Where will you use this product? Work School Home Home Office

43. WDMD 170 – UW Stevens Point 43 Multiline Text Fields tag is used to create a field in which users can enter multiple lines of information Known as: –Multiline text fields –Text areas

44. WDMD 170 – UW Stevens Point 44 Summary Working with Forms in JavaScript How to implement HTML forms About the submission of forms How to use the tag About form elements –button, checkbox, password, radio, reset, submit, text How to create selection lists How to create multiline text fields

45. WDMD 170 – UW Stevens Point 45 Assignment Complete exercises #2 (eTask1), 3, and 5 on pages 332-333 of Gosselin, Tutorial 06A. NOTE: for exercises 2, 3, and 5, implement the form submission strategy shown in SimpleFormSubmission.htm.SimpleFormSubmission.htm Post your solutions to your Tutorial06 folder CISSRV5 server. Create a first attempt at a form for your project. Eventually you must include all the form fields required in the project specs document. Save the file as projectForm1.htm.project specs document Add a link in the discussion forum for your project’s form along with any questions or problems you experienced. You may also post any questions (and the exercise file) to the eReview group – for discussion purposes.

46. WDMD 170 – UW Stevens Point 46 End of eLesson Jump to the Beginning of this eLesson WDMD 170 Course Schedule D2L Courseware Site