03 the htm_lforms

HTML
afm -INFO2301S1Y1314
FORMS
THE

Contents
 Relations between PHP and HTML forms
 Requirements for use of forms
 How form works

The two important tasks in dynamic websites
I. Creating data
II. Processing Data
The relationships:

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

 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

The typical use of HTML forms

 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
Example :
<html>
<form name:”fname” action =“input_dest.php” method=“post”>
<! - -
--- form inputs
- - >
</form>
<html>

 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.

 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.
Example :
<form>
First name:
<input type="text" name="firstname"> <br>
Last name:
<input type="text" name="lastname">
</form>

 Radio Buttons
 Radio Buttons are used when you want the
user to select one of a limited number of
choices.
Example :
<form>
<input type="radio" name="sex“
value="male"> Male <br>
<input type="radio" name="sex" value="female">
Female
</form>

 Checkboxes
 Checkboxes are used when you want the user to
select one or more options of a limited number of
choices.
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>

 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.
Example :
<form>
<input type=“submit“ ></br>
<input type=“submit" value=“HANTAR" />
</form>

 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.
Example :
<form>
name=“formName" action="html_form_submit.php“
method="get">
Username:
<input type="text" name="user">
<input type="submit" value=“submit">
</form>

 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:
Example :
<form>
<input type="text" name="user">
<input type=“reset" value=“padam">
</form>

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

<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

 When the user presses submit...
 When the submit button is pressed, the browser
arranges the data in name/value pairs
How a form works
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>

 ..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

 ..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

 an illustration..
How a form works

 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

 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

 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

 Example PHP codes on receiving ends..
<html>
<body>
<?php
// Medium style;
$name = $_GET['your_name'];
$phone = $_GET['your_phone'];
$email = $_GET['your_email_addr'];
$this_file_dir = $_SERVER['PHP_SELF'] ;
echo ‘You’ve registered as‘.$name.’<br>’;
echo ‘Your phone number is’.$phone.’<br>’;
echo ‘Your email’.$email.’<br>’;
echo ‘this php file directory/path is ‘. $this_file_dir;
?>
</body>
</html>

03 the htm_lforms

More Related Content

What's hot (20)

Viewers also liked (9)

Similar to 03 the htm_lforms (20)

More from IIUM (20)

Recently uploaded (20)

03 the htm_lforms