2. Contents
Relations between PHP and HTML forms
Requirements for use of forms
How form works
afm -INFO2301S1Y1314
3. The two important tasks in dynamic websites
I. Creating data
II. Processing Data
The relationships:
afm -INFO2301S1Y1314
4. Client-Server Interaction.
Interaction between user and web application.
Primary source of data (Client).
Process data to cater business needs (records
keeping, financial report, application status, etc)
HTML and Web scripting depend on each other to
form web application.
The importance of HTML forms
afm -INFO2301S1Y1314
5. Knowledge in HTML.
Strong foundation in Hypertext Markup Language is
a prerequisite.
Knowing the HTML functions in the presentation
layer.
Website design is central at HTML layer.
Design and functionality should be balance in any
web application.
The importance of HTML forms
afm -INFO2301S1Y1314
7. A form on a web page gathers input data from the user.
The data the form controls varies e.g. buttons, text
fields, menus, etc.
On the other hand the user's data is sent back to the
server where it is processed by web programming
languages, e.g. a PHP script
The functions of forms
afm -INFO2301S1Y1314
Example :
<html>
<form name:”fname” action =“input_dest.php” method=“post”>
<! - -
--- form inputs
- - >
</form>
<html>
8. A form is an area that can contain form elements.
Form elements are elements that allow the user to
enter information (like text fields, text area fields,
dropdown menus,radio buttons, checkboxes, etc.) in a
form.
A form is defined with the <form> tag.
The functions of forms
afm -INFO2301S1Y1314
9. An input form
The most used form tag is the <input> tag.
The type of input is specified with the type attribute.
We will look at some of the most commonly used input
types.
Text Field input
Text fields are used when you want the user to type
letters, numbers, etc. in a form.
The functions of forms
afm -INFO2301S1Y1314
Example :
<form>
First name:
<input type="text" name="firstname"> <br>
Last name:
<input type="text" name="lastname">
</form>
10. Radio Buttons
Radio Buttons are used when you want the
user to select one of a limited number of
choices.
The functions of forms
afm -INFO2301S1Y1314
Example :
<form>
<input type="radio" name="sex“
value="male"> Male <br>
<input type="radio" name="sex" value="female">
Female
</form>
11. Checkboxes
Checkboxes are used when you want the user to
select one or more options of a limited number of
choices.
The functions of forms
afm -INFO2301S1Y1314
Example :
<form>
I have a bike: <input type="checkbox" name="vehicle"
value="Bike“> <br>
I have a car: <input type="checkbox" name="vehi cle"
value="Car“> <br>
I have an airplane: <input type="checkbox“ ame="vehicle"
value="Airplane
</form>
12. Submit Buttons
To be useful, a form will contain a submit button, which
the user can press to send the data to the server (or
whatever)
Use an input element with attribute type="submit“.
By default, the button has Submit Query written on it but
you can supply our own label using the value attribute.
The functions of forms
afm -INFO2301S1Y1314
Example :
<form>
<input type=“submit“ ></br>
<input type=“submit" value=“HANTAR" />
</form>
13. The Form's Action Attribute and the Submit Button
When the user clicks on the "Submit" button, the content of the form
is sent to the server.
The form element has two attributes: action and method.
The form's action attribute defines the name of the file to send the
content to.
The file defined in the action attribute usually does something with the
received input.
The functions of forms
afm -INFO2301S1Y1314
Example :
<form>
name=“formName" action="html_form_submit.php“
method="get">
Username:
<input type="text" name="user">
<input type="submit" value=“submit">
</form>
14. Reset button
A form might contain a reset button, which the user
can press to clear the data s/he has typed
Use an input element with attribute type="reset“.
By default, the button has Reset written on it but
you can supply your own label using the value
attribute:
The functions of forms
afm -INFO2301S1Y1314
Example :
<form>
<input type="text" name="user">
<input type=“reset" value=“padam">
</form>
15. 1. START with the HTML <form> tag
2. ACTION attribute of the <form> tag is the URL of
the PHP script that ill process the input data from the
form
3. METHOD on how to process the input data
i. GET (Default) = appends the form-data to the URL
in name/value pairs: RL?name=value&name=value
ii. POST = Sends the form-data as an HTTP post
transaction
4. CREATE the form with buttons, boxes, and others
using HTML tags and fields
5. SUBMIT button so that the form can be processed
6. END the form with the </form> tag. End the HTML
document with the </html> tag
Steps to make web forms
afm -INFO2301S1Y1314
16. <html>
<body>
<form name="input" action="html_form_action.php" method="get">
Type your first name:
<input type="text" name="FirstName" value="Mickey" size=“20”><br>
Type your last name:
<input type="text" name="LastName" value="Mouse" size=“20“><br>
<input type="radio" name="sex" value="male"> Male <br>
<input type="radio" name="sex" value="female"> Female
I have a bike: <input type="checkbox" name="vehicle" value="Bike“><br>
I have a car: <input type="checkbox" name="vehicle" value="Car"> <br>
<input type="submit" value="Submit">
</form>
<p>
If you click the "Submit" button, you will send your input to a new page called
html_form_action.php.
</p>
</body>
</html>
Steps to make web forms
afm -INFO2301S1Y1314
17. When the user presses submit...
When the submit button is pressed, the browser
arranges the data in name/value pairs
How a form works
afm -INFO2301S1Y1314
Example :
<form>
name=“formName" action="html_form_submit.php“
method="get">
Username:
<input type="text" name="username"> <-- user type mickey->
<input type="text" name=“surname"> <-- user type mouse->
<input type="submit" value=“submit">
</form>
18. ..what happens in between the form & the server is ..
The data arranged in name/value pairs, behind the scenes
the browser also encodes the data using standard URL
encoding:
This replaces spaces, slashes and other chars that are not
allowed in URLs by their hexadecimal equivalents
example 1: spaces are replaced by %20 (which may
display as '+'); slashes by %2F
Example 2: the user types Mickey and O Mouse into the
form The data is arranged and encoded as follows
firstname=Mickey&surname=O%20Mouse
How a form works
afm -INFO2301S1Y1314
19. ..in the end at the server is ..
After the data is encoded, the browser creates an
HTTP request
the command (method) is given by the method
attribute the URL is given by the action attribute if
method="get", the data is added to the end of the
URL after a question mark,
e.g.: GET
process.php?firstname=Mickey&surname=Mouse
How a form works
afm -INFO2301S1Y1314
21. Notes on POST and GET methods
Notes on GET:
Appends form-data into the URL in name/value pairs
The length of a URL is limited (about 3000 characters)
Never use GET to send sensitive data! (will be visible in the
URL)
Useful for form submissions where a user want to bookmark the
result
GET is better for non-secure data, like query strings in Google
Notes on POST:
Appends form-data inside the body of the HTTP request (data is
not shown is in URL)
Has no size limitations
Form submissions with POST cannot be bookmarked
How a form works
afm -INFO2301S1Y1314
22. Which method we need in form?
GET
The default method GET
sends submitted data to the server by attaching it to the end of
the URL in ‘the query string’
POST
used if the processing of a form causes side effects, likethe
modification of a database, updating a shopping cart, or sending
an email message
Sends submitted data to the server by bundling up the data and
put it into HTTP header message body
How a form works
afm -INFO2301S1Y1314
23. PHP holds values from a form in 3 ways
1) The simple short style. Example :$name, $id
// Available if the PHP directive register_globals = on. As of
// PHP 4.2.0 the default value of register_globals = off.
// Using/relying on this method is not preferred.
2) The medium style. Example :$_GET[‘name’], $_POST[‘id’]
// Available since PHP 4.1.0
3) The long style. Example : $HTTP_GET_VARS[‘name’],
$HTTP_POST_VARS[‘id’]
// As of PHP 5.0.0, these long predefined variables can be
// disabled with the register_long_arrays directive.
How PHP communicate with HTML form
afm -INFO2301S1Y1314