phptut2

20-5555: Programming for Excel and the Web

20-5555: Web Programming - PHP Tutorial 2

The object of this session is to gain further experience with the use of HTML forms and
PHP.
We first look at the HTML side of things. Here is a list of the most common form
elements that are available:

TEXTBOX (3 types)
<input type="text" name="person" value="Bill" size="16">
<input type="password" name="person" value="dews" >
<input type="hidden" name="age" value="99">

Referred to in PHP using the name attribute. Value is default value for the first two
and the value passed on for the third. Size is box width. The hidden type allows you
to pass any additional information to your PHP script – but it will not be visible on the
HTML form.

RADIO BUTTON (OPTION BUTTON)
<input type="radio" name="color" value="red" checked>Red
<input type="radio" name="color" value="green">Green
<input type="radio" name="color" value="blue">Blue

Provides a means of choosing one from a few options (mutually-exclusive). All must
have the same name – this is used by PHP. The name becomes the PHP variable, and
the value is what this variable will contain. The one with the checked attribute is
the one initially selected.

CHECKBOX
<input type="checkbox" value="yes" name="Milk" checked>with Milk

Provides a means of supplying a yes/no choice. The checked property means it is
checked initially. The PHP variable will be the name attribute and the value passed on
will be either the contents of the value attribute, if the box is checked, or nothing if
it is not checked.

BUTTONS
<input type="submit" value="submit Me">
<input type="reset" value="Reset Form">
<input type="button" value="Click Me" onclick="Javascript:abc()">

There are three basic types of button – a submit button, that will submit a form, a
reset button that will restore defaults, and a button that can be linked to a Javascript
function.

1

PHP: Tutorial 2

OPTION LIST
<select name="colour" size="6">
<option value="red" SELECTED>Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
<option value="orange">Orange</option>
<option value="pink">Pink</option>
.
.
.
</select>

This is a drop-list – useful for when there are too many options to use option buttons.
As before, the name provides PHP with the variable name and the value with the
value that is passed on. The one with the selected attribute is the default. Size
gives the number of rows visible at any one time in the drop-list.

TEXTAREA
<textarea cols="12" rows="22" name="memo">Default text</textarea>

This is a ‘memo’ field – a text-entry box allowing multi-line entry. The cols and
rows attributes give the dimensions of the box, and the name is the variable
containing the text entered. “Default text” is the text that initially appears in the box,
and may be blank.

2


An example of an HTML form that includes all of the above:

<html><head><title>20-5555: PHP Tut2, Example 1</title>
</head>
<body>
<h1>20-5555: Web Programming</h1>
<h2>PHP Tutorial 2 - Exercise 1</h2>
<hr size="1">
<h3>Example of a web form including all common form elements</h3>
<p></p>
<table cellpadding="10" cellspacing="0" border="1" bgcolor="#ffdab9">
<tr><td>
<form action="Tut2Ex1.php" method="post">
<input type="hidden" name="SecretWord" value="supercalifragilistic">
Your Name please: <input type="text" name="Ex1_name" value="Algernon">
<p>
Enter a password: <input type="password" value="dews"
name="Ex1_password">
<p>
Pick a colour:
<input type="radio" value="red" name="Ex1_colour" checked>Red  
<input type="radio" value="green" name="Ex1_colour">Green  
<input type="radio" value="blue" name="Ex1_colour">Blue
<p>
Do you like
<input type="checkbox" value="yes" name="Ex1_sugar"> sugar,
<input type="checkbox" value="yes" name="Ex1_milk" checked> milk with your coffee?
<p>
<input type="button" value="Click me" onclick="Javascript:alert('OW!n
What did you do that for??!')">
<p>
What's your favourite item of clothing?:
<select name="Ex1_BestDuds" size="2">
<option value="trousers" SELECTED>Trousers</option>
<option value="hat">Hat</option>
<option value="G-string">G-String</option>
<option value="Leotard">Leotard</option>
<option value="Birthday Suit">Birthday Suit</option>
</select>
<p>
<textarea cols="60" rows="5" name="Ex1_Comment">Enter a comment or two
here ..</textarea>
<p>
<input type="submit" value="Send me your sorry life!"><input
type="reset">
</form>
</td></tr>
</table>
</body>
</html>

