Chapter 2

HTML Forms and Server Side Scripting

11/17/2023 Chapter 2 Advanced Internet Progr 1

amming
Create HTML Forms
• HTML Forms are required when you want to collect some
data from the site visitor.
• For example during user registration you would like to collect
information such as name, email address, credit card, etc.
• A form will take input from the site visitor and then will post
it to a back-end application such as CGI (Common Gateway
Interface), ASP Script or PHP script etc
• The back-end application will perform required processing
on the passed data based on defined business logic inside
the application. There are various form elements available
like text fields, text area fields, drop-down menus, radio
buttons, checkboxes, etc.

11/17/2023 Chapter 2 Advanced Internet Progr 2

amming
Continued
• The HTML <form> tag is used to create an HTML form
and it has following syntax:

• Attribute

11/17/2023 Chapter 2 Advanced Internet Progr 3

amming
• HTML Form Controls
• There are different types of form controls that
you can use to collect data using HTML form:
• Text Input Controls
• Checkboxes Controls
• Radio Box Controls
• Select Box Controls
• File Select boxes
• Hidden Controls
• Clickable Buttons
• Submit and Reset Button

11/17/2023 Chapter 2 Advanced Internet Progr 4

amming
• Text Input Controls
There are three types of text input used on forms:
Single-line text input controls - This control is used for
items that require only one line of user input, such as
search boxes or names.
They are created using HTML <input> tag.
Password input controls - This is also a single-line text
input but it masks the character as soon as a user
enters it. They are also created using HTMl <input> tag.
Multi-line text input controls - This is used when the
user is required to give details that may be longer than
a single sentence. Multi-line input controls are created
using HTML <textarea> tag.
11/17/2023 Chapter 2 Advanced Internet Progr 5
amming
11/17/2023 Chapter 2 Advanced Internet Progr 6
amming
• Output of the above html form code

11/17/2023 Chapter 2 Advanced Internet Progr 7

amming
 PHP Form Validation
• Think SECURITY when processing PHP forms!

These pages will show how to process PHP forms with

security in mind.

Proper validation of form data is important to protect

your form from hackers and spammers!

The HTML form we will be working at in these chapters,

contains various input fields: required and optional text
fields, radio buttons, and a submit button:

11/17/2023 Chapter 2 Advanced Internet Progr 8

amming
Validation

11/17/2023 Chapter 2 Advanced Internet Progr 9

amming
 Continued
• Rule for validation

11/17/2023 Chapter 2 Advanced Internet Progr 10

amming
 GET vs. POST
• Both GET and POST create an array (e.g. array( key => value, key2
=> value2, key3 => value3, ...)). This array holds key/value pairs,
where keys are the names of the form controls and values are the
input data from the user.

• Both GET and POST are treated as $_GET and $_POST. These are
super globals, which means that they are always accessible,
regardless of scope - and you can access them from any function,
class or file without having to do anything special.

• $_GET is an array of variables passed to the current script via the

URL parameters.

• $_POST is an array of variables passed to the current script via the

HTTP POST method.
11/17/2023 Chapter 2 Advanced Internet Progr 11
amming
 When to use GET?
• Information sent from a form with the GET method
is visible to everyone (all variable names and values
are displayed in the URL).

• GET also has limits on the amount of information to

send.

• The limitation is about 2000 characters. However,

because the variables are displayed in the URL, it is
possible to bookmark the page.

• This can be useful in some cases.

11/17/2023 Chapter 2 Advanced Internet Progr 12
amming
Continued
• GET may be used for sending non-sensitive data.
• Note: GET should NEVER be used for sending
passwords or other sensitive information!

11/17/2023 Chapter 2 Advanced Internet Progr 13

amming
 When to use POST?
• Information sent from a form with the POST method
is invisible to others (all names/values are embedded
within the body of the HTTP request) and has no
limits on the amount of information to send.

• Moreover POST supports advanced functionality such

as support for multi-part binary input while uploading
files to server.

• However, because the variables are not displayed in the

URL, it is not possible to bookmark the page.

