1 / 18

Topic 6 Processing Form Input

Topic 6 Processing 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

chakra
Download Presentation

Topic 6 Processing Form Input

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Topic 6Processing Form Input

  2. Goals and Objectives Chapter Headlines Introduction Form Object Form Objects Form Input Validation Footer Scripts Form Data Processing Summary Outline

  3. 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

  4. 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

  5. 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

  6. 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()

  7. 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

  8. 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

  9. Form Input Validation Example 1

  10. Form Input Validation Example 2

  11. Form Input Validation Example 3

  12. Form Input Validation Example 4

  13. 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

  14. Form Input Validation Example 5

  15. Form Input Validation Example 6

  16. Form Input Validation Example 7

  17. 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

  18. 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

More Related