Web Programming Step by Step, 2nd Edition

Chapter 6: Forms

Except where otherwise noted, the contents of this document are Copyright 2012 Marty Stepp, Jessica Miller, and Victoria Kirst. All rights reserved. Any redistribution, reproduction, transmission, or storage of part or all of the contents in any form is prohibited without the author's expressed written permission.

Valid XHTML 1.1 Valid CSS!

6.1: Form Basics

Web data

Query strings and parameters


HTML forms

HTML form

HTML form: <form>

<form action="destination URL">
	form controls

Form example

<form action="http://www.google.com/search">
		Let's search Google:
		<input name="q" />
		<input type="submit" />

6.2: Form Controls

Form controls: <input>

<!-- 'q' happens to be the name of Google's required parameter -->
<input type="text" name="q" value="Colbert Report" />
<input type="submit" value="Booyah!" />

Text fields: <input>

<input type="text" size="10" maxlength="8" /> NetID <br />
<input type="password" size="16" /> Password
<input type="submit" value="Log In" />

Text boxes: <textarea>

a multi-line text input area (inline)

<textarea rows="4" cols="20">
Type your comments here.

Checkboxes: <input>

yes/no choices that can be checked and unchecked (inline)

<input type="checkbox" name="lettuce" /> Lettuce
<input type="checkbox" name="tomato" checked="checked" /> Tomato
<input type="checkbox" name="pickles" checked="checked" /> Pickles

Radio buttons: <input>

sets of mutually exclusive choices (inline)

<input type="radio" name="cc" value="visa" checked="checked" /> Visa
<input type="radio" name="cc" value="mastercard" /> MasterCard
<input type="radio" name="cc" value="amex" /> American Express

Text labels: <label>

<label><input type="radio" name="cc" value="visa" checked="checked" /> Visa</label>
<label><input type="radio" name="cc" value="mastercard" /> MasterCard</label>
<label><input type="radio" name="cc" value="amex" /> American Express</label>

Drop-down list: <select>, <option>

menus of choices that collapse and expand (inline)

<select name="favoritecharacter">
	<option selected="selected">Kramer</option>

Using <select> for lists

<select name="favoritecharacter[]" size="3" multiple="multiple">
	<option selected="selected">Newman</option>

Option groups: <optgroup>

<select name="favoritecharacter">
	<optgroup label="Major Characters">
	<optgroup label="Minor Characters">

Reset buttons

Name: <input type="text" name="name" /> <br />
Food: <input type="text" name="meal" value="pizza" /> <br />
<label>Meat? <input type="checkbox" name="meat" /></label> <br />
<input type="reset" />

Common UI control errors

Hidden input parameters

<input type="text" name="username" /> Name <br />
<input type="text" name="sid" /> SID <br />
<input type="hidden" name="school" value="UW" />
<input type="hidden" name="year" value="2048" />

6.4: Processing Form Data in PHP

Example: Exponents

$base = $_GET["base"];
$exp = $_GET["exponent"];
$result = pow($base, $exp);
print "$base ^ $exp = $result";
3 ^ 4 = 81

Example: Print all parameters

