Web Programming Step by Step, 2nd Edition

Lecture 9: Forms

Reading: 6.1 - 6.2, 6.4

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 HTML5 Valid CSS

6.1: Form Basics

Web data

Query strings and parameters

URL?name=value&name=value...
http://www.google.com/search?q=Romney
http://example.com/student_login.php?username=stepp&id=1234567

Query parameters: $_GET, $_POST

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

Example: Exponents

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

Example: Print all parameters

<?php foreach ($_GET as $param => $value) { ?>
	<p>Parameter <?= $param ?> has value <?= $value ?></p>
<?php } ?>
print_params.php?name=Marty+Stepp&sid=1234567

Parameter name has value Marty Stepp

Parameter sid has value 1234567

HTML forms

HTML form

HTML form: <form>

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

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

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>

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

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

Styling form controls

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