CSC 317 INTERNET PROGRAMMING CSC 318 DYNAMIC WEB
CSC 317 – INTERNET PROGRAMMING CSC 318 – 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 Ui. TM 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 Ui. TM 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: Input FTMSK Ui. TM Pahang Page 4 Process Output
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 Ui. TM Pahang Page 5
Form Processing Introduction to Form Processing § HTML form attributes Tag Description 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 § Therefore, a complete HTML form look like this (please refer to the next slide) FTMSK Ui. TM 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 Ui. TM 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="form 1" method="post" action=""> Nama: <input name="nama" type="text"> Password: <input name="password" type="password"> </form> </body> </html> FTMSK Ui. TM 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="form 1" method="post" action=""> Address: <textarea name="address" rows="4" cols="20"> </textarea> </form> </body> </html> FTMSK Ui. TM 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="form 1" method="post" action=""> State: <select name="state"> <option value="1">Pahang</option> <option value="2">Kedah</option> </select> </form> </body> </html> FTMSK Ui. TM 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="form 1" method="post" action=""> Interest Area(s): Chemistry <input type="checkbox" name="chemistry"> Biology <input type="checkbox" name="biology"> Physics <input type="checkbox" name="physics"> </form> </body> </html> FTMSK Ui. TM 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="form 1" method="post" action=""> Gender: Female <input type="radio" name="gender" value="female"> Male <input type="radio" name="gender" value="male"> </form> </body> </html> FTMSK Ui. TM 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="form 1" method="post" action=""> Nama: <input name="nama" type="text"> Password: <input name="password" type="password"> <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 Ui. TM 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 Ui. TM 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 Java. Script (which you will learn in the next lesson) - Java. Script able to do input validation, display the outputs, process the inputs like doing calculation, and so on - BUT, Java. Script 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 Java. Script can do - It can send the inputs to the database! FTMSK Ui. TM Pahang Page 15
Form Processing Passing a form as a parameter § How to process inputs from HTML form? - You need to complete Java. Script 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 Ui. TM Pahang Page 16
Question? FTMSK Ui. TM Pahang Page 17
Bibliography (Book) § Knuckles (2001). Introduction to Interactive Programming on the Internet using HTML & Javascript. John Wiley & Sons, Inc. Bibliography (Websites) § http: //www. w 3 schools. com/html/default. asp § http: //www. quackit. com/html/ § http: //www. htmlcodetutorial. com/ FTMSK Ui. TM Pahang Page 18
- Slides: 18