MS3304: Week 4

PHP & HTML Forms

Overview

• HTML Forms elements refresher• Sending data to a script via an

HTML form– The post vs. get methods– Name value pairs

• Capturing and using data sent via an HTML form

• Special formatting considerations

Forms – text box

<input type="text" name="myName" value="">

Attributes• Type – what type of form object• Name – the name of the object• Value – whatever is entered into the

text field

Forms – radio button

<input type="radio" name="gender" value="m">Male

<input type="radio" name="gender" value="f">Female

Attributes• Type – what type of form object• Name – the name of the group• Value – the value of each individual radio

button

Forms – checkbox

<input type="checkbox" name="Sprinkles" value="1">Sprinkles<input type="checkbox" name="chocSauce" value="2">Chocolate Sauce<input type="checkbox" name="whipped_cream" value="1">Whipped Cream

Attributes• Type – what type of form object• Name – the name of the object• Value – whatever is set as the value

Forms – pull down menu (select)<select name="size">

<option value="s">Small</option>

<option value="m">Medium</option>

<option value="l">Large</option>

</select>

Attributes• Name – the name of the pull down menu• Value – the value of each of the options within

the pull down menu

Forms – text area

<textarea cols="60" rows="5" name="myComment"></textarea>

Attributes• Cols – number of columns• Rows – number of rows• Name – the name of the object• Value – whatever is entered into the box. To

preload content you enter text in between the start and end tag

Forms – hidden

<input type="hidden" name="userID" value="pogoda">

Attributes• Type – type of object• Name – the name of the object• Value – the value of the object – hidden

in the browser window

Forms – submit button

<input type="submit" name="button1" value="Send">

Attributes• Type – type of object• Name – the name of the object• Value – the caption that appears on the

button

Forms – form

<form action="processForm.php" name="myForm" method="get"></form>

Attributes• Action – the URL of the script that the

data will be sent to – this is the page that will display once the submit button is clicked

• Name – the name of the form• Method – the way the data is sent to the

script

Input form example

• All objects must be inside of a form tag

• All objects inside a form tag have name and value attributes

Code Example

Input form example

• When a user makes a selection or enters data into a form element, the value of the element is automatically set

• The way the data is sent to the backend script is dependent upon the method attribute set in the form tag

Forms – the get method

• This is the default method• Sends a series of name value pairs

appended to the URL• It can be book marked• Can use the back button to reload

it• Limited to the amount of data that

can be sent

Forms – the post method

• Sends the name value pairs to the server invisibly – they are not seen by the user

• Cannot be book marked• Page must be reloaded if you use

the back button• Much larger amounts of data can

be sent

PHP $_POST[] & $_GET[] superglobals

• In order to get at the values stored in the name value pairs you use the $_POST[] and $_GET[] superglobals

• These superglobals are really arrays. They hold information about all the name value pairs that are sent to the script from the form.

• The superglobal used is based on the method chosen in the form action

PHP $_POST[]

For the form element on the input page:

<form action="post" action="processForm.php“><input type="text" name="myCat" value="" size="20“></form>

In order to get at the value entered into the myCat formelement you would use the following code:

echo “I have a cat named ” . $_POST[‘myCat’];

PHP $_GET[] example

For the form element on the input page:

<form action=“get" action="processForm.php“><input type="text" name="myCat" value="" size="20“></form>

In order to get at the value entered into the myCat formelement you would use the following code:

echo “I have a cat named ” . $_GET[‘myCat’];

PHP $_POST[] & $_GET[] variables example

It is also possible to assign the value to a variable, and then use it

$myCat = $_GET[‘myCat’];echo “I have a cat named $myCat.”

For clarity it is good practice to name your variables the same as the form elements

Escaping quotation marks in strings

• When sending data to a sever via an input form, PHP automatically escapes single and double quotation marks

• If you wish to be able to view the text as it was typed you need to unescape the escaped characters

stripslashes( )

The stripslashes() function will remove the escape characters from any string

stripslashes(stringOrVariable);

You should use stripslashes() on any form value that might contain double or single quotation marks

Server-side forms in PHP

• Data entered by a user via an HTML form is passed to a backend script in name/value pairs

• The values associated with each form can be accessed via the $_POST[] or $_GET[] arrays depending on the form method attribute

• Passed values can be displayed or stored in variables

• PHP automatically escapes all single and double quotation marks which must be unescaped using stripslashes() to view properly

Forms input – your turn

Write the code for the HTML and PHP pages that display the following student marks calculator where CW1 and CW2 are both worth 50% of the overall mark

marksResults.php

marksForm.php