chapter 6: forms javascript - introductory. previewing the product registration form
TRANSCRIPT
Chapter 6: Forms
JavaScript - Introductory
Previewing the Product Registration Form
Tutorial6_ProductInfo.html
Section A:
Working with Forms
in JavaScript
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
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
Custom Navigation Buttons Created With a Form
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
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
CGI Script Written in PERL
HTML Document With Two Forms
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
Output of HTML Document With Two Forms
Attributes of the <FORM> Tag
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
Three Frames Document
Subscription Frame
Emily the Chimp Web Page
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
Emily the Chimp Web Page After Form Submission
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
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
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
Common Attributes of the <INPUT> Tag
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
Output of Several Text <INPUT> tags
Product Registration Program After Adding Text <INPUT> Fields
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
Product Registration Program After Adding a Password <INPUT> Field
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
Product Registration Program After Adding Radio <INPUT> Fields
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
Product Registration Program After Adding Checkbox <INPUT> Fields
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
A Form With a Reset Button
Output of a Form After Clicking the Reset Button
Product Registration Program After Adding a Reset <INPUT> Field
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
ProductInfo.html File in Bottom Frame of the ProductRegistration.html File
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
Product Registration Program After Adding a Submit <INPUT> Field
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
Output of a Form With an Image <INPUT> Tag
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
Selection Lists
Product Registration Program After Adding a Selection List
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
Attributes of the <TEXTAREA> Tag
Product Registration Program After Adding a Multiline Text Area
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
Section A: Chapter Summary
• An example of three tags that can be used within the <FORM>…</FORM> tag pair are <INPUT>, <SELECT>, and <TEXTAREA>
• 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 <INPUT> tag is used to create input fields that gather information, using different types of user interface elements
Section A: Chapter Summary
• An <INPUT> tag with a type of text creates a simple text box that accepts a single line of text
• An <INPUT> tag with a type of password displays each character a user types as an asterisk
• An <INPUT> tag with a type of checkbox creates a box that can be set to yes (checked) or no (unchecked)
• An <INPUT> 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
Section A: Chapter Summary
• An <INPUT> tag with a type of button creates a command button similar to OK and Cancel buttons in dialog boxes
• An <INPUT> 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 <TEXTAREA> tag is used to create a field in which users can enter multiple lines of information
Section B:
Validating a User’s
Input to a Form
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
Hidden Form Fields
• A Hidden form field allows you to hide information from users
• Hidden form fields are created with <INPUT> 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
– <INPUT TYPE=“hidden”>, NAME and VALUE are the only attributes that you can include with a hidden form field
Calculator.html With Memory Functions
Calculator.html With Memory Functions
Calculator.html With Memory Functions
Calculator.html in a Web Browser
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
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 <FORM> tag that will be submitted to a CGI script
Form Event Handlers
• The onSubmit event handler executes when a form is submitted to a CGI script using a submit <INPUT> tag or an image <INPUT> 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
Program With onSubmit and onReset Event Handlers
Program With onSubmit and onReset Event Handlers
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 <INPUT> tag
• The reset () method is used to clear a form without use of a reset <INPUT> 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
Program With Submit() and Reset() Methods
Program With Submit() and Reset() Methods (continued)
Output of Program With Submit() and Reset() Methods in a Web Browser
Form Properties
• A Form object includes several properties that correspond to attributes of the <FORM> 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
Properties of the Form Object
Confirm Fields Program
Confirm Fields Program (continued)
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 <FORM> 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 <FORM> tag’s ACTION attribute
Form Code With an ACTION Attribute of MAILTO
Data in Outlook Express After Being E-mailed With an ENCTYPE of text/plain
Data E-mailed With an ENCTYPE of application/x-www-form-urlencoded
Section B: Chapter Summary
• Hidden form fields are created with the <INPUT> 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
Section B: Chapter Summary
• The onSubmit event handler executes when a form is submitted to CGI script, using a submit <INPUT> tag or an image <INPUT> 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 <INPUT> tag
• The reset() method is used to clear a form in Javascript without use of a reset <INPUT> tag
Section B: Chapter Summary
• The Form object includes several properties that correspond to the attributes of the <FORM> 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