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="[Link]">
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 [Link] 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='[Link]' method='post'>
<input type='text' name='field'>
<input type='submit' formaction='[Link]'>
</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='[Link]' width='120' height='80'>
PAKISTAN INSTITUTE OF ENGINEERING & 15
TECHNOLOGY
What’s New in HTML5? Continue...
• The autocomplete Attribute
<form action='[Link]' 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='[Link]' 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='[Link]
<option label='Yahoo!' value='[Link]
<option label='Bing' value='[Link]
<option label='Ask' value='[Link]
</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
