Form Handling

Part 1
Course Title: Web Systems and Technologies
Course Code: CS-3548
Instructor: Nauman Ahmed
PAKISTAN INSTITUTE OF ENGINEERING & 1
TECHNOLOGY
OUTLINE

• Client Side User Interactions

• Building Forms
– Tags and Elements
– Form Processing
• HTTP methods
– GET
– POST

PAKISTAN INSTITUTE OF ENGINEERING & 2

TECHNOLOGY
OUTLINE

• Server Side Handling (PHP)

– Global Variables - Superglobals
• $_GET
• $_POST

PAKISTAN INSTITUTE OF ENGINEERING & 3

TECHNOLOGY
Flow of Information for Forms

HTML
Form
Input B Data from
r Form
Data from Form
User o Form Web Processing
w Server Program
s (CGI)
e HTML
Output Document Data
r
HTML Flow
Document
Database
Management
System

PAKISTAN INSTITUTE OF ENGINEERING & 4

TECHNOLOGY
FORM TAG

• An opening <form> and closing </form> tag

<form method="post" action="formtest.php">
What is your name?
<input type="text" name="name">
<input type="submit">
</form>

PAKISTAN INSTITUTE OF ENGINEERING & 5

TECHNOLOGY
FORM Elements

• Input Types
– Text boxes / The <input> Element
<input name="firstname" type="text">
– The <select> Element
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

PAKISTAN INSTITUTE OF ENGINEERING & 6

TECHNOLOGY
FORM Elements Continue...
– The <textarea> Element
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
– The <button> Element
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
• onclick is an evnt that occures when the user clicks on an element.

PAKISTAN INSTITUTE OF ENGINEERING & 7

TECHNOLOGY
FORM Elements Continue...
– Checkboxes with default value
<input type="checkbox" name="name" value="value"
checked="checked">
– Radio buttons with default value
8am-Noon<input type="radio" name="time" value="1">
Noon-4pm<input type="radio" name="time" value="2"
checked="checked">
4pm-8pm<input type="radio" name="time" value="3">
– Hidden fields
<input type="hidden" name="submitted" value="yes">'

PAKISTAN INSTITUTE OF ENGINEERING & 8

TECHNOLOGY
FORM Elements Continue...

• The <select> tag

<select name="veg" size="5">
<option value="Peas">Peas</option>
<option value="Beans">Beans</option>
<option value="Carrots">Carrots</option>
<option value="Cabbage">Cabbage</option>
<option value="Broccoli">Broccoli</option>
</select>

PAKISTAN INSTITUTE OF ENGINEERING & 9

TECHNOLOGY
Form Processing

• Get Method
– The GET method sends the encoded user information appended
to the page request. The page and the encoded information are
separated by the ? character.

– The GET method is restricted to send upto 1024 characters only.

– Never use GET method if you have password or other sensitive
information to be sent to the server.
– GET can't be used to send binary data, like images or word
documents, to the server.
PAKISTAN INSTITUTE OF ENGINEERING & 10
TECHNOLOGY
Form Processing Continue...

• POST Method
– The POST method does not have any restriction on data size to
be sent.
– The POST method can be used to send ASCII as well as binary
data.
– The data sent by POST method goes through HTTP header so
security depends on HTTP protocol. By using this method your
information is secure.

PAKISTAN INSTITUTE OF ENGINEERING & 11

TECHNOLOGY
Server Side Handling (PHP)

• Global Variables - Superglobals

– $_GETMethod
• The predefined $_GET Variable use to collect values in a form with
method=“get” information sent from a form with the GET method is
visible to everyone (it will be displayed in the browser address bar )
and has limits on the amount of information to send.
• $_GET Variable to collect form data ( the name of the form field will
automatically be the keys in the $_GET array )
• $_GET[“name”];
• $_GET[“fname”];
• $_GET[“age”];

PAKISTAN INSTITUTE OF ENGINEERING & 12

