Chapter 5 Java Script And Forms JavaScript, Third Edition.

Chapter 5

Java Script And Forms

JavaScript, Third Edition

JavaScript, Third Edition 2

Objectives

• Study form elements and objects

• Use JavaScript to manipulate and validate form elements

• Learn how to submit and reset forms

• Learn how to validate submitted form data


Introduction

• Forms:– One of the most common Web page elements used

with JavaScript

– Typical forms you may encounter on the Web include order forms, surveys, and applications

• Use JavaScript:1. To make sure data was entered properly into the

form fields

2. To perform other types of preprocessing before the data is sent to the server


Overview Of Forms

• Forms are used to: – Collect information from users

– Transmit that information to a server for processing

• Some popular server-side scripting languages that are used to process form data include:

– Common Gateway Interface (CGI)

– Active Server Pages (ASP)

– Java Server Pages (JSP)


The <form> Element

• Designates form within a Web page

• Contains all the text and elements that make up a form

• You can include as many forms as you like on a Web page

• You cannot nest one form inside another form


The <form> Element (Cont.)


Form Controls

• Four primary elements used within the <form> element to create form controls:

– <input>

– <button>

– <select>

– <textarea>

• The <input> and <button> elements:

– Create input fields with which users interact


Form Controls (Cont.)

• The <select> element:– Displays choices in a drop-down menu or scrolling

list known as a selection list

• The <textarea> element:– Used to create a text field in which users can enter

multiple lines of information

• Field– Any Form element into which a user can enter data

(such as a text box) or that a user can select or change (such as a radio button)


Form Controls (Cont.)

• The <input>, <textarea>, and <select> elements can include name and value attributes:

– The name attribute defines a name for an element

– The value attribute defines a default value


Using JavaScript with Forms

• JavaScript is often used with forms

– to validate or process form data before the data is

submitted to a server-side script

• To use JavaScript to access form controls and verify form information

– Use the Form object and Input object


Using JavaScript with Forms (Cont.)

• The Form Object:

– Represents a form on a Web page

• The Input object:

– Represents a form control, such as a text box

• Both objects are part of the browser object model


Referencing Forms and Form Elements

• Just as the Document object has a forms[] array, the Form object has an elements[] Array

• The elements[] array:

– Use to reference each element on a form

– Contains input objects representing each of the controls in a form


Referencing Forms and Form Elements (Cont.)

• Each element on a form is assigned to the elements[] array in the order in which it is encountered by the JavaScript interpreter

• To refer to an element on a form:

– Reference the index number of the form in the forms[] array, followed by the appropriate element index number from the elements[] array


The Form Object


The Form Object (Cont.)


The Input Object


The Input Object (Cont.)


Input Fields

• The empty <input> element:

– Used to create input fields that create different types of interface elements, such as

• Text boxes

• Radio buttons

• The input fields are used to gather information from the user


Input Fields (Cont.)


Text Boxes

• An <input> element with a type of “text” (<input type=”text” />):

– Creates simple text box that accepts a single line of text

• When used with a text box, the value attribute

– specifies text to be used as the default value at the moment a form first loads


Password Boxes

• An <input> element with a type of “password” (<input type=”password” />):

– Creates a password box that is used for entering passwords or other types of sensitive data

– Each character that a user types in a password box appears as an asterisk or bullet


Push Buttons

• An <input> element with a type of “button” (<input type=”button” />):

– Creates a push button similar to the OK and Cancel buttons you see in dialog boxes


Radio Buttons

• An <input> element with a type of “radio” (<input type=”radio” />):

– Creates a group of radio buttons, or option buttons, from which the user can select only one value

• To create a group of radio buttons:

– All radio buttons in the group must have the same name attribute


Radio Buttons (Cont.)

• Each radio button requires a value attribute:

– Identifies unique value associated with that button

• Only one selected radio button in a group creates a name=value pair when a form is submitted to a Web server


Check Boxes

• An <input> element 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


