Download presentation
Presentation is loading. Please wait.
Published bySybil Powell Modified over 9 years ago
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
Similar presentations
© 2025 SlidePlayer.com. Inc.
All rights reserved.