Topic 6Processing Form Input
Goals and Objectives Chapter Headlines Introduction Form Object Form Objects Form Input Validation Footer Scripts Form Data Processing Summary Outline
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
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
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
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()
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
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
Form Input Validation Example 1
Form Input Validation Example 2
Form Input Validation Example 3
Form Input Validation Example 4
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
Form Input Validation Example 5
Form Input Validation Example 6
Form Input Validation Example 7
Form Data Processing • Form processing can be summarized in four steps: • 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 • We must have the knowledge of: • 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
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
