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