11/17/2023 Chapter 2 Advanced Internet Progr 14

amming
Continued
What is the $_SERVER["PHP_SELF"] variable?

• The $_SERVER["PHP_SELF"] is a super global variable that

returns the filename of the currently executing script.

• So, the $_SERVER["PHP_SELF"] sends the submitted form data

to the page itself, instead of jumping to a different page. This
way, the user will get error messages on the same page as the
form.

11/17/2023 Chapter 2 Advanced Internet Progr 15

amming
 What is the html special chars() function?

The html special chars() function converts special

characters to HTML entities.

This means that it will replace HTML characters like <

and > with &lt; and &gt;.

This prevents attackers from exploiting the code by

injecting HTML or JavaScript code (Cross-site Scripting
attacks) in forms.

11/17/2023 Chapter 2 Advanced Internet Progr 16

amming
 Big Note on PHP Form Security

• The $_SERVER["PHP_SELF"] variable can be used by hackers!

• If PHP_SELF is used in your page then a user can enter a slash (/)
and then some Cross Site Scripting (XSS) commands to execute.

• Cross-site scripting (XSS) is a type of computer security

vulnerability typically found in Web applications. XSS enables
attackers to inject client-side script into Web pages viewed by
other users.

11/17/2023 Chapter 2 Advanced Internet Progr 17

amming
Continued
• We will also do two more things when the user submits the
form:
• Strip unnecessary characters (extra space, tab, newline) from
the user input data (with the PHP trim() function)
• Remove backslashes (\) from the user input data (with the
PHP stripslashes() function)
• The next step is to create a function that will do all the
checking for us (which is much more convenient than writing
the same code over and over again).
• We will name the function test_input().
• Now, we can check each $_POST variable with the
test_input() function, and the script looks like this:
11/17/2023 Chapter 2 Advanced Internet Progr 18
amming
• <!DOCTYPE HTML>
<html>
<head>
</head>
<body>

<?php
// define variables and set to empty values
$name = $email = $gender = $comment = $website = "";

if ($_SERVER["REQUEST_METHOD"] == "POST") {
$name = test_input($_POST["name"]);
$email = test_input($_POST["email"]);
$website = test_input($_POST["website"]);
$comment = test_input($_POST["comment"]);
$gender = test_input($_POST["gender"]);
}

function test_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
?>
11/17/2023 Chapter 2 Advanced Internet Progr 19
amming
• <h2>PHP Form Validation Example</h2>
<form method="post" action="<?php echo
htmlspecialchars($_SERVER["PHP_SELF"]);?>">
Name: <input type="text" name="name">
<br><br>
E-mail: <input type="text" name="email">
<br><br>
Website: <input type="text" name="website">
<br><br>
Comment: <textarea name="comment" rows="5"
cols="40"></textarea>
<br><br>
Gender:
<input type="radio" name="gender" value="female">Female
<input type="radio" name="gender" value="male">Male
<br><br>
<input type="submit" name="submit" value="Submit">
</form>
11/17/2023 Chapter 2 Advanced Internet Progr 20
amming
• <?php
echo "<h2>Your Input:</h2>";
echo $name;
echo "<br>";
echo $email;
echo "<br>";
echo $website;
echo "<br>";
echo $comment;
echo "<br>";
echo $gender;
?>

</body>
</html>
11/17/2023 Chapter 2 Advanced Internet Progr 21
amming
Continued
• Notice that at the start of the script, we check
whether the form has been submitted using
$_SERVER["REQUEST_METHOD"]. If the
REQUEST_METHOD is POST, then the form has
been submitted - and it should be validated. If it has
not been submitted, skip the validation and display
a blank form.
• However, in the example above, all input fields are
optional. The script works fine even if the user does
not enter any data.

11/17/2023 Chapter 2 Advanced Internet Progr 22

amming
PHP - Required Fields
• From the validation rules table on the previous page, we see
that the "Name", "E-mail", and "Gender" fields are required.
These fields cannot be empty and must be filled out in the
HTML form.