foreach ($_GET as $param => $value) {

	<p>Parameter <?= $param ?> has value <?= $value ?></p>


Parameter name has value Marty Stepp

Parameter sid has value 1234567

6.2: Form Controls

Grouping input: <fieldset>, <legend>

groups of input fields with optional caption (block)

	<legend>Credit cards:</legend>
	<input type="radio" name="cc" value="visa" checked="checked" /> Visa
	<input type="radio" name="cc" value="mastercard" /> MasterCard
	<input type="radio" name="cc" value="amex" /> American Express

Styling form controls

element[attribute="value"] {
	property : value;
	property : value;
	property : value;
input[type="text"] {
	background-color: yellow;
	font-weight: bold;

6.3: Submitting Data

Problems with submitting data

<label><input type="radio" name="cc" /> Visa</label>
<label><input type="radio" name="cc" /> MasterCard</label> <br />
Favorite Star Trek captain:
<select name="startrek">
	<option>James T. Kirk</option>
	<option>Jean-Luc Picard</option>
</select> <br />

The value attribute

<label><input type="radio" name="cc" value="visa" /> Visa</label>
<label><input type="radio" name="cc" value="mastercard" /> MasterCard</label> <br />
Favorite Star Trek captain:
<select name="startrek">
	<option value="kirk">James T. Kirk</option>
	<option value="picard">Jean-Luc Picard</option>
</select> <br />


Submitting data to a web server

HTTP GET vs. POST requests

Form POST example

<form action="http://foo.com/app.php" method="post">
		Name: <input type="text" name="name" /> <br />
		Food: <input type="text" name="meal" /> <br />
		<label>Meat? <input type="checkbox" name="meat" /></label> <br />
		<input type="submit" />


	# process a GET request
} elseif ($_SERVER["REQUEST_METHOD"] == "POST") {
	# process a POST request

The htmlspecialchars function

htmlspecialchars returns an HTML-escaped version of a string
$text = "<p>hi 2 u & me</p>";
$text = htmlspecialchars($text);   # "&lt;p&gt;hi 2 u &amp; me&lt;/p&gt;"

6.4: Processing Form Data in PHP

"Superglobal" arrays

Associative arrays

$blackbook = array();
$blackbook["marty"] = "206-685-2181";
$blackbook["stuart"] = "206-685-9138";
print "Marty's number is " . $blackbook["marty"] . ".\n";

Uploading files

<form action="http://webster.cs.washington.edu/params.php"
      method="post" enctype="multipart/form-data">
	Upload an image as your avatar:
	<input type="file" name="avatar" />
	<input type="submit" />
  • it makes sense that the form's request method must be post (an entire file can't be put into a URL!)
  • form's enctype (data encoding type) must be set to multipart/form-data or else the file will not arrive at the server

Processing an uploaded file in PHP

Uploading details

<input type="file" name="avatar" />

Processing uploaded file, example

$username = $_POST["username"];
if (is_uploaded_file($_FILES["avatar"]["tmp_name"])) {
	move_uploaded_file($_FILES["avatar"]["tmp_name"], "$username/avatar.jpg");
	print "Saved uploaded file as $username/avatar.jpg\n";
} else {
	print "Error: required file not uploaded";

Including files: include



function name(parameterName, ..., parameterName) {
function bmi($weight, $height) {
	$result = 703 * $weight / $height / $height;
	return $result;

Calling functions

name(expression, ..., expression);
$w = 163;  # pounds
$h = 70;   # inches
$my_bmi = bmi($w, $h);

Variable scope: global and local vars

$school = "UW";                   # global

function downgrade() {
	global $school;
	$suffix = "(Wisconsin)";        # local

	$school = "$school $suffix";
	print "$school\n";

Default parameter values

function name(parameterName = value, ..., parameterName = value) {
function print_separated($str, $separator = ", ") {
	if (strlen($str) > 0) {
		print $str[0];
		for ($i = 1; $i < strlen($str); $i++) {
			print $separator . $str[$i];
print_separated("hello");        # h, e, l, l, o
print_separated("hello", "-");   # h-e-l-l-o

Extra stuff about associative arrays

Creating an associative array

$name = array();
$name["key"] = value;
$name["key"] = value;
$name = array(key => value, ..., key => value);
$blackbook = array("marty"  => "206-685-2181",
                   "stuart" => "206-685-9138",
                   "jenny"  => "206-867-5309");

Printing an associative array

    [jenny] => 206-867-5309
    [stuart] => 206-685-9138
    [marty] => 206-685-2181

Associative array functions

if (isset($blackbook["marty"])) {
	print "Marty's phone number is {$blackbook['marty']}\n";
} else {
	print "No phone number found for Marty Stepp.\n";
name(s) category
isset, array_key_exists whether the array contains value for given key
array_keys, array_values an array containing all keys or all values in the assoc.array
asort, arsort sorts by value, in normal or reverse order
ksort, krsort sorts by key, in normal or reverse order

foreach loop and associative arrays

foreach ($blackbook as $key => $value) {
	print "$key's phone number is $value\n";
jenny's phone number is 206-867-5309
stuart's phone number is 206-685-9138
marty's phone number is 206-685-2181

A form that submits to itself

<form action="" method="post">

Processing a self-submitted form

	# normal GET request; display self-submitting form
	<form action="" method="post">...</form>
} elseif ($_SERVER["REQUEST_METHOD"] == "POST") {
	# POST request; user is submitting form back to here; process it
	$var1 = $_POST["param1"];

What is "Web 2.0"?

web 2.0

What is a web service?

web service: software functionality that can be invoked through the internet using common protocols

Content ("MIME") types

MIME type related file extension
text/html.html, .htm, ...
image/jpeg.jpg, .jpeg

Setting content type with header

header("Content-type: type/subtype");
header("Content-type: text/plain");
print("This output will appear as plain text now!\n");

Example: Exponent web service

The $_SERVER superglobal array

index description example
$_SERVER["SERVER_NAME"] name of this web server "webster.cs.washington.edu"
$_SERVER["SERVER_ADDR"] IP address of web server ""
$_SERVER["REMOTE_HOST"] user's domain name "hsd1.wa.comcast.net"
$_SERVER["REMOTE_ADDR"] user's IP address ""
$_SERVER["HTTP_USER_AGENT"] user's web browser "Mozilla/5.0 (Windows; ..."
$_SERVER["HTTP_REFERER"] where user was before this page "http://www.google.com/"
$_SERVER["REQUEST_METHOD"] HTTP method used to contact server "GET" or "POST"

Emitting partial-page HTML data

# suppose my web service accepts a "type" query parameter ...
<?php if ($_GET["type"] == "html") { ?>
		<?php foreach ($students as $kid) { ?>
			<li> <?= $kid ?> </li>
		<?php } ?>
<?php } ?>

Emitting XML data

header("Content-type: text/xml");
print("<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n");
<?php foreach ($books as $title) { ?>
	<book title="<?= $title ?>" />
<?php } ?>

Reporting errors

Using headers for HTTP error codes

header("HTTP/1.1  code  description");
if ($_POST["foo"] != "bar") {
	# I am not happy with the value of foo; this is an error
	header("HTTP/1.1 400 Invalid Request");
	die("An HTTP error 400 (invalid request) occurred.");
if (!file_exists($input_file_path)) {
	header("HTTP/1.1 404 File Not Found");
	die("HTTP error 404 occurred: File not found ($input_file_path)");

Checking for mandatory query parameters

function require_params($params) {
	# allow calling as a varargs function
	$params = func_get_args();
	foreach ($params as $param) {
		if (!isset($_POST[$param])) {
			header("HTTP/1.1 400 Invalid Request");
			die("HTTP/1.1 400 Invalid Request: missing required parameter $param");