Scribd
Upload
32 views17 pages

WEEK 5. Introduction To Web Application

This document provides an introduction to web applications, including their basic architecture and use of forms. It explains that web applications are designed using internet technologies to perform advanced tasks by maintaining state and transaction data. Forms allow users to enter information on web pages and send it to a server via GET or POST methods. The document then describes various HTML form input types including text fields, radio buttons, list boxes, checkboxes, textareas, and buttons.

Uploaded by

secret
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
32 views17 pages

WEEK 5. Introduction To Web Application

This document provides an introduction to web applications, including their basic architecture and use of forms. It explains that web applications are designed using internet technologies to perform advanced tasks by maintaining state and transaction data. Forms allow users to enter information on web pages and send it to a server via GET or POST methods. The document then describes various HTML form input types including text fields, radio buttons, list boxes, checkboxes, textareas, and buttons.

Uploaded by

secret
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 17

Introduction to Web

Application
Prepared by:
Prof. Christian Michael M. Mansueto, MIS-ITEM
Web Application
Applications that are designed and developed
using internet technologies.

Difference between scripts and application are


important to fully understand the implications
of Web Application concepts:

• Script - Utility (doesn’t have any context)


• Application – Designed to perform more
advanced task. Needs to maintain state and
transaction (e.g persistent data store).
Web Application: Basic
Architecture
• At the most basic level,
the Web works off of a
client/server
architecture
• both a central server
and a client
application are
responsible for some
amount of processing.
All about Web forms
Forms
qForms enable you to build Web pages that
let users actually enter information and send
it back to the server.
qHTML forms are surrounded by the <form>
tag which is specified as <form action= “url”
method= “method”> and </form> tags.
qThe url points to the remote file or
application used for digesting the information.
•
Creating an HTML Forms
•Managing HTML forms with PHP is a two-step process:
•create the HTML form
•create the appropriate PHP script that receives the form data
•An HTML form is created using the form tags and various
input types. Example:
•<form action=”script.php” method=”post”> … </
form>
•<form action=”script.php” method=”get”> … </
form>
•The most important attribute of the form tag is the action,
which dictates to which page the form data will be sent. It
tells the server which page to go once the user clicked a
submit button on the form.
Creating an HTML Forms
•The second attribute--method—dictates how the data is
sent to the handling page. The two option values—get
and post—refer to HTTP (HyperText Transfer Protocol)
method to be used. The get method sends the
submitted data to the receiving page as a series of name-
value pairs appended to the URL. Example:
http://localhost/examples/handle_form.php?
name=Papsi&gender=M

The post method is identical to the GET method but the


information in the form is sent in the body of the HTTP
request rather than as part of the URL.
Input Types in the
form Tag:
TextFields (Text Boxes)
<head>
<'tle> Sample HTML document using the form tag </
'tle> </head>
<body>
<form ac'on= "url" method= get>
<b> Your name: </b>
<input type= "text" name= "yourname"> <p>
<b> Your email address: </b>
<input type= "text" name= "youremail"> <p>
</form>
</body>
Radio Button
<body>
<form ac'on= "url" method= get>
<b> Your name: </b>
<input type= "text" name= "yourname"> <p>
<b> Your email address: </b>
<input type= "text" name= "youremail"> <p>
<b> You are: </b>
<input type= "radio" name="age" value="kid"> Under 18
<input type= "radio" name="age" value="genx"> 18-30
<input type= "radio" name="age" value="adult"> 31-40
<input type= "radio" name="age" value="old"> over 40 <p>
</form>
</body>
List Boxes
Add the following codes in Sample Program 2
inside the < form> tag.
<b> You found our site from: </b>
<select name="found">
<op'on selected> Choose one
<op'on> Yahoo
<op'on> Google
<op'on> Amazon
</select>
Checkbox

Add the following codes in Sample Program 3 inside the


< form> tag.
<p>
<input type= "checkbox" name= "first order"
value=yes
<b> First Time Ordering </b> <p>
<b> Comment: </b><br>
TextArea

Add the following codes in Sample Program 4 inside the


< form> tag.
<p>
<textarea name="comment" rows=5
cols=80>
</textarea>
Buttons

Add the following codes in Sample Program 5 inside the


< form> tag.
<p>
<input type="submit" value= "Send">
<input type="reset" value= "Clear">
Practice Activity
Practice Activity
end…

You might also like