<!--#include virtual="commontop.html" -->
<title>Web Programming Step by Step, Lecture 8: HTML Forms</title>
</head>
<body>
<div class="layout">
<div id="controls"><!-- DO NOT EDIT --></div>
<div id="currentSlide"><!-- DO NOT EDIT --></div>
<div id="header"></div>
<div id="footer">
<h1><em>Web Programming Step by Step</em>, Lecture 8</h1>
<h2>HTML Forms</h2>
</div>
</div>
<div class="presentation">
<div class="slide">
<h1><a href="http://www.webstepbook.com/">Web Programming Step by Step</a></h1>
<h3>Lecture 8 <br /> HTML Forms</h3>
<h4>Reading: 6.1 - 6.2, 6.4</h4>
<p class="license">
Except where otherwise noted, the contents of this presentation are Copyright 2010 Marty Stepp and Jessica Miller.
</p>
<div class="w3c">
<a href="http://validator.w3.org/check/referer"><img src="images/w3c-xhtml11.png" alt="Valid XHTML 1.1" /></a>
<a href="http://jigsaw.w3.org/css-validator/check/referer"><img src="images/w3c-css.png" alt="Valid CSS!" /></a>
</div>
</div>
<div class="slide titleslide">
<h1>6.1: Parameterized Pages</h1>
<ul>
<li>
<strong>6.1: Parameterized Pages</strong>
</li>
<li>
6.1: Form Basics
</li>
<li>
6.2: Form Controls
</li>
<li>
6.3: Submitting Data
</li>
<li>
6.4: Processing Form Data in PHP
</li>
</ul>
</div>
<div class="slide">
<h1>Web data</h1>
<ul>
<li>most interesting web pages revolve around data
<ul>
<li>examples: Google, IMDB, Digg, Facebook, YouTube, Rotten Tomatoes</li>
<li>can take many formats: text, HTML, XML, multimedia</li>
</ul>
</li>
<li>many of them allow us to access their data</li>
<li>some even allow us to submit our own new data</li>
<li>most server-side web programs accept <span class="term">parameters</span> that guide their execution</li>
</ul>
</div>
<div class="slide">
<h1>
Query strings and parameters
<span class="readingsection">(6.1.1)</span>
</h1>
<pre class="syntaxtemplate url">
<var>URL</var><em>?</em><var>name</var><em>=</em><var>value</var><em>&</em><var>name</var><em>=</em><var>value</var>...
</pre>
<pre class="url">
http://www.google.com/search?<em>q=Obama</em>
http://example.com/student_login.php?<em>username=stepp</em>&<em>id=1234567</em>
</pre>
<ul>
<li><span class="term">query string</span>: a set of parameters passed from a browser to a web server
<ul>
<li>often passed by placing name/value pairs at the end of a URL</li>
<li>above, parameter <code>username</code> has value <code>stepp</code>, and <code>sid</code> has value <code>1234567</code></li>
</ul>
</li>
<li>PHP code on the server can examine and utilize the value of parameters</li>
<li>a way for PHP code to produce different output based on values passed by the user</li>
</ul>
</div>
<div class="slide">
<h1>
Query parameters:
<a href="http://us2.php.net/manual/en/reserved.variables.request.php" class="underscorelink"><code>$_REQUEST</code></a>
<span class="readingsection">(6.4.2)</span>
</h1>
<pre class="examplecode php">
$user_name = <em>$_REQUEST["username"]</em>;
$id_number = (int) <em>$_REQUEST["id"]</em>;
$eats_meat = FALSE;
if (isset(<em>$_REQUEST["meat"]</em>)) {
$eats_meat = TRUE;
}
</pre>
<ul>
<li>
<code>$_REQUEST["<var>parameter name</var>"]</code> returns a parameter's value as a string
</li>
<li>test whether a given parameter was passed with <code>isset</code></li>
</ul>
</div>
<div class="slide">
<h1>Example: Exponents</h1>
<div class="example">
<pre class="examplecode php">
$base = <em>$_REQUEST["base"]</em>;
$exp = <em>$_REQUEST["exponent"]</em>;
$result = pow($base, $exp);
print "$base ^ $exp = $result";
</pre>
<pre class="exampleurl url">
http://example.com/exponent.php?<em>base=3</em>&<em>exponent=4</em>
</pre>
<div class="exampleoutput">
3 ^ 4 = 81
</div>
</div>
</div>
<div class="slide titleslide">
<h1>6.1: Form Basics</h1>
<ul>
<li>
6.1: Parameterized Pages
</li>
<li>
<strong>6.1: Form Basics</strong>
</li>
<li>
6.2: Form Controls
</li>
<li>
6.3: Submitting Data
</li>
<li>
6.4: Processing Form Data in PHP
</li>
</ul>
</div>
<div class="slide">
<h1>HTML forms</h1>
<div style="float: right; border: 3px solid gray;"><img src="images/form.png" alt="HTML form" /></div>
<ul>
<li><span class="term">form</span>: a group of UI controls that accepts information from the user and sends the information to a web server</li>
<li>the information is sent to the server as a <span class="term">query string</span></li>
<li>JavaScript can be used to create interactive controls (seen later)</li>
</ul>
</div>
<div class="slide">
<h1>
HTML form:
<a href="http://www.w3schools.com/tags/tag_form.asp"><code><form></code></a>
<span class="readingsection">(6.1.2)</span>
</h1>
<pre class="examplecode html">
<em><form action="<var>destination URL</var>"></em>
<var>form controls</var>
<em></form></em>
</pre>
<ul>
<li>required <code>action</code> attribute gives the URL of the page that will process this form's data</li>
<li>
when form has been filled out and <span class="term">submitted</span>, its data will be sent to the <code>action</code>'s URL
</li>
<li>
one page may contain many forms if so desired
</li>
</ul>
</div>
<div class="slide">
<h1>
Form example
</h1>
<div class="example">
<pre class="examplecode html">
<em><form action="http://www.google.com/search"></em>
<div>
Let's search Google:
<input name="q" />
<input type="submit" />
</div>
<em></form></em>
</pre>
<div class="exampleoutput insertoutput"></div>
</div>
<ul>
<li>must wrap the form's controls in a block element such as <code>div</code></li>
</ul>
</div>
<div class="slide titleslide">
<h1>6.2: Form Controls</h1>
<ul>
<li>
6.1: Parameterized Pages
</li>
<li>
6.1: Form Basics
</li>
<li>
<strong>6.2: Form Controls</strong>
</li>
<li>
6.3: Submitting Data
</li>
<li>
6.4: Processing Form Data in PHP
</li>
</ul>
</div>
<div class="slide">
<h1>
Form controls: <a href="http://www.w3schools.com/tags/tag_input.asp"><code><input></code></a>
</h1>
<div class="example">
<pre class="examplecode html">
<span class="comment"><!-- 'q' happens to be the name of Google's required parameter --></span>
<input <em>type="text" name="q" value="Colbert Report"</em> />
<input <em>type="submit" value="Booyah!"</em> />
</pre>
<form action="http://www.google.com/search" class="exampleoutput insertoutput"></form>
</div>
<ul>
<li><code>input</code> element is used to create many UI controls
<ul>
<li>an inline element that MUST be self-closed</li>
</ul>
</li>
<li><code>name</code> attribute specifies name of query parameter to pass to server</li>
<li><code>type</code> can be <code>button</code>, <code>checkbox</code>, <code>file</code>, <code>hidden</code>, <code>password</code>, <code>radio</code>, <code>reset</code>, <code>submit</code>, <code>text</code>, ...</li>
<li><code>value</code> attribute specifies control's initial text</li>
</ul>
</div>
<div class="slide">
<h1>
Text fields:
<a href="http://www.w3schools.com/tags/tag_input.asp"><code><input></code></a>
<span class="readingsection">(6.2.1)</span>
</h1>
<div class="example">
<pre class="examplecode html">
<input type="text" <em>size="10" maxlength="8"</em> /> NetID <br />
<input <em>type="password"</em> size="16" /> Password
<input type="submit" value="Log In" />
</pre>
<form action="http://webster.cs.washington.edu/params.php" class="exampleoutput insertoutput"></form>
</div>
<ul>
<li><code>input</code> attributes: <code>disabled</code>, <code>maxlength</code>, <code>readonly</code>, <code>size</code>, <code>value</code></li>
<li><code>size</code> attribute controls onscreen width of text field</li>
<li><code>maxlength</code> limits how many characters user is able to type into field</li>
</ul>
</div>
<div class="slide">
<h1>
Text boxes:
<a href="http://www.w3schools.com/tags/tag_textarea.asp"><code><textarea></code></a>
<span class="readingsection">(6.2.2)</span>
</h1>
<p class="description">
a multi-line text input area (inline)
</p>
<div class="example">
<pre class="examplecode html">
<em><textarea rows="4" cols="20"></em>
Type your comments here.
<em></textarea></em>
</pre>
<div class="exampleoutput insertoutput"></div>
</div>
<ul>
<li>initial text is placed inside <code>textarea</code> tag (optional)</li>
<li>required <code>rows</code> and <code>cols</code> attributes specify height/width in characters</li>
<li>optional <code>readonly</code> attribute means text cannot be modified</li>
</ul>
</div>
<div class="slide">
<h1>
Checkboxes:
<a href="http://www.w3schools.com/tags/tag_input.asp"><code><input></code></a>
<span class="readingsection">(6.2.3)</span>
</h1>
<p class="description">
yes/no choices that can be checked and unchecked (inline)
</p>
<div class="example">
<pre class="examplecode html">
<input <em>type="checkbox"</em> name="lettuce" /> Lettuce
<input <em>type="checkbox" name="tomato" checked="checked"</em> /> Tomato
<input <em>type="checkbox"</em> name="pickles" checked="checked" /> Pickles
</pre>
<form action="http://webster.cs.washington.edu/params.php" class="exampleoutput insertoutput">
<input type="submit" />
</form>
</div>
<ul>
<li>none, 1, or many checkboxes can be checked at same time</li>
<li>when sent to server, any checked boxes will be sent with value <code>on</code>:
<ul>
<li>
<pre>
http://webster.cs.washington.edu/params.php<em>?tomato=on&pickles=on</em>
</pre>
</li>
</ul>
</li>
<li>use <code>checked="checked"</code> attribute in HTML to initially check the box</li>
</ul>
</div>
<div class="slide">
<h1>
Radio buttons:
<a href="http://www.w3schools.com/tags/tag_input.asp"><code><input></code></a>
<span class="readingsection">(6.2.4)</span>
</h1>
<p class="description">
sets of mutually exclusive choices (inline)
</p>
<div class="example">
<pre class="examplecode html">
<input <em>type="radio"</em> name="cc" value="visa" checked="checked" /> Visa
<input <em>type="radio"</em> name="cc" value="mastercard" /> MasterCard
<input <em>type="radio"</em> name="cc" value="amex" /> American Express
</pre>
<form action="http://webster.cs.washington.edu/params.php" class="exampleoutput insertoutput">
<input type="submit" />
</form>
</div>
<ul>
<li>grouped by <code>name</code> attribute (only one can be checked at a time)</li>
<li>must specify a <code>value</code> for each one or else it will be sent as value <code>on</code></li>
</ul>
</div>
<div class="slide">
<h1>
Text labels:
<a href="http://www.w3schools.com/tags/tag_label.asp"><code><label></code></a>
<span class="readingsection">(6.2.5)</span>
</h1>
<div class="example">
<pre class="examplecode html" style="font-size: smaller">
<em><label></em><input type="radio" name="cc" value="visa" checked="checked" /> Visa<em></label></em>
<em><label></em><input type="radio" name="cc" value="mastercard" /> MasterCard<em></label></em>
<em><label></em><input type="radio" name="cc" value="amex" /> American Express<em></label></em>
</pre>
<form action="http://webster.cs.washington.edu/params.php" class="exampleoutput insertoutput">
<input type="submit" />
</form>
</div>
<ul>
<li>associates nearby text with control, so you can click text to activate control</li>
<li>can be used with checkboxes or radio buttons</li>
<li><code>label</code> element can be targeted by CSS style rules</li>
</ul>
</div>
<div class="slide">
<h1>
Drop-down list:
<a href="http://www.w3schools.com/tags/tag_select.asp"><code><select></code></a>,
<a href="http://www.w3schools.com/tags/tag_option.asp"><code><option></code></a>
<span class="readingsection">(6.2.6)</span>
</h1>
<p class="description">
menus of choices that collapse and expand (inline)
</p>
<div class="example">
<pre class="examplecode html">
<em><select name="favoritecharacter"></em>
<option>Jerry</option>
<option>George</option>
<option <em>selected="selected"</em>>Kramer</option>
<option>Elaine</option>
<em></select></em>
</pre>
<form action="http://webster.cs.washington.edu/params.php" class="exampleoutput insertoutput">
<input type="submit" />
</form>
</div>
<ul>
<li><code>option</code> element represents each choice</li>
<li><code>select</code> optional attributes: <code>disabled</code>, <code>multiple</code>, <code>size</code></li>
<li>optional <code>selected</code> attribute sets which one is initially chosen</li>
</ul>
</div>
<div class="slide">
<h1>Using <code><select></code> for lists</h1>
<div class="example">
<pre class="examplecode html" style="font-size: smaller">
<select name="favoritecharacter<em>[]</em>" <em>size="3" multiple="multiple"</em>>
<option>Jerry</option>
<option>George</option>
<option>Kramer</option>
<option>Elaine</option>
<option <em>selected="selected"</em>>Newman</option>
</select>
</pre>
<form action="http://webster.cs.washington.edu/params.php" class="exampleoutput insertoutput">
<input type="submit" />
</form>
</div>
<ul>
<li>optional <code>multiple</code> attribute allows selecting multiple items with shift- or ctrl-click
<ul>
<li>
when submitting to a PHP script, must declare parameter's name with <code>[]</code> if you allow multiple selections (PHP will turn this into an array of the selected options)
</li>
</ul>
</li>
<li><code>option</code> tags can be set to be initially <code>selected</code></li>
</ul>
</div>
<div class="slide">
<h1>
Option groups:
<a href="http://www.w3schools.com/tags/tag_optgroup.asp"><code><optgroup></code></a>
</h1>
<div class="example">
<pre class="examplecode html" style="font-size: smaller">
<select name="favoritecharacter">
<em><optgroup label="Major Characters"></em>
<option>Jerry</option>
<option>George</option>
<option>Kramer</option>
<option>Elaine</option>
<em></optgroup></em>
<em><optgroup label="Minor Characters"></em>
<option>Newman</option>
<option>Susan</option>
<em></optgroup></em>
</select>
</pre>
<form action="http://webster.cs.washington.edu/params.php" class="exampleoutput insertoutput">
<input type="submit" />
</form>
</div>
<ul>
<li>What should we do if we don't like the bold italic?</li>
</ul>
</div>
<div class="slide">
<h1>
Reset buttons
<span class="readingsection">(6.2.7)</span>
</h1>
<!-- *** this form doesn't make sense as a GET; change -->
<div class="example">
<pre class="examplecode html">
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 />
<em><input type="reset" /></em>
</pre>
<form action="http://webster.cs.washington.edu/params.php" class="exampleoutput insertoutput">
<input type="submit" />
</form>
</div>
<ul>
<li>when clicked, returns all form controls to their initial values</li>
<li>specify custom text on the button by setting its <code>value</code> attribute</li>
</ul>
</div>
<div class="slide">
<h1>Common UI control errors</h1>
<ul>
<li>
<q>I changed the form's HTML code ... but when I refresh, the page doesn't update!</q>
<ul>
<li>By default, when you refresh a page, it leaves the previous values in all form controls</li>
<li>it does this in case you were filling out a long form and needed to refresh/return to it</li>
<li>if you want it to clear out all UI controls' state and values, you must do a <span class="term">full refresh</span>
<ul>
<li>Firefox: Shift-Ctrl-R</li>
<li>Mac: Shift-Command-R</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div class="slide">
<h1>
Hidden input parameters
<span class="readingsection">(6.3.2)</span>
</h1>
<div class="example">
<pre class="examplecode html">
<input type="text" name="username" /> Name <br />
<input type="text" name="sid" /> SID <br />
<em><input type="hidden" name="school" value="UW" />
<input type="hidden" name="year" value="2048" /></em></pre>
<form action="http://webster.cs.washington.edu/params.php" class="exampleoutput insertoutput">
<input type="submit" />
</form>
</div>
<ul>
<li>an invisible parameter that is still passed to the server when form is submitted</li>
<li>useful for passing on additional state that isn't modified by the user</li>
</ul>
</div>
<div class="slide">
<h1>
Grouping input:
<a href="http://www.w3schools.com/tags/tag_fieldset.asp"><code><fieldset></code></a>,
<a href="http://www.w3schools.com/tags/tag_legend.asp"><code><legend></code></a>
<span class="readingsection">(6.2.8)</span>
</h1>
<p class="description">
groups of input fields with optional caption (block)
</p>
<div class="example">
<pre class="examplecode html">
<em><fieldset></em>
<em><legend></em>Credit cards:<em></legend></em>
<input <em>type="radio"</em> name="cc" value="visa" checked="checked" /> Visa
<input <em>type="radio"</em> name="cc" value="mastercard" /> MasterCard
<input <em>type="radio"</em> name="cc" value="amex" /> American Express
<em></fieldset></em>
</pre>
<form action="http://webster.cs.washington.edu/params.php" class="exampleoutput insertoutput">
<input type="submit" />
</form>
</div>
<ul>
<li><code>fieldset</code> groups related input fields, adds a border; <code>legend</code> supplies a caption</li>
</ul>
</div>
<div class="slide">
<h1>
Styling form controls
<span class="readingsection">(6.2.9)</span>
</h1>
<div class="example">
<pre class="syntaxtemplate css">
<span class="placeholder">element</span><em>[<span class="placeholder">attribute</span>="<span class="placeholder">value</span>"]</em> {
<span class="placeholder">property</span> : <span class="placeholder">value</span>;
<span class="placeholder">property</span> : <span class="placeholder">value</span>;
...
<span class="placeholder">property</span> : <span class="placeholder">value</span>;
}
</pre>
<pre class="examplecode css">
input<em>[type="text"]</em> {
background-color: yellow;
font-weight: bold;
}
</pre>
<div class="exampleoutput insertoutput">
<input type="text" value="Borat" style="background-color: yellow; font-weight: bold;" />
</div>
</div>
<ul>
<li><span class="term">attribute selector</span>: matches only elements that have a particular attribute value</li>
<li>useful for controls because many share the same element (<code>input</code>)</li>
</ul>
</div>
<div class="slide titleslide">
<h1>6.4: Processing Form Data in PHP</h1>
<ul>
<li>
6.1: Form Basics
</li>
<li>
6.2: Form Controls
</li>
<li>
6.3: Submitting Data
</li>
<li>
<strong>6.4: Processing Form Data in PHP</strong>
</li>
</ul>
</div>
<div class="slide">
<h1>
Associative arrays
<span class="readingsection">(6.4.1)</span>
</h1>
<pre class="examplecode php">
$blackbook = array();
<em>$blackbook["marty"]</em> = "206-685-2181";
<em>$blackbook["stuart"]</em> = "206-685-9138";
...
print "Marty's number is " . <em>$blackbook["marty"]</em> . ".\n";
</pre>
<ul>
<li><span class="term">associative array</span> (a.k.a. <span class="term">map</span>, <span class="term">dictionary</span>, <span class="term">hash table</span>) : uses non-integer indexes</li>
<li>associates a particular index "key" with a value
<ul>
<li>key <code>"marty"</code> maps to value <code>"206-685-2181"</code></li>
</ul>
</li>
<li>syntax for embedding an associative array element in interpreted string:
<pre class="examplecode php">
print "Marty's number is <em>{$blackbook['marty']}</em>.\n";
</pre>
</li>
</ul>
</div>
<div class="slide">
<h1>Creating an associative array</h1>
<pre class="syntaxtemplate php">
$<var>name</var> = array();
$<var>name</var>["<var>key</var>"]</span> = <var>value</var>;
...
$<var>name</var>["<var>key</var>"]</span> = <var>value</var>;
</pre>
<pre class="syntaxtemplate php">
$<var>name</var> = array(<var>key</var> => <var>value</var>, ..., <var>key</var> => <var>value</var>);
</pre>
<pre class="examplecode php">
$blackbook = array("marty" => "206-685-2181",
"stuart" => "206-685-9138",
"jenny" => "206-867-5309");
</pre>
<ul>
<li>can be declared either initially empty, or with a set of predeclared key/value pairs</li>
</ul>
</div>
<div class="slide">
<h1>Printing an associative array</h1>
<div class="example">
<pre class="examplecode php">
<em>print_r</em>($blackbook);
</pre>
<pre class="exampleoutput">
Array
(
[jenny] => 206-867-5309
[stuart] => 206-685-9138
[marty] => 206-685-2181
)
</pre>
</div>
<ul>
<li><a href="http://www.php.net/print_r"><code>print_r</code></a> function displays all keys/values in the array</li>
<li><a href="http://www.php.net/var_dump"><code>var_dump</code></a> function is much like <code>print_r</code> but prints more info</li>
<li>unlike <code>print</code>, these functions require parentheses</li>
<li>often useful to <code>print_r</code> inside of a <code><pre></code> block to pretty-print in browser</li>
</ul>
</div>
<div class="slide">
<h1>Associative array <a href="http://www.php.net/array">functions</a></h1>
<pre class="examplecode php">
if (<em>isset($blackbook["marty"])</em>) {
print "Marty's phone number is {$blackbook['marty']}\n";
} else {
print "No phone number found for Marty Stepp.\n";
}
</pre>
<table class="standard">
<tr>
<th>name(s)</th>
<th>category</th>
</tr>
<tr>
<td>
<a href="http://www.php.net/isset"><code>isset</code></a>, <a href="http://www.php.net/array_key_exists"><code>array_key_exists</code></a>
</td>
<td>
whether the array contains value for given key
</td>
</tr>
<tr>
<td>
<a href="http://www.php.net/array_keys"><code>array_keys</code></a>, <a href="http://www.php.net/array_values"><code>array_values</code></a>
</td>
<td>
an array containing all keys or all values in the assoc.array
</td>
</tr>
<tr>
<td>
<a href="http://www.php.net/asort"><code>asort</code></a>, <a href="http://www.php.net/arsort"><code>arsort</code></a>
</td>
<td>
sorts by value, in normal or reverse order
</td>
</tr>
<tr>
<td>
<a href="http://www.php.net/ksort"><code>ksort</code></a>, <a href="http://www.php.net/krsort"><code>krsort</code></a>
</td>
<td>
sorts by key, in normal or reverse order
</td>
</tr>
</table>
</div>
<div class="slide">
<h1><code>foreach</code> loop and associative arrays</h1>
<div class="example">
<pre class="examplecode php">
<em>foreach ($blackbook as $key => $value)</em> {
print "$key's phone number is $value\n";
}
</pre>
<pre class="exampleoutput">
jenny's phone number is 206-867-5309
stuart's phone number is 206-685-9138
marty's phone number is 206-685-2181
</pre>
</div>
<ul>
<li>both the key and the value are given a variable name</li>
<li>the elements will be processed in the order they were added to the array</li>
</ul>
</div>
<div class="slide">
<h1>Example: Print all parameters</h1>
<div class="example">
<pre class="examplecode php">
<?php
<em>foreach ($_REQUEST as $param => $value) {</em>
?>
<p>Parameter <em><?= $param ?></em> has value <em><?= $value ?></em></p>
<?php
<em>}</em>
?>
</pre>
<pre class="exampleurl url">
http://example.com/print_params.php?<em>name=Marty+Stepp</em>&<em>sid=1234567</em>
</pre>
<div class="exampleoutput">
<p>Parameter name has value Marty Stepp</p>
<p>Parameter sid has value 1234567</p>
</div>
</div>
<ul>
<li>
or call <code>print_r</code> or <code>var_dump</code> on <code>$_REQUEST</code> for debugging
</li>
</ul>
</div>
<!--#include virtual="commonbottom.html" -->