ITM 352
HTML Forms,
Basic Form Processing
ITM 352 - © Port, Kazman
1
Some Inspiration!
 Perseverance: never giving up
 Indomitable Spirit: never wanting to give up
 Formula for success
 Perseverance
+ Indomitable Spirit = Success
 Indomitable Spirit


“Get to your limit and see what’s on the other side” - Yoga
"Try not. Do, or do not. There is no try." - Yoda

“Suffering is optional” – Yoghurt

“If you’re brain is hurting it just means you’re learning” – P2
ITM 352 - © Port, Kazman
2
What We Will Cover Today
 Today we will explore HTML forms in
some detail:
 Details
on <FORM>
 Input types
 Compound types
 Some tips for HTML form elements
ITM 352 - © Port, Kazman
3
Form Parts
<form action = 'xxx' method = 'yyy'>
<form stuff goes here>
</form>
 action is the file you want to go to (could be
html or php)
 method should be either POST or GET
ITM 352 - © Port, Kazman
4
Action
 An action
should be a URI (e.g. a file name in the current
folder) or a full web address, e.g.
http://www.somewebserver.com/myfile.php)
 Example:
<form action = 'invoice.php'>
…
</form>
 This will take the user to the invoice.php page in the
current directory when the user presses the submit button.
Note: You should always use quotes around the
URI in case it has special characters or spaces.
ITM 352 - © Port, Kazman
5
Method
 The method can be either 'POST' or 'GET'.
 $_GET and $_POST are arrays built into PHP
which make form processing a lot easier.
 Form variables are stored as keys (elements) of
these arrays, indexed by their name
 To see what is in the array just do a
var_dump() e.g. var_dump($_GET);
 TIP: put var_dump()at the top of form processing files
so you can see what is sent from the form
ITM 352 - © Port, Kazman
6
Submit Button
Usually you need to have a submit button to invoke a
form's action, e.g.:
<input type = 'SUBMIT'
name = 'the name you want to appear in the POST/GET array'
value = 'the label in the button '
>
ITM 352 - © Port, Kazman
7
Example: Login
<form action ='invoice.php' method = 'POST'>
<input type = 'SUBMIT' name = 'submit_button'
value = 'Login'>
</form>
Do Lab #1
ITM 352 - © Port, Kazman
8
Input types (single value)
A generic input type looks like this:
<input type = '<type>'
name = '<the name in the POST/GET array>'
value = '<the value you want to set it to>'
>
ITM 352 - © Port, Kazman
9
The Basic Input Types
 Text
 Password
 Hidden
 Radio
 Checkbox
 Submit
ITM 352 - © Port, Kazman
10
Login
<?php
print "logged in " . $_POST['username'];
?>
<form action = 'process_login.php' method =
'post'>
<input type = 'text' name = 'username'>
<input type = 'password' name = 'password'>
<input type = 'submit' name = 'submit_button'
value = 'login'>
</form>
Do Lab #2
ITM 352 - © Port, Kazman
11
Self-Processing Form
 Sometimes you want to stay on the same page
when processing your forms
<form action = '<?= $_SERVER["PHP_SELF"]?>' method = 'post'>
</form>
is the same as:
<form action = '<?php $_SERVER["PHP_SELF"] ?>'method = 'post'>
</form>
 <?= is short for echo when embedding PHP in
HTML
 You can use $PHP_SELF or $_SERVER['PHP_SELF']
ITM 352 - © Port, Kazman
12
Login
if( array_key_exists('submit_button', $_POST) ) {
print "logged in " . $_POST['username'];
}
else {
?>
<form action = '<?php $_SERVER['PHP_SELF'] ?>' method =
'post'>
<input type = 'text' name = 'username'>
<input type = 'password' name = 'password'>
<input type = 'submit' name = 'submit_button' value =
'login'>
</form>
<?php } ?>
Do Lab #3
ITM 352 - © Port, Kazman
13
GET method
<form method = 'get'> … </form>
GET will show the information being passed
between pages as part of the URL.
Good tool for error checking
 However, it is not secure because users can see
the full contents of the request.
 Pages can be cached.

ITM 352 - © Port, Kazman
14
POST method
<form method = 'post'> … </form>
POST will hide information being passed
between pages in the address bar.
HINT: use GET for error checking; change to
POST when submitting your work
 More secure than GET
 Pages won't be cached.

Do Lab #4
ITM 352 - © Port, Kazman
15
Compound Types
 Select
 Text area
 List box
 Compound types enable multiple inputs and/or
outputs
 Unlike input types, compound types always use a
begin and end tag
<select name='a_select_box'> …
</select>
ITM 352 - © Port, Kazman
16
Login
if( array_key_exists('submit_button', $_POST) ) {
print "logged in " . $_POST['username'];
}
else {
?>
<form action = '<?php $_SERVER['PHP_SELF'] ?>'
method = 'post'>
<select name='username'>
<option>Moe</option>
<option>Larry</option>
<option>Curly</option>
</select>
<input type = 'password' name = 'password'>
<input type = 'submit' name = 'submit_button'
value = 'login'>
</form>
<?php } ?>
ITM 352 - © Port, Kazman
17
Select Boxes
 Select boxes provide a drop down set of options
for the user to choose from.
Value is whatever the user chooses when the submit
button is pressed
 If no value parameter is set, the value defaults to the
label

 <SELECT
name="a_select_box">
<OPTION value="value_of_thing1">thing1</OPTION>
<OPTION value="value_of_thing2">thing2</OPTION>
<OPTION value="value_of_thing3">thing3</OPTION>
</SELECT>
ITM 352 - © Port, Kazman
18
Text Area
 Text Area provide a region of size row X
cols to display and input text.
 Value
is whatever is in the area when the
submit button is pressed
<TEXTAREA name="a_test_area" rows="20"
cols="40">
This is some text in the text area.
</TEXTAREA>
ITM 352 - © Port, Kazman
19
Tips and Hints
 Use single ' ' on the inside, " " around the outside
or vice versa
 Take advantage of PHP by using for/while/foreach
to generate multiple form elements and compound
types
 Quotes must be used around anything with spaces
Do Extra Credit (optional)
ITM 352 - © Port, Kazman
20