[an error occurred while processing this directive]

<div class="slide titleslide">
	<h1>6.2: Form Controls (continued)</h1>

	<ul>
		<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>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>
		Drop-down list:
		<a href="http://www.w3schools.com/tags/tag_select.asp"><code>&lt;select&gt;</code></a>,
		<a href="http://www.w3schools.com/tags/tag_option.asp"><code>&lt;option&gt;</code></a>
	</h1>

	<p class="description">
		menus of choices that collapse and expand (inline)
	</p>

	<div class="example">
		<pre class="examplecode html">
<em>&lt;select name=&quot;favoritecharacter&quot;&gt;</em>
	&lt;option&gt;Jerry&lt;/option&gt;
	&lt;option&gt;George&lt;/option&gt;
	&lt;option <em>selected=&quot;selected&quot;</em>&gt;Kramer&lt;/option&gt;
	&lt;option&gt;Elaine&lt;/option&gt;
<em>&lt;/select&gt;</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>&lt;select&gt;</code> for lists</h1>

	<div class="example">
		<pre class="examplecode html" style="font-size: smaller">
&lt;select name=&quot;favoritecharacter<em>[]</em>&quot; <em>size=&quot;3&quot; multiple=&quot;multiple&quot;</em>&gt;
	&lt;option&gt;Jerry&lt;/option&gt;
	&lt;option&gt;George&lt;/option&gt;
	&lt;option&gt;Kramer&lt;/option&gt;
	&lt;option&gt;Elaine&lt;/option&gt;
	&lt;option <em>selected=&quot;selected&quot;</em>&gt;Newman&lt;/option&gt;
&lt;/select&gt;
</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>
					must declare parameter's name with <code>[]</code> if you allow multiple selections
				</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>&lt;optgroup&gt;</code></a>
	</h1>

	<div class="example">
		<pre class="examplecode html" style="font-size: smaller">
&lt;select name=&quot;favoritecharacter&quot;&gt;
	<em>&lt;optgroup label=&quot;Major Characters&quot;&gt;</em>
		&lt;option&gt;Jerry&lt;/option&gt;
		&lt;option&gt;George&lt;/option&gt;
		&lt;option&gt;Kramer&lt;/option&gt;
		&lt;option&gt;Elaine&lt;/option&gt;
	<em>&lt;/optgroup&gt;</em>
	<em>&lt;optgroup label=&quot;Minor Characters&quot;&gt;</em>
		&lt;option&gt;Newman&lt;/option&gt;
		&lt;option&gt;Susan&lt;/option&gt;
	<em>&lt;/optgroup&gt;</em>
&lt;/select&gt;
</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 appearance of the <code>optgroup</code>s?</li>
	</ul>
</div>



<div class="slide">
	<h1>
		Grouping input:
		<a href="http://www.w3schools.com/tags/tag_fieldset.asp"><code>&lt;fieldset&gt;</code></a>, 
		<a href="http://www.w3schools.com/tags/tag_legend.asp"><code>&lt;legend&gt;</code></a>
	</h1>

	<p class="description">
		groups of input fields with optional caption (block)
	</p>

	<div class="example">
		<pre class="examplecode html">
<em>&lt;fieldset&gt;</em>
	<em>&lt;legend&gt;</em>Credit cards:<em>&lt;/legend&gt;</em>
	&lt;input <em>type=&quot;radio&quot;</em> name=&quot;cc&quot; value=&quot;visa&quot; checked=&quot;checked&quot; /&gt; Visa
	&lt;input <em>type=&quot;radio&quot;</em> name=&quot;cc&quot; value=&quot;mastercard&quot; /&gt; MasterCard
	&lt;input <em>type=&quot;radio&quot;</em> name=&quot;cc&quot; value=&quot;amex&quot; /&gt; American Express
<em>&lt;/fieldset&gt;</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 
	</h1>

	<div class="example">
		<pre class="syntaxtemplate css">
<span class="placeholder">element</span><em>[<span class="placeholder">attribute</span>=&quot;<span class="placeholder">value</span>&quot;]</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=&quot;text&quot;]</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.3: Submitting Data</h1>

	<ul>
		<li>
			6.1: Form Basics
		</li>
		<li>
			6.2: Form Controls
		</li>
		<li>
			<strong>6.3: Submitting Data</strong>
		</li>
		<li>
			6.4: Processing Form Data in PHP
		</li>
	</ul>
