1. Chapter 6: Forms JavaScript - Introductory

2. Previewing the Product Registration Form

3. Tutorial6_ProductInfo.html

4. Section A: Working with Forms in JavaScript

5. Objectives In this section students will learn: How to use HTML forms About the Common Gateway Interface How to use the tag About form elements How to create and use input fields How to create selection lists How to create multiline text fields

6. Overview of Forms Forms are one of the most common HTML elements used with JavaScript Typical forms that you may encounter are order forms, surveys, applications, and a form that gathers search criteria from a user To process the data submitted from a Web browser to a server, use a special protocol named Common Gateway Interface (CGI) CGI is one of the oldest and most popular methods

7. Custom Navigation Buttons Created With a Form

8. The Common Gateway Interface Common Gateway Interface (CGI) is a simple protocol that allows Web pages to communicate with Web-server-based programs A CGI’s function is to start a Web-server- based program, then pass and receive environment variables to and from it An environment variable is part of an operating system, not just part of a function or a program

9. The Common Gateway Interface A Web-server-based application that processes CGI environment variables is called a CGI script or CGI program and can be designed to perform a multitude of functions Do not confuse CGI protocol itself with a CGI script CGI protocol’s primary purpose is to send that data received from a Web page to a program on a server, then send any response back to the Web page CGI scripts are often placed within a bin (for binary) or cgi-bin directory on a Web server

10. CGI Script Written in PERL

11. HTML Document With Two Forms

12. The Tag All forms begin and end with the … tag pair The … tag pair designates a form within an HTML document and contains all text and tags that make up a form You can include as many forms as you like within an HTML document You cannot nest one form inside another

13. Output of HTML Document With Two Forms

14. Attributes of the Tag

15. The Tag The ENCTYPE attribute specifies an encoding protocol known as Multipurpose Internet Mail Extension, or MIME Encoding with MIME ensures that data is not corrupted when transmitted across the Internet MIME has become a standard method of exchanging files over the Internet An ACTION attribute sends the form’s data to the URL

16. Three Frames Document

17. Subscription Frame

18. Emily the Chimp Web Page

19. The Tag The METHOD attribute of the tag specifies that the form’s data will be sent with the POST method instead of the default GET method The TARGET attribute specifies the window in which text and HTML tags returned from the server are to be rendered After data is received by a server, the imaginary process_subscription CGI script adds the e-mail address to a database, then returns a message to the dialog frame, as shown in Figure 6-11

20. Emily the Chimp Web Page After Form Submission

21. Form Elements: An Overview There are three tags used within the … tag pair to create form elements:,, and The tag is used to create input fields that users interact with The tag displays choices in a drop- down menu or scrolling list, or selection list The tag is used to create a text field in which users can enter multiple lines of information

22. Form elements: An Overview The,, and tags can include NAME and VALUE attributes The NAME attribute defines a name for a tag The VALUE attribute defines a default value When you submit a form to a CGI script, the form’s data is submitted in name=value tag pairs, based on NAME and VALUE attributes of each tag

23. Input Fields The tag is used to create Input fields that use different types of interface elements to gather information Attributes of the tag include ALIGN, CHECKED, MAXLENGTH, NAME, SIZE, TYPE, VALUE, and SRC Values for each attribute must be surrounded by quotation marks in order to function properly with both Navigator and Internet Explorer

24. Common Attributes of the Tag

25. Text Boxes An tag with a type of text ( ) creates a simple text box that accepts a single line of text Include the VALUE attribute in a text tag, the specified text is used as the default value when the form is first loaded

26. Output of Several Text tags

27. Product Registration Program After Adding Text Fields

28. Password Boxes An tag with a type of password ( ) is similar to an tag with a type of text However, each character that a user types in a password box appears as an asterisk to hide it from anyone looking over the user’s shoulder You can include the NAME, VALUE, MAXLENGTH, and SIZE attributes with the tag

29. Product Registration Program After Adding a Password Field

30. Radio Buttons ( ) is usually used to create a group of radio buttons from which you can select only one value Only one checked radio button in a group creates a name=value pair when a form is submitted to a CGI script You can also include the CHECKED attribute in a radio tag

31. Product Registration Program After Adding Radio Fields

32. Check Boxes An tag with a type of checkbox ( ) creates a box that can be set to yes (checked) or no (unchecked) Use check boxes when you want users to select whether or not to include a certain item or to allow users to select multiple values from a list of items Include the CHECKED attribute in a checkbox tag to set the box’s initial value to yes Like radio buttons, check boxes can be grouped by giving them the same NAME value

33. Product Registration Program After Adding Checkbox Fields

34. Reset Buttons An tag with a type of reset ( ) clears all of a form’s entries and resets each form element to its initial value specified by VALUE attribute The width of a button created with the rest tag depends on the number of characters in its VALUE attribute

35. A Form With a Reset Button

36. Output of a Form After Clicking the Reset Button

37. Product Registration Program After Adding a Reset Field

38. Command Buttons An tag with a type of button ( ) creates a command button similar to the OK and Cancel buttons in dialog boxes Command buttons are also similar to submit and reset buttons Command buttons do not submit form data to a CGI script as submit buttons do, nor do they clear data entered into form fields like reset buttons Command buttons use an onClick event handler to execute JavaScript code that performs a function

39. ProductInfo.html File in Bottom Frame of the ProductRegistration.html File

40. Submit Buttons A type of submit ( ) creates a button that submits the form to CGI script on a server You can include the NAME and VALUE attributes with the submit tag If you do not include a VALUE attribute, then the default label of submit button, Submit Query, appears

41. Product Registration Program After Adding a Submit Field

