<!--#include virtual="../s5/commontop.html" -->
<title>Lecture 6: HTML Forms & Submitting Data — INFO 343 Autumn 2011</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>INFO 343 Lecture 6</h1>
<h2>HTML Forms & Submitting Data</h2>
</div>
</div>
<div class="presentation">
<div class="slide">
<h1>HTML Forms & Submitting Data</h1>
<h3>Lecture 6</h3>
<h4>Reading: 6.1–6.3</h4>
<p class="license">
Except where otherwise noted, the contents of this presentation are Copyright 2010 Marty Stepp, Jessica Miller, and/or Morgan Doocy.
</p>
<div class="w3c">
<a href="http://validator.w3.org/check/referer"><img src="../s5/images/w3c-xhtml11.png" alt="Valid XHTML 1.1" /></a>
<a href="http://jigsaw.w3.org/css-validator/check/referer"><img src="../s5/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>
</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>a program on the server can examine and utilize the value of parameters</li>
<li>the program can produce different output based on values passed by the user</li>
</ul>
</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>
</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 program 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 separate 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><code>input</code> elements are inline, so must wrap them in a block element such as <code>div</code> or <code>p</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>
</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>many variants of the <code>input</code> tag—used to create different types of UI controls
<ul>
<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>don’t forget! it’s a self-closing tag AND an inline tag</li>
</ul>
</li>
<li><code>name</code> attribute determines name of query parameter passed to server</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://info343.ischool.uw.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://info343.ischool.uw.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://info343.ischool.uw.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://info343.ischool.uw.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://info343.ischool.uw.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>
Radio button common errors:
</h1>
<ol>
<li>Forgetting to assign the same <code>name</code> to each radio button in a group will result in them not being grouped
<div class="example">
<pre class="examplecode html">
<label><input type="radio" <em>name="visa"</em> checked="checked" /> Visa</label>
<label><input type="radio" <em>name="mastercard"</em> /> MasterCard</label>
<label><input type="radio" <em>name="amex"</em> /> American Express</label>
</pre>
<form action="http://info343.ischool.uw.edu/params.php" class="exampleoutput insertoutput">
<input type="submit" />
</form>
</div>
</li>
<li>Forgetting to assign <code>value</code>s to each radio button will result in the value <code>on</code> being sent no matter which button is selected (not very helpful)
<div class="example">
<pre class="examplecode html">
<label><input type="radio" <em>name="cc"</em> checked="checked" /> Visa</label>
<label><input type="radio" <em>name="cc"</em> /> MasterCard</label>
<label><input type="radio" <em>name="cc"</em> /> American Express</label>
</pre>
<form action="http://info343.ischool.uw.edu/params.php" class="exampleoutput insertoutput">
<input type="submit" />
</form>
</div>
</li>
</ol>
</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://info343.ischool.uw.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://info343.ischool.uw.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 <code>.php</code> program, 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://info343.ischool.uw.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://info343.ischool.uw.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>Why won’t my form control refresh?</h1>
<p><q>I changed the form's HTML code ... but when I refresh, the page doesn't update!</q></p>
<ul>
<li>By default, when you refresh a page, it keeps the values you entered in all form controls
<ul>
<li>(it does this in case you were filling out a long form and needed to refresh/return to it)</li>
</ul>
</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>
</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://info343.ischool.uw.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://info343.ischool.uw.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>
<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>
<div class="example">
<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.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>
</ul>
</div>
<div class="slide">
<h1>Problems with submitting data</h1>
<div class="example">
<pre class="examplecode html" style="font-size: smaller">
<label><input type="radio" <em>name="cc"</em> /> Visa</label>
<label><input type="radio" <em>name="cc"</em> /> MasterCard</label> <br />
Favorite Star Trek captain:
<select name="startrek">
<option>James T. Kirk</option>
<em><option>Jean-Luc Picard</option></em>
</select> <br />
</pre>
<form action="http://info343.ischool.uw.edu/params.php" class="exampleoutput insertoutput">
<input type="submit" />
</form>
</div>
<ul>
<li>this form submits to our handy <a href="http://info343.ischool.uw.edu/params.php">params.php</a> tester page</li>
<li>the form may look correct, but when you submit it…
<ul>
<li><code><em class="bad">[cc] => on</em>, [startrek] => Jean-Luc Picard</code></li>
</ul>
</li>
</ul>
</div>
<div class="slide">
<h1>The <code>value</code> attribute</h1>
<div class="example">
<pre class="examplecode html" style="font-size: smaller">
<label><input type="radio" name="cc" <em>value="visa"</em> /> Visa</label>
<label><input type="radio" name="cc" <em>value="mastercard"</em> /> MasterCard</label> <br />
Favorite Star Trek captain:
<select name="startrek">
<option <em>value="kirk"</em>>James T. Kirk</option>
<option <em>value="picard"</em>>Jean-Luc Picard</option>
</select> <br />
</pre>
<form action="http://info343.ischool.uw.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
<span class="readingsection">(6.3.1)</span>
</h1>
<ul>
<li>certain characters are not allowed in URL query parameters:
<ul>
<li>examples: <q><code> </code></q>, <q><code>/</code></q>, <q><code>=</code></q>, <q><code>&</code></q></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><q><code>What's up dawg!?</code></q> → <q><code>What<em>%27</em>s<em>+</em>up<em>+</em>dawg<em>%3F%21</em></code></q></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>$_REQUEST</code> array automatically decodes 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
<span class="readingsection">(6.3.3)</span>
</h1>
<ul>
<li>
<strong><code>GET</code></strong> : <em>asks</em> a server for information
<ul>
<li>parameters tell the server what specific information should be returned
<ul>
<li>e.g.: a Google search query: please give me information about this!</li>
</ul>
</li>
<li>parameters are sent as key-value pairs after the <code>?</code> at the end of the URL</li>
</ul>
</li>
<li>
<strong><code>POST</code></strong> : <em>gives</em> information to a web server
<ul>
<li>parameters specify the information being given to the server
<ul>
<li>e.g.: uploading a file</li>
</ul>
</li>
<li>parameters are sent as HTTP headers, not in the URL</li>
<li>server responds with a page (confirmation of receipt, etc.)</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>
-->
</ul>
</div>
<div class="slide">
<h1>
Drawbacks of <code>GET</code> (when to use <code>POST</code>)
<span class="readingsection">(6.3.3)</span>
</h1>
<p>For sending data, a <code>POST</code> request is more appropriate than a <code>GET</code>.</p>
<ul>
<li><code>GET</code> requests embed parameters in the URL
<ul>
<li>security implications: URLs are a user-visible part of browsing history</li>
<li><a href="http://www.allvirtualware.com/languages/french_translation_software.htm">data in a URL</a> can be modified by users to change the output of the server program</li>
</ul>
</li>
<li>URLs are limited in length (~ 1024 characters)</li>
<li>URLs cannot contain special characters without encoding</li>
</ul>
</div>
<div class="slide">
<h1>Form POST example</h1>
<div class="example">
<pre class="examplecode html">
<form action="http://foo.com/app.php" <em>method="post"</em>>
<div>
Name: <input type="text" name="name" /> <br />
Food: <input type="text" name="meal" /> <br />
<label>Meat? <input type="checkbox" name="meat" /></label> <br />
<input type="submit" />
<div>
</form>
</pre>
<div class="exampleoutput insertoutput"></div>
</div>
</div>
<div class="slide">
<h1>
Uploading files
<span class="readingsection">(6.3.4)</span>
</h1>
<div class="example">
<pre class="examplecode html">
<form action="http://webster.cs.washington.edu/params.php"
method="post" <em>enctype="multipart/form-data"</em>>
Upload an image as your avatar:
<em><input type="file" name="avatar" /></em>
<input type="submit" />
</form>
</pre>
<div class="exampleoutput insertoutput"></div>
</div>
<ul>
<li>add a file upload to your form as an <code>input</code> tag with <code>type</code> of <code>file</code></li>
<li>must also set the <code>enctype</code> attribute of the form</li>
</ul>
<div class="handout">
<ul>
<li>it makes sense that the form's request method must be <code>post</code> (an entire file can't be put into a URL!)</li>
<li>form's <code>enctype</code> (data encoding type) must be set to <code>multipart/form-data</code> or else the file will not arrive at the server</li>
</ul>
</div>
</div>
<div class="slide">
<h1>Form layout with CSS</h1>
<div class="example">
<pre class="examplecode html">
<form action="http://foo.com/login.php" method="post">
<dl>
<dt>Name:</dt> <dd><input type="text" id="username" name="username" /></dd>
<dt>Food:</dt> <dd><input type="password" id="password" name="password" /></dd>
<dl>
<div><label><input type="checkbox" id="remember" name="remember" /> Keep me signed in</label></div>
<div><input type="submit" value="Log in"/></div>
</form>
</pre>
<div class="exampleoutput insertoutput"></div>
</div>
</div>
<div class="slide">
<h1>Form layout with CSS (cont’d)</h1>
<div class="example">
<pre class="examplecode css" style="float: left; width: 40%; margin-right: 5%">
dl {
margin: .5em 0;
background-color: yellow;
}
dt {
<em>float: left;</em>
<em>clear: left;</em>
<em>width: 4.5em;</em>
background-color: fuchsia;
}
</pre>
<pre class="examplecode css" style="float: left; width: 45%;">
dd, div {
<em>margin-left: 5em;</em>
}
dd {
<em>margin-bottom: .5em;</em>
background-color: blue;
}
div {
background-color: green;
}
</pre>
<div class="exampleoutput insertoutput" style="clear: both;">
<form action="http://foo.com/login.php" method="post">
<dl>
<dt>Username:</dt> <dd><input type="text" name="username" /></dd>
<dt>Password:</dt> <dd><input type="password" name="password" /></dd>
</dl>
<div><label><input type="checkbox" id="remember" name="remember" /> Keep me signed in</label></div>
<div><input type="submit" value="Log in"/></div>
</form>
</div>
</div>
</div>
<!--#include virtual="../s5/commonbottom.html" -->