Embed Size (px)
Citation preview
1
CSC317/318INTERNET PROGRAMING /
DYNAMIC WEB APPLICATION DEVELOPMENTCHAPTER:
HyperText Markup LanguageHTML
(Continue)(Form Processing)
Siti Nurbaya Ismail
Faculty of Computer & Mathematical Sciences,
Universiti Teknologi MARA (UiTM), Kedah
| A2-3039 | [email protected] | 019-5710562 |
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:
3
Hypertext Markup Language
Form Processing
Introduction to Form Processing Adding HTML Input Fields Passing a form as a parameter
4
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
5
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:
Input Process Output
Hypertext Markup Language
Introduction to Form Processing
Process
6
password
username
submit
Welcome Siti!
Input Process Output
Hypertext Markup Language
An example of form processing layout
7
Text field
Radio button
Button
Dropdown list
Checked box
8
Hypertext Markup Language
Introduction to Form Processing
How to create HTML form?
9
Hypertext Markup Language
Introduction to Form Processing
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
HTML form attributes
Therefore, a complete HTML form look like this (please refer to the next slide)
10
Hypertext Markup Language
Introduction to Form Processing
11
Hypertext Markup Language
Adding HTML Input Fields
Adding text field in HTML form
12
Hypertext Markup Language
Adding HTML Input Fields
Adding textarea in HTML form
13
Hypertext Markup Language
Adding HTML Input Fields
Adding dropdown list in HTML form
14
Hypertext Markup Language
Adding HTML Input Fields
Adding checkbox in HTML form (for multiple choices)
15
Hypertext Markup Language
Adding HTML Input Fields
Adding radio button in HTML form (single choice)
16
Hypertext Markup Language
Adding HTML Input Fields
An HTML form with common elements and buttons
17
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
18
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!
19
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
Hypertext Markup LanguageForm
Bibliography (Book)• Knuckles (2001). Introduction to Interactive Programming on the Internet
using HTML & Javascript. John Wiley & Sons, Inc.
Bibliography (Websites)• http://www.w3schools.com/html/default.asp• http://www.quackit.com/html/• http://www.htmlcodetutorial.com/• http://www.pagetutor.com/html_tutor/index.html
20