3

PHP: Tutorial 2

RESULT BELOW … [See what happens if you change to ‘method’ attribute of the FORM
tag to ‘get’ instead of ‘post’]

Now for the PHP code that the form links to (Tut2Ex1.php) …

4


<html><head><title>20-5555: PHP Tut2, Example 1</title>
</head>
<body>
<h1>20-5555: Web Programming</h1>
<h2>PHP Tutorial 2 - Exercise 1</h2>
<hr size=1>
Results of the form ..<p></p>
<table cellpadding=10 cellspacing=0 border=1 bgcolor="#ffdab9">
<tr><td>
<?php
#OK to parse
$SecretWord=$_REQUEST['SecretWord'];
$Ex1_name=$_REQUEST['Ex1_name'];
$Ex1_password=$_REQUEST['Ex1_password'];
$Ex1_colour=$_REQUEST['Ex1_colour'];
$Ex1_sugar=$_REQUEST['Ex1_sugar'];
$Ex1_milk=$_REQUEST['Ex1_milk'];
$Ex1_BestDuds=$_REQUEST['Ex1_BestDuds'];
$Ex1_Comment=$_REQUEST['Ex1_Comment'];
print "Hidden field "SecretWord": $SecretWord<br>n";
print "Your name: $Ex1_name<br>n";
print "Your password: $Ex1_password<br>n";
print "Your colour: $Ex1_colour<br>n";
print "You like sugar in your coffee - $Ex1_sugar<br>n";
print "You like milk in your coffee - $Ex1_milk<br>n";
print "Favourite item of clothing is - $Ex1_BestDuds<br>n";
print "Comment: $Ex1_Comment<br>n";
?>
</td></tr>
</table>
</body>
</html>

Note the use of the global $_REQUEST array to get the contents of each form field.

with this result (for example) ….

5

PHP: Tutorial 2

FORM VALIDATION
To validate a form you use Javascript. When the form is submitted you want to be
able to check the form fields for valid data before they are sent to the server. This will
help to reduce unnecessary communication and ease bandwidth. You do this by
adding something like the following to the <FORM> tag:
<FORM … onsubmit=”return ValidateForm(this)”>
This re-directs control to a Javascript function (in this case called ‘ValidateForm’)
passing it a reference to the form from which it is called (this). This function must
generate a return value of ‘True’ or ‘False’ and the form is only submitted if the value
is ‘True’. It is then up to the Javascript function to extract each item of information
from the form and validate its contents.
Here is an example - add the following to the <head> section of the html page:

<script language="JavaScript1.1">

</script>

and change the form tag to this:

6


<form action="Tut2Ex1.php" method="post" onsubmit="return CheckForm(this);">

When running the program now, a typical response would be:

The Javascript can intercept the data from the form and process them before being
submitted to PHP. After clicking ‘OK’ on this alert box, the form is submitted and the
previous response is obtained from PHP.
If, however, the name field is empty, we get

in this case AFTER the previous box had appeared (that’s just the way the Javascript is
written) and the form is NOT submitted to PHP.

TRY:
• Adding a text field that asks for the person’s age. The Javascript should check that
a positive number < 120 has been entered.
• Changing the way the form works so that the output appears in a new window. To
do this, you can execute a line of Javascript of the form ..

newWindow=window.open(url,"newWin","toolbar=no,scrollbars=yes,
width=600,height=800")
(all on one line). The url parameter will reference the PHP script, but must also
pass on the full set of form data values, as a query string. Your Javascript must
therefore construct this, so that (for example)
url=myscript.php?name=george&colour=red&sugar=false& ….
It is normal practice that when your code opens a new window, it should also provide
a means of closing it! Again a simple bit of Javascript will do this ..
Text link: <a href="Javascript:self.close()">Close this window</a>
Button:
<form><input type="button" value="Close Window" onclick="self.close()"></form>

7

phptut2

Recommended

Recommended

More Related Content

What's hot

What's hot (14)

Viewers also liked

Viewers also liked (14)

Similar to phptut2

Similar to phptut2 (20)

More from tutorialsruby

More from tutorialsruby (20)

Recently uploaded

Recently uploaded (20)

phptut2