Check Boxes (Cont.)

• Include checked attribute in a check

box <input> element:

– To set the initial value of the check box to Yes

– If a check box is selected (checked) when a form is submitted

• Check box name=value pair is included in the form data

– If a check box is not selected,

• a name=value pair is not included in the data submitted from the form


Selection Lists

• The <select> element creates a selection list:

– Presents users with fixed lists of options from which to choose

– Options displayed in a selection list are created with <option> elements


Selection Lists (Cont.)

• The <select> element must appear within a block-level element such as the <p> element

• The selection list can appear as

– an actual list of choices

– a dropdown menu

• Depending on the number of options in the list, a selection list can also include a scroll bar


Selection Lists (Cont.)


Menu Options

• Use <option> elements to specify the options that appear in a selection list

• The content of an <option> element appears as a menu option in a selection list

• Specify a selection list’s menu options using <option> elements placed within a <select> element

• Each selection list must contain at least one <option> element


Menu Options (Cont.)


The Select and Option Objects

• The Select object:

– Represents a selection list in a form

– Includes an options[] array containing an Option object for each <option> element in the selection list

• The Option object represents an option in a selection list

• Use the Select and Option objects with JavaScript to manipulate the options displayed in a selection


The Select and Option Objects (Cont.)


Adding Options to a Selection List

• To add a new option to a selection list after a Web page renders it:

– Must create a new option with the Option() constructor

– Similar to creating an array with Array() constructor

• The syntax for the Option() constructor is:

– Var variable_name = new Option(text, value, defaultSelected, selected);


Removing Options from a Selection List

• To remove a single option from a selection list:

– Assign a value of null to the option’s associated element in the options[] array

• When you remove an element from the options[] array, the remaining elements are reordered


Submit Buttons

• An <input> element with a type of “submit” (<input type=”submit” />):

– Creates a submit button that transmits a form’s data to a Web server

• The action attribute of the <form> element that creates the form determines to what URL the form is submitted


Reset Buttons

• An <input> element with a type of “reset” (<input type=”reset” />):

– Creates a reset button that clears all form entries and resets each form element to the initial value specified by its value attribute

• Name attribute for a reset button is not required

• Text assigned to the reset button’s value

attribute appears as the button label


Validating Submitted Data

• Two event handlers, onsubmit and onreset, are available for use with the <form> element:

• Onsubmit event handler:

– Executes when a form is submitted to a server-side script

• Onreset event handler:

– Executes when a reset button is selected on a form


Validating Text and Password Boxes

• To verify that text and password boxes are not empty:

– Can use an if statement in the onsubmit event handler

• Checks whether the field’s value property contains a value


Validating Radio Buttons

• Use the checked property to determine which element in a group is selected

• Checked property returns a value of:

– True if a check box or radio button is selected

– False if it is not


Validating Check Boxes

• You can use checked property to determine whether an individual check box has been selected

• If check boxes are part of a group:

– Use the same functionality as the validation code for radio buttons


Validating Selection Lists

• Test whether the selection list’s selectedIndex property contains a value of –1

• If it does, then no option is selected


Chapter Summary

• Forms:

– Collect information from users and transmit that information to a server for processing

• The <form> element:

– Designates a form within a Web page

– Contains all the text and elements that make up a form


Chapter Summary (cont.)

• <input>, <button>, <select>, and <textarea>:

– Four primary elements are used within the <form> element to create form controls

• Form object:

– Represents a form on a Web page

• Input object:

– Represents a form control, such as a text box



• The <option> elements :

– Used to specify the option that appears in a selection list

• The Select object:

– Represents a selection list in a form

• The Option object:

– Represents an option in a selection list



• The onsubmit event handler:

– Executes when a form is submitted to a server-side script

• The onreset event handler:

– Executes when a reset button is selected on a form

Chapter 5 Java Script And Forms JavaScript, Third Edition.

Documents

Transcript of Chapter 5 Java Script And Forms JavaScript, Third Edition.