Enhancing Form Functionality with JavaScript

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 <FORM> 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 <FORM> Tag • All forms begin and end with the <FORM>…</FORM> tag pair • The <FORM>…</FORM> 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 <FORM> Tag

15. The <FORM> 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 <FORM> Tag • The METHOD attribute of the <FORM> 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 <FORM>…</FORM> tag pair to create form elements: <INPUT>, <SELECT>, and <TEXTAREA> • The <INPUT> tag is used to create input fields that users interact with • The <SELECT> tag displays choices in a drop-down menu or scrolling list, or selection list • The <TEXTAREA> tag is used to create a text field in which users can enter multiple lines of information

22. Form elements: An Overview • The <INPUT>, <TEXTAREA>, and <SELECT> 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 <INPUT> tag is used to create Input fields that use different types of interface elements to gather information • Attributes of the <INPUT> 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 <INPUT> Tag

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

26. Output of Several Text <INPUT> tags

27. Product Registration Program After Adding Text <INPUT> Fields

28. Password Boxes • An <INPUT> tag with a type of password (<INPUT TYPE=“password”>) is similar to an <INPUT> 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 <INPUT TYPE=“password”> tag

29. Product Registration Program After Adding a Password <INPUT> Field

30. Radio Buttons • (<INPUT TYPE=“radio”>) 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 <INPUT> tag

31. Product Registration Program After Adding Radio <INPUT> Fields

32. Check Boxes • An <INPUT> tag with a type of checkbox (<INPUT TYPE=“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 <INPUT> 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 <INPUT> Fields

34. Reset Buttons • An <INPUT> tag with a type of reset (<INPUT TYPE=“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 <INPUT> 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 <INPUT> Field

38. Command Buttons • An <INPUT> tag with a type of button (<INPUT TYPE=“command”>) 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 (<INPUT TYPE=“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 <INPUT> 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 <INPUT> Field

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

43. Output of a Form With an Image <INPUT> Tag

44. Selection Lists • <SELECT>…</SELECT> 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 <TEXTAREA> tag is used to create a field in which users can enter multiple lines of information • Fields created with the <TEXTAREA>…</TEXTAREA> tag pair are known as multiline text fields or text areas • The only items placed between the <TEXTAREA> tags are default text and characters to be displayed in the text area when the form loads • <TEXTAREA>…</TEXTAREA> tags will be indented with two tabs when it appears in the text area

48. Attributes of the <TEXTAREA> 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 <FORM>…</FORM> tag pair designates a form within an HTML document and contains all text and tags that make up a form