</div>



<div class="slide">
	<h1>Problems with submitting data</h1>

	<div class="example">
		<pre class="examplecode html" style="font-size: smaller">
&lt;label&gt;&lt;input type=&quot;radio&quot; name=&quot;cc&quot; /&gt; Visa&lt;/label&gt;
&lt;label&gt;&lt;input type=&quot;radio&quot; name=&quot;cc&quot; /&gt; MasterCard&lt;/label&gt; &lt;br /&gt;
Favorite Star Trek captain:
&lt;select name=&quot;startrek&quot;&gt;
	&lt;option&gt;James T. Kirk&lt;/option&gt;
	&lt;option&gt;Jean-Luc Picard&lt;/option&gt;
&lt;/select&gt; &lt;br /&gt;
</pre>

		<form action="http://webster.cs.washington.edu/params.php" class="exampleoutput insertoutput">
			<input type="submit" />
		</form>
	</div>

	<ul>
		<li>this form submits to our handy <a href="http://webster.cs.washington.edu/params.php">params.php</a> tester page</li>
		<li>the form may look correct, but when you submit it...</li>
		<li><code><em class="bad">[cc] => on</em>, [startrek] => Jean-Luc Picard</code></li>
	</ul>
</div>



<div class="slide">
	<h1>The <code>value</code> attribute</h1>

	<div class="example">
		<pre class="examplecode html" style="font-size: smaller">
&lt;label&gt;&lt;input type=&quot;radio&quot; name=&quot;cc&quot; <em>value=&quot;visa&quot;</em> /&gt; Visa&lt;/label&gt;
&lt;label&gt;&lt;input type=&quot;radio&quot; name=&quot;cc&quot; <em>value=&quot;mastercard&quot;</em> /&gt; MasterCard&lt;/label&gt; &lt;br /&gt;
Favorite Star Trek captain:
&lt;select name=&quot;startrek&quot;&gt;
	&lt;option <em>value=&quot;kirk&quot;</em>&gt;James T. Kirk&lt;/option&gt;
	&lt;option <em>value=&quot;picard&quot;</em>&gt;Jean-Luc Picard&lt;/option&gt;
&lt;/select&gt; &lt;br /&gt;
</pre>

		<form action="http://webster.cs.washington.edu/params.php" class="exampleoutput insertoutput">
			<input type="submit" />
		</form>
	</div>

	<ul>
		<li><code>value</code> attribute sets what will be submitted if a control is selected</li>
		<li><code>[cc] => visa, [startrek] => picard</code></li>
	</ul>
</div>



<div class="slide">
	<h1>
		URL-encoding
	</h1>

	<ul>
		<li>certain characters are not allowed in URL query parameters:
			<ul>
				<li>examples: <code>&quot; &quot;</code>, <code>&quot;/&quot;</code>, <code>&quot;=&quot;</code>, <code>&quot;&amp;&quot;</code></li>
			</ul>
		</li>

		<li>when passing a parameter, it is <span class="term">URL-encoded</span>
			(<a class="popup" href="http://www.w3schools.com/TAGS/ref_urlencode.asp">reference table</a>)

			<ul>
				<li><code>&quot;Marty's cool!?&quot;</code> &rarr; <code>&quot;Marty<em>%27s+</em>cool<em>%3F%21</em>&quot;</code></li>
			</ul>
		</li>

		<li>you don't usually need to worry about this:
			<ul>
				<li>the browser automatically encodes parameters before sending them</li>
				<li>the PHP <code>$_GET</code> and <code>$_POST</code> arrays automatically decode them</li>
				<li>
					... but occasionally the encoded version does pop up (e.g. in Firebug)
				</li>
			</ul>
		</li>
	</ul>
</div>