42. Image Submit Buttons Image ( ) creates a button that displays a graphical image and submits a form to a CGI script on a server Image tag performs exactly the same function as the submit tag Include the SRC attribute to specify the image to display on the button Image tags are also used to create server-side image maps

43. Output of a Form With an Image Tag

44. Selection Lists … tag pair creates a selection list that presents users with fixed lists of values from which to choose Selection list appears as a drop down menu and can include a scroll bar, depending on number of items in list

45. Selection Lists

46. Product Registration Program After Adding a Selection List

47. Multiline Text Fields The tag is used to create a field in which users can enter multiple lines of information Fields created with the … tag pair are known as multiline text fields or text areas The only items placed between the tags are default text and characters to be displayed in the text area when the form loads … tags will be indented with two tabs when it appears in the text area

48. Attributes of the Tag

49. Product Registration Program After Adding a Multiline Text Area

50. Section A: Chapter Summary Common Gateway Interface, or CGI, is simple protocol used to communicate between Web pages and Web-server-based applications An environment variable is part of an operating system, not just part of a function or program A Web-server-based application that processes CGI environment variables is called a CGI script The … tag pair designates a form within an HTML document and contains all text and tags that make up a form

51. Section A: Chapter Summary An example of three tags that can be used within the … tag pair are,, and Any form elements into which a user can enter data, such as text box, or that a user can select or change, such as a radio button, are called fields When you submit a form to CGI script, the form’s data is submitted in name=value tag pairs The tag is used to create input fields that gather information, using different types of user interface elements

52. Section A: Chapter Summary An tag with a type of text creates a simple text box that accepts a single line of text An tag with a type of password displays each character a user types as an asterisk An tag with a type of checkbox creates a box that can be set to yes (checked) or no (unchecked) An tag with a type of reset clears all of a form’s entries and resets each form element to its initial value specified by the VALUE attribute

53. Section A: Chapter Summary An tag with a type of button creates a command button similar to OK and Cancel buttons in dialog boxes An tag with a type of image creates a button that displays a graphical image and submits the form to CGI script on the server The tag is used to create a field in which users can enter multiple lines of information

54. Section B: Validating a User’s Input to a Form

55. Objectives In this section students will learn: About hidden form fields About the Form object How to reference forms and form elements About form event handlers, methods, and properties How to e-mail a form’s data

56. Hidden Form Fields A Hidden form field allows you to hide information from users Hidden form fields are created with tag Hidden form fields temporarily store information that needs to be sent to a server along with rest of form but user does not need to see –, NAME and VALUE are the only attributes that you can include with a hidden form field

57. Calculator.html With Memory Functions

60. Calculator.html in a Web Browser

61. The Form Object JavaScript is often used with forms to validate or process a form’s data before submitted to CGI You can use JavaScript to verify that required fields are not left blank To use JavaScript to verify form information, use the properties, methods, and events of the Form object If a form requires advanced or complex validation or processing, it is a good idea to have a CGI script on a server do the work

62. Referencing Forms and Form Elements Recall that some of the objects in JavaScript object model are arrays of other objects The Window object includes a frames [] array and the Document object includes a forms[] array Form object has an elements [] array You can reference each element on a form, using the Form object’s elements [] array You are not required to include a NAME attribute for a tag that will be submitted to a CGI script

63. Form Event Handlers The onSubmit event handler executes when a form is submitted to a CGI script using a submit tag or an image tag The onSubmit event handler is often used to verify or validate a form’s data before being sent to server The onReset event handler executes when a reset button is selected on a form Use the onReset event handler to confirm that a user really wants to reset the contents of form When you use the onSubmit and onReset event handlers, you need to return a value of true or false

64. Program With onSubmit and onReset Event Handlers

66. Form Methods A Form object contains only two methods: submit() and reset () The submit () method is used to submit a form without use of a submit tag The reset () method is used to clear a form without use of a reset tag The submit () and reset () methods perform the same functions as the submit and reset buttons onSubmit and onReset event handlers do not execute when you use submit () and reset () methods

67. Program With Submit() and Reset() Methods

68. Program With Submit() and Reset() Methods (continued)

69. Output of Program With Submit() and Reset() Methods in a Web Browser

70. Form Properties A Form object includes several properties that correspond to attributes of the tag All the properties of the Form object, with the exception of the name, elements[], and length properties, can be modified in JavaScript code The length property is useful for retrieving the number of elements on a form

71. Properties of the Form Object

72. Confirm Fields Program

73. Confirm Fields Program (continued)

74. E- mailing a Form’s Data To e-mail a form’s data instead of submitting it to a CGI script, replace the CGI script’s URL in the tag’s ACTION attribute with mailto:email_address The drawback to e-mailing form data is that not all Web browsers support the mailto: email_address option with the tag’s ACTION attribute

75. Form Code With an ACTION Attribute of MAILTO

76. Data in Outlook Express After Being E-mailed With an ENCTYPE of text/plain

77. Data E-mailed With an ENCTYPE of application/x-www-form-urlencoded

78. Section B: Chapter Summary Hidden form fields are created with the tag and are used to hide information from users You use the properties, methods, and events of the Form object to verify form information with JavaScript The Document object includes a forms[] array that contains all of an HTML document’s forms Each element on a form can be referenced using the elements[] array of Form object

79. Section B: Chapter Summary The onSubmit event handler executes when a form is submitted to CGI script, using a submit tag or an image tag The onReset event handler executes when a reset button on a form is clicked The submit () method is used to submit a form in JavaScript without use of a submit tag The reset() method is used to clear a form in Javascript without use of a reset tag

80. Section B: Chapter Summary The Form object includes several properties that correspond to the attributes of the tag, as well as properties containing information about a form’s elements The length property is useful for retrieving the number of elements on a form A form’s data can be submitted to an e-mail address instead of a CGI script by using an ACTION attribute of mailto