CSC317 – INTERNET PROGRAMMING CSC318 – DYNAMIC WEB APPLICATION DEVELOPMENT BY: MUHD EIZAN SHAFIQ BIN ABD AZIZ FACULTY of COMPUTER and MATHEMATICAL SCIENCES

FTMSK UiTM Pahang  Page 2 Outline  Introduction to Form Processing  Adding HTML Input Fields  Passing a form as a parameter Form Processing

FTMSK UiTM Pahang  Page 3 Form Processing  HTML form is used to capture user inputs, before sending the inputs to the database, or, display the outputs to user  HTML form may contains: -Text field -Dropdown list/combo box -Text area -Checkbox -Radio button -Button Introduction to Form Processing

FTMSK UiTM Pahang  Page 4 Form Processing  It (may|should) has: -Server-side scripting: ASP, PHP, CFM, JSP, etc -Client-side scripting: Javascript, AJAX, etc  Speaking about form processing, it has: Introduction to Form Processing Input ProcessOutput

FTMSK UiTM Pahang  Page 5 Form Processing  How to create HTML form? Introduction to Form Processing HTML Form No. Pelajar: Nama:

FTMSK UiTM Pahang  Page 6 Form Processing  HTML form attributes  Therefore, a complete HTML form look like this (please refer to the next slide) Introduction to Form Processing TagDescription name Defines unique name for the form method HTTP method for sending data to the action URL. The value either post or get action A URL that defines where to send the data when the submit button is clicked

FTMSK UiTM Pahang  Page 7 Form Processing HTML Form No. Pelajar: Nama:

FTMSK UiTM Pahang  Page 8 Form Processing  Adding text field in HTML form Adding HTML Input Fields HTML Form Nama: Password:

FTMSK UiTM Pahang  Page 9 Form Processing  Adding text area in HTML form Adding HTML Input Fields HTML Form Address:

FTMSK UiTM Pahang  Page 10 Form Processing  Adding dropdown list in HTML form Adding HTML Input Fields HTML Form State: Pahang Kedah

FTMSK UiTM Pahang  Page 11 Form Processing  Adding checkboxes in HTML form (for multiple choices) Adding HTML Input Fields HTML Form Interest Area(s): Chemistry Biology Physics

FTMSK UiTM Pahang  Page 12 Form Processing  Adding radio button in HTML form (single choice) Adding HTML Input Fields HTML Form Gender: Female Male

FTMSK UiTM Pahang  Page 13 Form Processing  An HTML form with common elements and buttons Adding HTML Input Fields HTML Form Nama: Password:

FTMSK UiTM Pahang  Page 14 Form Processing  An HTML form with common elements and buttons -3 types of buttons -Submit : to allow data in the form to be submitted into the database or to another page -Reset : to clear all data in the form/to reset the form -Button : user-defined action. Programmer writes a code to trigger specific action once the button is clicked Adding HTML Input Fields

FTMSK UiTM Pahang  Page 15 Form Processing  How to process inputs from HTML form? -Make sure you have created a complete HTML form (plus with input fields and a button) -We have two ways to process the inputs: -Client-side Scripting -The best example is using JavaScript (which you will learn in the next lesson) -JavaScript able to do input validation, display the outputs, process the inputs like doing calculation, and so on -BUT, JavaScript cannot send the inputs to the database! -Server-side Scripting -You will learn to process the inputs using Active Server Page (ASP) -It is able to do what JavaScript can do -It can send the inputs to the database! Passing a form as a parameter

FTMSK UiTM Pahang  Page 16 Form Processing  How to process inputs from HTML form? -You need to complete JavaScript lesson first before you can start to code how to process the inputs -BUT, I suggest you to learn by yourself first, we have sample in the text book and on the Internet -Some examples: -Example 1Example 1 -Example 2Example 2 Passing a form as a parameter

FTMSK UiTM Pahang  Page 17 Question?

FTMSK UiTM Pahang  Page 18  Knuckles (2001). Introduction to Interactive Programming on the Internet using HTML & Javascript. John Wiley & Sons, Inc.    Bibliography (Book) Bibliography (Websites)