Mastering the Internet, XHTML, and JavaScript

Download Report

Transcript Mastering the Internet, XHTML, and JavaScript 

Topic 6
Processing Form Input
1
Outline









Goals and Objectives
Chapter Headlines
Introduction
Form Object
Form Objects
Form Input Validation
Footer Scripts
Form Data Processing
Summary
2
Goals and Objectives

Goals
Understand JavaScript form object, the objects that correspond to
form elements, client side validation of form input, server side
storage of form data in a spreadsheet or a database, and the
difference between header and footer scripts

Objectives








Form backend
Form object
Objects of form elements
Form input validation
Accessing form elements in JavaScript: footer scripts
Processing form data
Processing needs: languages (Perl, PHP, Java) and databases
(Excel, mySQL)
Practice form validation and processing techniques
3
Chapter Headlines






24.1 Introduction
 Learn how to stop forms on the client side
24.2 Form Object
 Find out what forms can do
24.3 Form Objects
 What is the difference between form object and objects
24.4 Form Input Validation
 This is where to check and stop users of forms
24.5 Footer Scripts
 Why should we use footers? Are there headers?
24.6 Form Data Processing
 Find out what you can do with form data
4
Introduction



Learn how to create all possible form elements
Form have a front end and a back end
The two most important aspects of a form are




Validating form input
Storing form input in a spreadsheet or a database
Validation of input ensures that the input is correct and
useful
Storing of input data makes it available for future
reference and use
5
Form Object



Each form in a document creates a Form object
JavaScript provides an array called forms to store
Form objects
Properties of Form object:
action, elements, encoding, length, method,
name, target

Methods of Form object:
handleEvent(), reset(), submit()
6
Form Objects
Each element in a form creates a form element object
 Properties and Methods of form objects:
Text field
 defautValue, form, name, type, value
 blur(), focus(), handleEvent(), select()
Checkbox
 checked, form, name, type, value
 blur(), click(), focus(), handleEvent()
Buttons
 form, name, type, value
 blur(), click(), focus(), handleEvent()
Hidden
 form, name, type, value
File
 form, name, type, value
 blur(), focus(), handleEvent(), select()
Select list
 form, length, name, options, type, selectedIndex
 blur(), focus(), handleEvent()
Option
 defaultSelected, selected, text, value

7
Form Input Validation





JavaScript enables us to validate form input
The validate() function returns true if form input is
correct
A false return disables the action attribute of the tag
without erasing any correct input
The validation process begins by including a validation
event handler with the tags
Input can be validated at:



Form level: after the entire form is completed
Element level: after input in each element
Validation at form level is better than element level
8
Form Input Validation
Example 1
9
Form Input Validation
Example 2
10
Form Input Validation
Example 3
11
Form Input Validation
Example 4
12
Footer Scripts




Footer scripts come after the </body> tag
Footer scripts can access all the XHTML objects created
inside the <body> tag
Footer scripts may not need event handlers
Some useful applications of footer scripts are



Placing a cursor in a given form element
Guide users in filling up a form
Focus users’ attention in filling the form
13
Form Input Validation
Example 5
14
Form Input Validation
Example 6
15
Form Input Validation
Example 7
16

Form Data Processing
Form processing can be summarized in four steps:





We must have the knowledge of:



User fills up a form
JavaScript verifies the input on client side before sending to the
server
A CGI script processes the correct data on the server by
extracting the values from name/value pairs
Store values into a spreadsheet or a database
Databases, SQL  oracle, mySQL, MSAccess, and Excel
Programming languages  Perl, PHP, Servlets, JSPs, and ASPs
We can process data in combinations such as
- Servlets and spreadsheets
- PHP and MySQL database
- Perl and E-mail processing
17
Summary
•
•
•
•
•
•
Form have a front end and a back end and data entered
has to be validated and stored
Each form creates a Form object
Each element of a form creates a form element object
Form validation is important to collect the correct inputs
Footer scripts have useful applications
Form data must be processed following the 4 step
process
18