CSC317 – INTERNET PROGRAMMING CSC318 – DYNAMIC WEB APPLICATION DEVELOPMENT

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

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

Form Processing Introduction to 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 FTMSK UiTM Pahang  Page 3

Form Processing Introduction to 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: Process Output Input FTMSK UiTM Pahang  Page 4

Form Processing Introduction to Form Processing • How to create HTML form? <html> <head> <title>HTML Form</title> </head> <body> <form> <!–- here goes your form elements --> No. Pelajar: <input name="nopelajar" type="text"> Nama: <input name="nama" type="text"> </form> </body> </html> FTMSK UiTM Pahang  Page 5

Form Processing Introduction to Form Processing • HTML form attributes • Therefore, a complete HTML form look like this (please refer to the next slide) FTMSK UiTM Pahang  Page 6

Form Processing <html> <head> <title>HTML Form</title> </head> <body> <form name="form_name" action="post" action="to_somewhere.asp"> <!–- here goes your form elements --> No. Pelajar: <input name="nopelajar" type="text"> Nama: <input name="nama" type="text"> <input name="submit" type="Submit"> </form> </body> </html> FTMSK UiTM Pahang  Page 7

Form Processing Adding HTML Input Fields • Adding text field in HTML form <html> <head> <title>HTML Form</title> </head> <body> <form name="form1" method="post" action=""> Nama: <input name="nama" type="text"> Password: <input name="password" type="password"> </form> </body> </html> FTMSK UiTM Pahang  Page 8

Form Processing Adding HTML Input Fields • Adding text area in HTML form <html> <head> <title>HTML Form</title> </head> <body> <form name="form1" method="post" action=""> Address: <br> <textarea name="address" rows="4" cols="20"> </textarea> </form> </body> </html> FTMSK UiTM Pahang  Page 9

Form Processing Adding HTML Input Fields • Adding dropdown list in HTML form <html> <head> <title>HTML Form</title> </head> <body> <form name="form1" method="post" action=""> State: <select name="state"> <option value="1">Pahang</option> <option value="2">Kedah</option> </select> </form> </body> </html> FTMSK UiTM Pahang  Page 10

Form Processing Adding HTML Input Fields • Adding checkboxes in HTML form (for multiple choices) <html> <head> <title>HTML Form</title> </head> <body> <form name="form1" method="post" action=""> Interest Area(s): <br> Chemistry <input type="checkbox" name="chemistry"> <br> Biology <input type="checkbox" name="biology"> <br> Physics <input type="checkbox" name="physics"> <br> </form> </body> </html> FTMSK UiTM Pahang  Page 11

Form Processing Adding HTML Input Fields • Adding radio button in HTML form (single choice) <html> <head> <title>HTML Form</title> </head> <body> <form name="form1" method="post" action=""> Gender: <br> Female <input type="radio" name="gender" value="female"> <br> Male <input type="radio" name="gender" value="male"> </form> </body> </html> FTMSK UiTM Pahang  Page 12

Form Processing Adding HTML Input Fields • An HTML form with common elements and buttons <html> <head> <title>HTML Form</title> </head> <body> <form name="form1" method="post" action=""> Nama: <input name="nama" type="text"> <br> Password: <input name="password" type="password"> <br> <input type="submit" name="Submit" value="Submit"> <input type="reset" name="Reset" value="Reset"> <input type="button" name="button" value="Click Me!"> </form> </body> </html> FTMSK UiTM Pahang  Page 13

Form Processing Adding HTML Input Fields • 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 FTMSK UiTM Pahang  Page 14

Form Processing Passing a form as a parameter • 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! FTMSK UiTM Pahang  Page 15

Form Processing Passing a form as a parameter • 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 1 • Example 2 FTMSK UiTM Pahang  Page 16

Question? FTMSK UiTM Pahang  Page 17 FTMSK UiTM Pahang  Page 17

Knuckles (2001). Introduction to Interactive Programming on the Internet using HTML & Javascript. John Wiley & Sons, Inc. http://www.w3schools.com/html/default.asp http://www.quackit.com/html/ http://www.htmlcodetutorial.com/ Bibliography (Book) Bibliography (Websites) FTMSK UiTM Pahang  Page 18 FTMSK UiTM Pahang  Page 18

CSC317 – INTERNET PROGRAMMING CSC318 – DYNAMIC WEB APPLICATION DEVELOPMENT