CHAPTER 3

HTML FORMS AND SERVER SIDE

SCRIPTING

Contents
Working more on html form.
Validating form data.

 Introduction to regular expression.

Review of HTML Forms
 Forms are essential to any Web page that communicates
with users.
 When you order a book or a pillow, register for a course,
sign up for a cruise, pay bills online, get directions to a
street address, you fill out a form.
 Once you have filled out the form, you push an Order
now! or Submit type button, and the form is submitted.
 The information you entered is collected by the browser,
URL encoded, and sent to a server. The server might
then send the encoded information to a program for
processing
 Working with forms is a two-step process:
1. Create the HTML form.
2.Process the information entered into the form.
The Browser’s Role
 HTML forms are created in a text file and displayed in
a browser window.
 They consist of fields or buttons that request user
interaction .
 After the user fills out the form, the form data is URL
encoded by the browser and submitted to a server for
further processing.
 Example 10.3 shows a really simple HTML form
consisting of two input fields, a text box, and a submit
button.
FIGURE 10.3. THE USER FILLS OUT THE
FORM.
 There are different ways of sending this data to the
server called HTTP request methods. (HTTP is the
standard way of sending documents over the Web.
 The GET and POST methods are the two most
common request types.
 Essentially these methods perform the same function
but how they handle the input data is different.
The GET Method
 The GET method is the simplest type of method and
is used mainly for the simple retrieval of static HTML
documents, images, or results of a database query as
shown in the URL of Google‟s search engine.

 Figure 4.23. The GET method sends form input

in the URL.
The POST Method
 The POST method is used if the processing of a form
causes side effects, like the modification of a database,
updating a shopping cart, or sending an e-mail
message.
 When the POST method is used, the browser does not
put the encoded data in a query string, but rather
bundles up the data and puts it into an HTTP header
message body.
 The POST is invoked by adding a METHOD attribute to
the <FORM> tag in your HTML document.
 If using the POST method, the METHOD attribute
must be added to the HTML <form> tag
METHOD="POST" (case insensitive).
 Figure 4.24. The POST method sends form input in an HTTP
header.
The Server’s Role
 When the browser requests a Web page from the
server, it establishes a TCP/IP connection and sends a
request in an HTTP format. The server examines the
request and responds. The first line of the HTTP
request might look like this: GET /file.php HTTP/1.1

 This line specifies that the method to handle the

incoming data is GET, that the file to retrieve is
file.php, and that the version of HTTP is 1.1.
 PHP runs as part of the server and has access to the
form data passed from the browser to the server.
After the server gets the file, it sends it to PHP to be
processed
Creating HTML Forms
To create an HTML form, you start in an editor with a filename
ending in .html or .htm
The Steps to Produce a Form
 The following steps are essential in producing a form. The
next example illustrates how each of these steps is applied.
1. START: Start the form with the HTML <form>
tag.
2.ACTION: The action attribute of the <form> tag i
s the URL of the PHP script that will
 process the data input from the form.
3.METHOD: Provide an HTTP method on how to
process the data input.
The default is the GET method, but the POST
method is most commonly used with forms
4.CREATE: Create the form with buttons, boxe
s, and whatever looks attractive using HTM
L tags and fields.
5.SUBMIT: Create a submit button so that t
he form can be processed. This will launch
the program listed in the action attribute.
6.END: End the form with the </form> tag.
End the HTML document with the </html>
tag.
 FORM INPUT TYPES
 Input Type Attributes
text name size maxlength
Creates a text box for user input. size spec
ifies the size of the text box. maxlength s
pecifies the maximum number of characters
 text area name size rows size cols allowed.
Creates a text area that can take input
spanning multiple lines. size rows and size
cols specify the size of the box.
 password name value
Like a text box but input is hidden.
 Asterisks appear in the box to replace char
acters typed.
 checkbox name value
Displays a square box that can be checked.
 Creates name valuepairs from user input.
Multiple boxes can be checked.
 radio name value
Like check boxes, except only one box (or ci
rcle) can be checked.
 select name option size multiple
 Provides pop--
‐up menus and scrollable lists. Only one can
be selected. Attribute multiple creates a visib
ly scrollable list.
A size of 1 creates a pop--
‐up menu with only one visible box.
 file name
Specifies files to be uploaded to the server
. MIME type must be
 hidden name value
 Provides namevalue pair without displaying an
object on the screen.
 submit name value
When pressed, executes the form; launches CGI.
 image src value align
The method Attribute
 In an HTML document, the <form> tag starts the form.
The method attribute of the <form> tag tells the
browser how to send the input data collected from the
user, and the action attribute tells the browser where
to send the data.
 The most commonly used methods are GET and POST.

<form action="/phpforms/form1.php" method="POST">

The action Attribute
 The action attribute is where the form data is going.
This is the URL of a program on the server that will
process the data by decoding the URL-encoded query
string or message body; that is, replacing + signs with
spaces, hexadecimal characters with their ASCII
equivalent, removing ampersands, and so on.
 Eg. <form action="/phpforms/form1.php"
method="POST">
 PHP AND FORMS
 There are number of ways that a PHP script can accept
user input. As you might recall, in an HTML form, the
form elements are given names.
 For example, in the following simple text box, the name is
an attribute of the input device: (The HTML Form)
 What is your zip code? <input type="text" name="zipcode"
maxlength = 20>
 What is your zip code? <input type="text" name="zipcode"
maxlength = 20>
(The PHP script)
echo "You entered ", $zipcode , "<br />"; // Short style echo
"You entered ",
$_GET["zipcode"] , "<br />"; // Medium style echo "You
entered ",
$HTTP_GET_VARS["zipcode"] , "<br />"; // Long style

 In this example, when PHP collects form information

from the server, it decodes it, and assigns it to variables,
making them automatically available to PHP scripts.
 PHP has three styles for storing form information: the
short style, the medium style, and the long, old style.
 The three ways that PHP creates variables to hold
form information are:
1. The simple short style, for example, $name, $id .
2. The medium style, for example, $_GET['name'],
$_POST['id'].
3. The long style, for example, $HTTP_GET_VARS['name'],
$HTTP_POST_VARS['id'].
PROCESSING FORMS WITH MULTIPLE
SELECTIONS
Creating the Form with Select and Check Boxes
 With the select and checkbox input devices, the name of the
device is appended with a set of array brackets when
multiple choices can be selected

 HTML forms that allow the user to pick more than one
selection in a list or a check box are created with select tags
(when the "multiple" attribute is set) and checkbox input
types.
 Instead of PHP generating a single variable for multiple
choices, an array is better suited for that task.
Example
<select name="movies[]">
<input type=“checkbox” name="colors[]" value="red">
(The HTML form)
<html><head><title>Multiple Choice</title></head>
<body bgcolor="aqua">
<form action="checkbox.php" method="POST">
<b>Choose a vacation spot:</b>
<br />
<select name="location[]" multiple="multiple">
<option>Maui
<option>Bali
<option>Miami
<option>Riviera
</select> <p>
<b>Select a city:</b>
<br />
<input type="checkbox" name="place[]" value="New York"
/>NewYork
<br />
<input type="checkbox" name="place[]" value="Chicago" />Chicago
<br />
<input type="checkbox" name="place[]" value="London" />London
<br />
<input type="checkbox" name="place[]" value="Tokyo" />Tokyo
<br />
<input type="checkbox" name="place[]" value="San Francisco"
Checked />San Francisco
<p>
<input type="submit" value="submit" />
<input type="reset" value="clear" />
</form>
</body>
CodeView:
<html><head><title><Forms and User-defined Arrays>
</title></head>
<body bgcolor="8CCCCA">
<br />
<fieldset><legend><b>Vacation Choices</b></legend>
<?php
// Medium style
if (is_array($_POST['location']))
{
print "<ul>";
foreach ( $_POST['location'] as $key=>$value )
{
print "<li>$key=>$value</li>";
}
print "</ul>";
}
?>
</fieldset>
<fieldset><legend><b>City Choices</b></legend>
<?php
//extract($_POST);
if (is_array($_POST[„place‟]))
{
print "<ul>";
foreach ( $place as $key=>$value )
{
print "<li>$key=>$value</li>";
}
print "</ul>";
}
?>
</fieldset></body></html>
 SELF-PROCESSING HTML FORMS
 Rather than creating a separate HTML document to
display a form and another PHP script to process the user
input, you might want to combine the HTML document
containing the form and the PHP script that processess it
all into one script.
 This is done by assigning the $_SERVER['PHP_SELF']
array to the action attribute of the HTML <form> tag
Examples
<?php
// Was the form submitted?
$your_name=$_POST['your_name'];
$your_phone=$_POST['your_phone'];
print "<b>Your name is $your_name<br />";
print "Your phone is $your_phone<br />";
?>
Code View:
<?php
if ( isset($_POST['submit']))
{
// Was the form submitted?
$your_name=$_POST[„your_name‟];
$your_phone=$_POST[„your_phone‟];
print "<b>Your name is $your_name<br />";
print "Your phone is $your_phone<br />";
print "The path to this file is: “.$_SERVER['PHP_SELF']."<br />";
}
else{ ?>
<html><head><title>HTML Form</title></head>
<body bgcolor="lightblue"><font size="+1">
<form action="<?php echo $_SERVER['PHP_SELF'];?>”
method="POST">
}
<p />
Please enter your name: <br />
<input type="text" size=50 name="your_name">
<p />
Please enter your phone: <br />
<input type="text" size=50 name="your_phone">
<p />
<input type="submit" name="submit" value="Send Now">
<input type=reset value="Clear">
</form>
<hr>
</html>
<?php } ?>
END!!!