TECHNOLOGY
Server Side Handling (PHP) Continue...

• Global Variables - Superglobals

– $_POST Method
• The predefined $_POST Variable use to collect values in a form with
method=“post” information sent from a form with the POST method is
invisible to other and has no limits on the amount of information to
send.
• Note: there is an 8MB max size for the POST Method , by default (can
be changed
• by setting the post_max_size in the php.ini file )
• $_POST Variable to collect form data ( the name of the form field will
automatically be the keys in the $_POST array )
• $_POST[“name”];
PAKISTAN INSTITUTE OF ENGINEERING & 13
TECHNOLOGY
Example:

PAKISTAN INSTITUTE OF ENGINEERING & 14

TECHNOLOGY
What’s New in HTML5?

• The required Attribute

<input type='text' name='creditcard' required='required'>
• Override Attributes
<form action='url1.php' method='post'>
<input type='text' name='field'>
<input type='submit' formaction='url2.php'>
</form>
• The width and height Attributes
Using these new attributes, you can alter the dimensions of an input
image, like this:
<input type='image' src='picture.png' width='120' height='80'>
PAKISTAN INSTITUTE OF ENGINEERING & 15
TECHNOLOGY
What’s New in HTML5? Continue...

• The autocomplete Attribute

<form action='myform.php' method='post' autocomplete='on'>
<input type='text' name='username'>
<input type='password' name='password' autocomplete='off'>
</form>
• The autofocus Attribute
<input type='text' name='query' autofocus='autofocus'>
• The placeholder Attribute (A prompt)
<input type='text' name='name' size='50' placeholder='First & Last
name'>
PAKISTAN INSTITUTE OF ENGINEERING & 16
TECHNOLOGY
What’s New in HTML5? Continue...

• The form Attribute

<form action='myscript.php' method='post' id='form1'>
</form>
<input type='text' name='username' form='form1'>

• The list Attribute

Select destination:
<input type='url' name='site' list='links'>
<datalist id='links'>
<option label='Google' value='http://google.com'>
<option label='Yahoo!' value='http://yahoo.com'>
<option label='Bing' value='http://bing.com'>
<option label='Ask' value='http://ask.com'>
</datalist>
PAKISTAN INSTITUTE OF ENGINEERING & 17
TECHNOLOGY
Flow of Information for Forms

HTML
Form
Input B Data from
r Form
Data from Form
User o Form Web Processing
w Server Program
s (CGI)
e HTML
Output Document Data
r
HTML Flow
Document
Database
Management
System

PAKISTAN INSTITUTE OF ENGINEERING & 18

TECHNOLOGY
PHP Database Connection
$connection = mysqli_connect('localhost', 'root', 'password');
if (!$connection){
die("Database Connection Failed" .
mysqli_error($connection));
}
$select_db = mysqli_select_db($connection, 'project');
if (!$select_db){
die("Database Selection Failed" . mysqli_error($connection));

PAKISTAN INSTITUTE OF ENGINEERING & 19

TECHNOLOGY
CRUD Operations in PHP

• C – Create (INSERT SQL Query)

– $CreateSql = "INSERT INTO `crud` (first_name, last_name,
email_id, gender, age) VALUES ('$fname', '$lname', '$email',
'$gender', '$age')";
• R – Read (SELECT SQL Query)
– $SelSql = "SELECT * FROM `crud` WHERE id=$id";

PAKISTAN INSTITUTE OF ENGINEERING & 20

TECHNOLOGY
CRUD Operations in PHP

• U – Update (UPDATE SQL Query)

– $UpdateSql = "UPDATE `crud` SET
first_name='$fname', last_name='$lname',
gender='$gender', age=$age, email_id='$email'
WHERE id=$id";
• D – Delete (DELETE SQL Query)
– $DelSql = "DELETE FROM `crud` WHERE id=$id";

PAKISTAN INSTITUTE OF ENGINEERING & 21

TECHNOLOGY