Web Programming Step by Step

Lecture 10
More HTML Forms; Posting Data

Reading: 6.3 - 6.5

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

Valid XHTML 1.1 Valid CSS!

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

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="year" value="2048" />

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)

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>

GET or POST?

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

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)

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

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

Including files: include (5.4.2)

include("filename");
include("header.php");