1 CSC317/318 INTERNET PROGRAMING / DYNAMIC WEB APPLICATION DEVELOPMENT Siti Nurbaya Ismail Faculty of Computer & Mathematical Sciences, Universiti Teknologi MARA (UiTM), Kedah | A | | |

Hypertext Markup Language  Objects & Images: Adding image, applets, audio, video, animation & virtual reality on the Web  Frames  Marquee  Labels & Controls  Input Elements, Dropdown List, Text Area  Using Fieldsets 2 Upon completion of this chapter, you will learn:

Hypertext Markup Language Form Processing  Introduction to Form Processing  Adding HTML Input Fields  Passing a form as a parameter 3

Hypertext Markup Language 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 4

Hypertext Markup Language 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: 5

Hypertext Markup Language Introduction to Form Processing 6 password username submit Welcome Siti!

Hypertext Markup Language An example of form processing layout 7 Text field Radio button Button Dropdown list Checked box

Hypertext Markup Language Introduction to Form Processing How to create HTML form? 8

Hypertext Markup Language 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 HTML form attributes Therefore, a complete HTML form look like this (please refer to the next slide) 9

Hypertext Markup Language Introduction to Form Processing 10

Hypertext Markup Language Adding HTML Input Fields Adding text field in HTML form 11

Hypertext Markup Language Adding HTML Input Fields Adding textarea in HTML form 12

Hypertext Markup Language Adding HTML Input Fields Adding dropdown list in HTML form 13

Hypertext Markup Language Adding HTML Input Fields Adding checkbox in HTML form (for multiple choices) 14

Hypertext Markup Language Adding HTML Input Fields Adding radio button in HTML form (single choice) 15

Hypertext Markup Language Adding HTML Input Fields An HTML form with common elements and buttons 16

Hypertext Markup Language 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 17

Hypertext Markup Language Parsing a form as 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! 18

Hypertext Markup Language Parsing a form as 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 19

Hypertext Markup Language Form Bibliography (Book) Knuckles (2001). Introduction to Interactive Programming on the Internet using HTML & Javascript. John Wiley & Sons, Inc. Bibliography (Websites)