Web Programming Step by Step

Chapter 6
HTML Forms and Server-side Data

Except where otherwise noted, the contents of this presentation are Copyright 2009 Marty Stepp and Jessica Miller.

Valid XHTML 1.1 Valid CSS!

6.1: Form Basics

Web data

Query strings and parameters (6.1.1) 

URL?name=value&name=value...

http://example.com/student_login.php?username=stepp&sid=1234567

HTML forms

HTML form

HTML form: <form> (6.1.2) 

<form action="web service URL">
	form controls
</form>

Form example 

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

Form controls: <input> 

<input type="text" name="q" value="Colbert Report" />
<input type="submit" value="Booyah!" />

6.2: Form Controls

Text fields: <input> (6.2.1) 

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

Text boxes: <textarea> (6.2.2)

a multi-line text input area (inline) 

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

Checkboxes: <input> (6.2.3)

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" /> Pickles

Radio buttons: <input> (6.2.4)

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> (6.2.5) 

<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> (6.2.6)

menus of choices that collapse and expand (inline) 

<select name="favoritecharacter">
	<option>Jerry</option>
	<option>George</option>
	<option>Kramer</option>
	<option>Elaine</option>
</select>

Using <select> for lists

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

Option groups: <optgroup> 

<select name="favoritecharacter">
	<optgroup label="Major Characters">
		<option>Jerry</option>
		<option>George</option>
		<option>Kramer</option>
		<option>Elaine</option>
	</optgroup>
	<optgroup label="Minor Characters">
		<option>Newman</option>
		<option>Susan</option>
	</optgroup>
</select>

Reset buttons (6.2.7) 

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" />

Grouping input: <fieldset>, <legend> (6.2.8)

groups of input fields with optional caption (block) 

<fieldset>
	<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
</fieldset>

Common UI control errors

Styling form controls (6.2.9) 

element[attribute="value"] {
	property : value;
	property : value;
	...
	property : value;
}

input[type="text"] {
	background-color: yellow;
	font-weight: bold;
}

Styling Text Boxes

<textarea rows="3" cols="40"></textarea>

body { height: 100%; }
textarea {
	position: absolute;
	width: 50%;
	height: 15%;
}

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 />

URL-encoding (6.3.1)

Hidden input parameters (6.3.2) 

<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="quarter" value="48sp" />

Submitting data to a web server

HTTP GET vs. POST requests (6.3.3)

Form POST example

<form action="http://foo.com/app.php" method="post">
	<div>
		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" />
	<div>
</form>

Uploading files (6.3.4) 

<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" />
</form>
  • 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

6.4: Processing Form Data in PHP

"Superglobal" arrays (6.4.1)

Array Description
$_GET, $_POST parameters passed to GET and POST requests
$_REQUEST parameters passed to any type of request
$_SERVER, $_ENV information about the web server
$_FILES files uploaded with the web request
$_SESSION, $_COOKIE "cookies" used to identify the user (seen later)

Associative arrays (6.4.1) 

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

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

print_r($blackbook);

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";
}

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

Query parameters: $_REQUEST (6.4.2) 

$user_name = $_REQUEST["username"];
$student_id = (int) $_REQUEST["sid"];
$eats_meat = FALSE;
if (isset($_REQUEST["meat")) {
	$eats_meat = TRUE;
}

Form response pages

<?php
$name = $_REQUEST["name"];
$email = $_REQUEST["emailaddress"];
...
print("Thank you, $name, for creating
an account with address $email.\n");
?>
Thank you, Marty, for creating an account with address foo@bar.com.

Embedded PHP and response pages

<?php
$name = $_REQUEST["name"];
$email = $_REQUEST["emailaddress"];
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head><title>Account Creation</title></head>
	<body>
		<h1>New account created.</h1>
		<p>
			Thank you, <?= $name ?>, for creating an
			account with address <?= $email ?>.
		</p>
	</body>
</html>

Example: Exponents

<?php
$base = $_REQUEST["base"];
$exp = $_REQUEST["exponent"];
$result = pow($base, $exp);
?>

<?= $base ?> ^ <?= $exp ?> = <?= $result ?>

http://example.com/exponent.php?base=3&exponent=4
3 ^ 4 = 81

Example: Print all parameters

<?php
foreach ($_REQUEST as $param => $value) {
	?>

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

	<?php
}
?>

http://example.com/print_params.php?name=Marty+Stepp&sid=1234567

Parameter name has value Marty Stepp

Parameter sid has value 1234567

GET or POST?

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

Processing an uploaded file in PHP (6.4.3)

Uploading details 

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

Processing uploaded file, example

$username = $_REQUEST["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";
}