<div class="slide">
	<h1>Submitting data to a web server</h1>

	<ul>
		<li>though browsers mostly retrieve data, sometimes you want to submit data to a server
			<ul>
				<li>Hotmail: Send a message</li>
				<li>Flickr: Upload a photo</li>
				<li>Google Calendar: Create an appointment</li>
			</ul>
		</li>

		<li>the data is sent in HTTP requests to the server
			<ul>
				<li>with HTML forms</li>
				<li>with <span class="term">Ajax</span> (seen later)</li>
			</ul>
		</li>

		<li>the data is placed into the request as parameters</li>
	</ul>
</div>



<div class="slide">
	<h1>
		HTTP <code>GET</code> vs. <code>POST</code> requests
	</h1>

	<ul>
		<li>
			<strong><code>GET</code></strong> : asks a server for a page or data
			<ul>
				<li>if the request has parameters, they are sent in the URL as a query string</li>
			</ul>
		</li>
		<li>
			<strong><code>POST</code></strong> : submits data to a web server and retrieves the server's response
			<ul>
				<li>if the request has parameters, they are embedded in the request's HTTP packet, not the URL</li>
			</ul>
		</li>
		<!--
		<li>
			<strong><code>put</code></strong> : uploads an entire file to a web server
			<ul>
				<li>useful for large uploads such as image files and email attachments</li>
			</ul>
		</li>
		-->

		<li class="incremental">
			For submitting data to be saved, <code>POST</code> is more appropriate than <code>GET</code>

			<ul>
				<li><code>GET</code> requests embed their parameters in their URLs</li>
				<li>URLs are limited in length (~ 1024 characters)</li>
				<li>URLs cannot contain special characters without encoding</li>
				<li><a href="http://www.allvirtualware.com/languages/french_translation_software.htm">private data in a URL</a> can be seen or modified by users</li>
			</ul>
		</li>
	</ul>
</div>



<div class="slide">
	<h1>Form POST example</h1>

	<div class="example">
		<pre class="examplecode html">
&lt;form action=&quot;http://foo.com/app.php&quot; <em>method=&quot;post&quot;</em>&gt;
	&lt;div&gt;
		Name: &lt;input type=&quot;text&quot; name=&quot;name&quot; /&gt; &lt;br /&gt;
		Food: &lt;input type=&quot;text&quot; name=&quot;meal&quot; /&gt; &lt;br /&gt;
		&lt;label&gt;Meat? &lt;input type=&quot;checkbox&quot; name=&quot;meat&quot; /&gt;&lt;/label&gt; &lt;br /&gt;
		&lt;input type=&quot;submit&quot; /&gt;
	&lt;div&gt;
&lt;/form&gt;
</pre>

		<div class="exampleoutput insertoutput"></div>
	</div>
</div>



<div class="slide">
	<h1>GET or POST?</h1>

	<pre class="examplecode php">
if (<em>$_SERVER[&quot;REQUEST_METHOD&quot;]</em> == "GET") {
	<span class="comment"># process a GET request</span>
	<var>...</var>
} elseif (<em>$_SERVER[&quot;REQUEST_METHOD&quot;]</em> == "POST") {
	<span class="comment"># process a POST request</span>
	<var>...</var>
}
</pre>

	<ul>
		<li>some PHP pages process both GET and POST requests</li>
		<li>to find out which kind of request we are currently processing, <br />
		look at the global <code>$_SERVER</code> array's <code>&quot;REQUEST_METHOD&quot;</code> element</li>
	</ul>
</div>



<div class="slide">
	<h1>
		Including files: <a href="http://www.php.net/include"><code>include</code></a>
	</h1>

	<pre class="syntaxtemplate php">
include(&quot;<var>filename</var>&quot;);
</pre>

	<pre class="examplecode php">
include(&quot;header.html&quot;);
include(&quot;shared-code.php&quot;);
</pre>

	<ul>
		<li>inserts the entire contents of the given file into the PHP script's output page</li>
		<li>encourages modularity</li>
		<li>useful for defining reused functions needed by multiple pages</li>
		<li>
			related:
			<a class="popup" href="http://php.net/include_once"><code>include_once</code></a>,
			<a class="popup" href="http://php.net/include_once"><code>require</code></a>,
			<a class="popup" href="http://php.net/include_once"><code>require_once</code></a>
		</li>
	</ul>
</div>



[an error occurred while processing this directive]