Web Programming Step by Step

Lecture 9
HTML Forms

Reading: 6.1 - 6.2, 6.4

Except where otherwise noted, the contents of this presentation are Copyright 2010 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://www.google.com/search?q=Obama
http://example.com/student_login.php?username=stepp&id=1234567

Query parameters: $_REQUEST (6.4.2)

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

HTML forms

HTML form

HTML form: <form> (6.1.2)

<form action="destination 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>

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> (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" checked="checked" /> 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 selected="selected">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" />

Common UI control errors

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.4: Processing Form Data in PHP

Example: Exponents

$base = $_REQUEST["base"];
$exp = $_REQUEST["exponent"];
$result = pow($base, $exp);
print "$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