11/17/2023 Chapter 2 Advanced Internet Progr 23

amming
Continued
• In the following code we have added some new
variables: $nameErr, $emailErr, $genderErr, and
$websiteErr.
• These error variables will hold error messages for the
required fields. We have also added an if else statement
for each $_POST variable.
• This checks if the $_POST variable is empty (with the
PHP empty() function).
• If it is empty, an error message is stored in the different
error variables, and if it is not empty, it sends the user
input data through the test_input() function:
11/17/2023 Chapter 2 Advanced Internet Progr 24
amming
• <!DOCTYPE HTML>
<html>
<head>
<style>
.error {color: #FF0000;}
</style>
</head>
<body>

<?php
// define variables and set to empty values
$nameErr = $emailErr = $genderErr = $websiteErr = "";
$name = $email = $gender = $comment = $website = "";

if ($_SERVER["REQUEST_METHOD"] == "POST") {
if (empty($_POST["name"])) {
$nameErr = "Name is required";
} else {
$name = test_input($_POST["name"]);
}

11/17/2023 Chapter 2 Advanced Internet Progr 25

amming
• if (empty($_POST["email"])) {
$emailErr = "Email is required";
} else {
$email = test_input($_POST["email"]);
}

if (empty($_POST["website"])) {
$website = "";
} else {
$website = test_input($_POST["website"]);
}

if (empty($_POST["comment"])) {
$comment = "";
} else {
$comment = test_input($_POST["comment"]);
}

if (empty($_POST["gender"])) {
$genderErr = "Gender is required";
} else {
$gender = test_input($_POST["gender"]);
}
}

function test_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
?>

11/17/2023 Chapter 2 Advanced Internet Progr 26

amming
• <h2>PHP Form Validation Example</h2>
<p><span class="error">* required field.</span></p>
<form method="post" action="<?php echo
htmlspecialchars($_SERVER["PHP_SELF"]);?>"> • <?php
Name: <input type="text" name="name">
<span class="error">* <?php echo $nameErr;?></span>
echo "<h2>Your Input:</h2>";
<br><br> echo $name;
E-mail: <input type="text" name="email">
<span class="error">* <?php echo $emailErr;?></span> echo "<br>";
<br><br>
Website: <input type="text" name="website">
echo $email;
<span class="error"><?php echo $websiteErr;?></span> echo "<br>";
<br><br>
Comment: <textarea name="comment" rows="5" echo $website;
cols="40"></textarea>
<br><br>
echo "<br>";
Gender:
<input type="radio" name="gender"
echo $comment;
value="female">Female echo "<br>";
<input type="radio" name="gender" value="male">Male
<span class="error">* <?php echo $genderErr;?></span> echo $gender;
<br><br>
<input type="submit" name="submit" value="Submit">
?>
</form>
</body>
</html>
11/17/2023 Chapter 2 Advanced Internet Progr 27
amming
Continued
• The next step is to validate the input data, that is
"Does the Name field contain only letters and
whitespace?", and "Does the E-mail field contain a
valid e-mail address syntax?", and if filled out,
"Does the Website field contain a valid URL?".

11/17/2023 Chapter 2 Advanced Internet Progr 28

amming
PHP - Validate Name
• The code below shows a simple way to check if the
name field only contains letters and whitespace. If
the value of the name field is not valid, then store
an error message:
• $name = test_input($_POST["name"]);
if (!preg_match("/^[a-zA-Z ]*$/",$name)) {
$nameErr = "Only letters and white space
allowed";
}
The preg_match() function searches a string for pattern, returning true if the pattern
exists, and false otherwise.
11/17/2023 Chapter 2 Advanced Internet Progr 29
amming
PHP - Validate URL
• The code below shows a way to check if a URL
address syntax is valid (this regular expression also
allows dashes in the URL). If the URL address syntax
is not valid, then store an error message:
• $website = test_input($_POST["website"]);
if (!preg_match("/\b(?:(?:https?|ftp):\/\/|www\.)[-
a-z0-9+&@#\/%?=~_|!:,.;]*[-a-z0-9+&@#\/
%=~_|]/i",$website)) {
$websiteErr = "Invalid URL";
}

11/17/2023 Chapter 2 Advanced Internet Progr 30

amming
Continued
• PHP - Validate Name, E-mail, and URL
• Now, the script looks like this:

11/17/2023 Chapter 2 Advanced Internet Progr 31

amming
• <!DOCTYPE HTML>
<html>
<head>
<style>
.error {color: #FF0000;}
</style>
</head>
<body>

<?php
// define variables and set to empty values
$nameErr = $emailErr = $genderErr = $websiteErr = "";
$name = $email = $gender = $comment = $website = "";

if ($_SERVER["REQUEST_METHOD"] == "POST") {
if (empty($_POST["name"])) {
$nameErr = "Name is required";
} else {
$name = test_input($_POST["name"]);
// check if name only contains letters and whitespace
if (!preg_match("/^[a-zA-Z ]*$/",$name)) {
$nameErr = "Only letters and white space allowed";
}
}

11/17/2023 Chapter 2 Advanced Internet Progr 32

amming
• if (empty($_POST["email"])) {
$emailErr = "Email is required";
} else {
$email = test_input($_POST["email"]);
// check if e-mail address is well-formed
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
$emailErr = "Invalid email format";
}
}

if (empty($_POST["website"])) {
$website = "";
} else {
$website = test_input($_POST["website"]);
// check if URL address syntax is valid (this regular expression also allows dashes in the URL)
if (!preg_match("/\b(?:(?:https?|ftp):\/\/|www\.)[-a-z0-9+&@#\/%?=~_|!:,.;]*[-a-z0-9+&@#\/%=~_|]/i",$website)) {
$websiteErr = "Invalid URL";
}
}

if (empty($_POST["comment"])) {
$comment = "";
} else {
$comment = test_input($_POST["comment"]);
}

if (empty($_POST["gender"])) {
$genderErr = "Gender is required";
} else {
$gender = test_input($_POST["gender"]);
}
}

11/17/2023 Chapter 2 Advanced Internet Progr 33

amming
• function test_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
?>

<h2>PHP Form Validation Example</h2>

<p><span class="error">* required field.</span></p>
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
Name: <input type="text" name="name">
<span class="error">* <?php echo $nameErr;?></span>
<br><br>
E-mail: <input type="text" name="email">
<span class="error">* <?php echo $emailErr;?></span>
<br><br>
Website: <input type="text" name="website">
<span class="error"><?php echo $websiteErr;?></span>
<br><br>
Comment: <textarea name="comment" rows="5" cols="40"></textarea>
<br><br>
Gender:
<input type="radio" name="gender" value="female">Female
<input type="radio" name="gender" value="male">Male
<span class="error">* <?php echo $genderErr;?></span>
<br><br>
<input type="submit" name="submit" value="Submit">
</form>

<?php
echo "<h2>Your Input:</h2>";
echo $name;
echo "<br>";
echo $email;
echo "<br>";
echo $website;
echo "<br>";
echo $comment;
echo "<br>";
echo $gender;
?>

</body>
</html>

11/17/2023 Chapter 2 Advanced Internet Progr 34

amming
PHP - Keep The Values in The
Form
• To show the values in the input fields after the user
hits the submit button, we add a little PHP script inside
the value attribute of the following input fields: name,
email, and website. In the comment textarea field, we
put the script between the <textarea> and </textarea>
tags. The little script outputs the value of the $name,
$email, $website, and $comment variables.
• Then, we also need to show which radio button that
was checked. For this, we must manipulate the
checked attribute (not the value attribute for radio
buttons):

11/17/2023 Chapter 2 Advanced Internet Progr 35

amming
• Form

11/17/2023 Chapter 2 Advanced Internet Progr 36

amming
11/17/2023 Chapter 2 Advanced Internet Progr 37
amming
Continued
• Chapter 2 part 2.pptx

11/17/2023 Chapter 2 Advanced Internet Progr 38

amming