Web Programming Step by Step

Lecture 8
HTML Forms

Reading: 6.1 - 6.2, 6.4

6.1: Parameterized Pages

6.1: Parameterized Pages
6.1: Form Basics
6.2: Form Controls
6.3: Submitting Data
6.4: Processing Form Data in PHP

Web data

most interesting web pages revolve around data
- examples: Google, IMDB, Digg, Facebook, YouTube, Rotten Tomatoes
- can take many formats: text, HTML, XML, multimedia
many of them allow us to access their data
some even allow us to submit our own new data
most server-side web programs accept parameters that guide their execution

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 string: a set of parameters passed from a browser to a web server
- often passed by placing name/value pairs at the end of a URL
- above, parameter username has value stepp, and sid has value 1234567
PHP code on the server can examine and utilize the value of parameters
a way for PHP code to produce different output based on values passed by the user

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

$_REQUEST["parameter name"] returns a parameter's value as a string
test whether a given parameter was passed with isset

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

6.1: Form Basics

6.1: Parameterized Pages
6.1: Form Basics
6.2: Form Controls
6.3: Submitting Data
6.4: Processing Form Data in PHP

HTML forms

form: a group of UI controls that accepts information from the user and sends the information to a web server
the information is sent to the server as a query string
JavaScript can be used to create interactive controls (seen later)

HTML form: `<form>` (6.1.2)

<form action="destination URL">
	form controls
</form>

required action attribute gives the URL of the page that will process this form's data
when form has been filled out and submitted, its data will be sent to the action's URL
one page may contain many forms if so desired

Form example

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

must wrap the form's controls in a block element such as div

6.2: Form Controls

6.1: Parameterized Pages
6.1: Form Basics
6.2: Form Controls
6.3: Submitting Data
6.4: Processing Form Data in PHP

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

input element is used to create many UI controls
- an inline element that MUST be self-closed
name attribute specifies name of query parameter to pass to server
type can be button, checkbox, file, hidden, password, radio, reset, submit, text, ...
value attribute specifies control's initial text

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

input attributes: disabled, maxlength, readonly, size, value
size attribute controls onscreen width of text field
maxlength limits how many characters user is able to type into field

Text boxes: `<textarea>` (6.2.2)

a multi-line text input area (inline)

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

initial text is placed inside textarea tag (optional)
required rows and cols attributes specify height/width in characters
optional readonly attribute means text cannot be modified

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

none, 1, or many checkboxes can be checked at same time

when sent to server, any checked boxes will be sent with value on:

http://webster.cs.washington.edu/params.php?tomato=on&pickles=on

use checked="checked" attribute in HTML to initially check the box

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

grouped by name attribute (only one can be checked at a time)
must specify a value for each one or else it will be sent as value on

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>

associates nearby text with control, so you can click text to activate control
can be used with checkboxes or radio buttons
label element can be targeted by CSS style rules

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>

option element represents each choice
select optional attributes: disabled, multiple, size
optional selected attribute sets which one is initially chosen

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>

optional multiple attribute allows selecting multiple items with shift- or ctrl-click
- when submitting to a PHP script, must declare parameter's name with [] if you allow multiple selections (PHP will turn this into an array of the selected options)
option tags can be set to be initially selected

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>

What should we do if we don't like the bold italic?

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

when clicked, returns all form controls to their initial values
specify custom text on the button by setting its value attribute

Common UI control errors

I changed the form's HTML code ... but when I refresh, the page doesn't update!
- By default, when you refresh a page, it leaves the previous values in all form controls
- it does this in case you were filling out a long form and needed to refresh/return to it
- if you want it to clear out all UI controls' state and values, you must do a full refresh
  - Firefox: Shift-Ctrl-R
  - Mac: Shift-Command-R

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

an invisible parameter that is still passed to the server when form is submitted
useful for passing on additional state that isn't modified by the user

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>

fieldset groups related input fields, adds a border; legend supplies a caption

Styling form controls (6.2.9)

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

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

attribute selector: matches only elements that have a particular attribute value
useful for controls because many share the same element (input)

6.4: Processing Form Data in PHP

6.1: Form Basics
6.2: Form Controls
6.3: Submitting Data
6.4: Processing Form Data in PHP

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

associative array (a.k.a. map, dictionary, hash table) : uses non-integer indexes
associates a particular index "key" with a value
- key "marty" maps to value "206-685-2181"
syntax for embedding an associative array element in interpreted string:
```
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");

can be declared either initially empty, or with a set of predeclared key/value pairs

Printing an associative array

print_r($blackbook);

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

print_r function displays all keys/values in the array
var_dump function is much like print_r but prints more info
unlike print, these functions require parentheses
often useful to print_r inside of a <pre> block to pretty-print in browser

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

both the key and the value are given a variable name
the elements will be processed in the order they were added to the array

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

or call print_r or var_dump on $_REQUEST for debugging

Web Programming Step by Step, Lecture 8

HTML Forms