Permalink
Browse files

copy

  • Loading branch information...
1 parent 4e65de1 commit 46ad7d533461f8846e439397d79379b653f3a016 @sankho committed Apr 6, 2012
Showing with 132 additions and 3 deletions.
  1. +2 −0 index.html
  2. +130 −3 lecture_nine/slides.html
View
@@ -27,6 +27,8 @@
<h3><a href="lecture_seven/slides.html">Review & CSS3.</a></h3>
</li><li>
<h3><a href="lecture_eight/slides.html">Javascript.</a></h3>
+ </li><li>
+ <h3><a href="lecture_nine/slides.html">Javascript & Forms.</a></h3>
</li>
</ol>
</body>
@@ -20,8 +20,8 @@
<div class="slides layout-regular template-sva">
<div class="slide p1">
- <h1 class="bigger">Javascript.</h1>
- <p>Part II</p>
+ <h1 class="bigger">Javascript & Forms.</h1>
+ <p>Statefullness.</p>
</div>
<div class="slide red invert">
@@ -110,8 +110,135 @@ <h1 class="bigger orange">Interaction - How?</h1>
</ul>
</div>
+ <div class="slide green invert">
+ <h1 class="orange bigger">Javascript and Forms.</h1>
+ <p>But first, forms.</p>
+ </div>
+
+
+ <div class="slide">
+ <h1>HTML Forms</h1>
+ <blockquote cite="http://html5doctor.com/element-index/#form2">
+ The <code>form</code> element represents a collection of form-associated elements, some of which can represent editable values that can be submitted to a server for processing.
+ </blockquote>
+ <pre>&lt;form action="some/url/" method="get"&gt;</pre>
+ </div>
+ <div class="slide">
+ <h1>Form attributes.</h1>
+ <ul>
+ <li>
+ <code>action="some/url/"</code><br>
+ The URL to which the form's data is sent. The user will also end up at this address.
+ </li>
+ <li>
+ <code>method="get"</code><br>
+ For our purposes, just use get.<br><br>
+ What it refers to is the request method (get or post).
+ </li>
+ </ul>
+ </div>
+ <div class="slide">
+ <h1>The &lt;input&gt; tag.</h1>
+ <pre>&lt;input type="text" id="query" name="query"&gt;</pre>
+ <ul>
+ <li>Creates a single-line field for text input.</li>
+ </ul>
+ </div>
+ <div class="slide">
+ <h1>The &lt;textarea&gt; tag.</h1>
+ <pre>&lt;textarea name="message"&gt;&lt;/textarea&gt;</pre>
+ <ul>
+ <li>Creates a multi-line field for text input.</li>
+ <li><strong>Note:</strong> Textareas have closing tags, unlike inputs!</li>
+ </ul>
+ </div>
+ <div class="slide">
+ <h1>Naming fields with the &lt;label&gt; tag.</h1>
+ <pre>&lt;label <strong>for="query"</strong>&gt;Search Term&lt;/label&gt;
+&lt;input type="text" <strong>id="query"</strong> name="query"&gt;</pre>
+ <ul>
+ <li>The <code>for</code> attribute matches the <code>id</code> attribute of an input.</li>
+ </ul>
+ </div>
+ <div class="slide">
+ <h1>The &lt;input&gt; tag, cont'd.</h1>
+ <pre>&lt;label&gt;
+&lt;input type="checkbox" name="foo"&gt;
+Are you sure?
+&lt;/label&gt;</pre>
+ <ul>
+ <li>Creates a checkbox.</li>
+ <li>Labels can be wrapped around inputs, which can be useful for checkboxes and radio buttons.</li>
+ </ul>
+ </div>
+ <div class="slide">
+ <h1>The &lt;input&gt; tag, cont'd.</h1>
+ <pre>&lt;label&gt;&lt;input type="radio" name="bar" value="a"&gt; Option A&lt;/label&gt;
+&lt;label&gt;&lt;input type="radio" name="bar" value="b"&gt; Option B&lt;/label&gt;</pre>
+ <ul>
+ <li>Creates two radio buttons.</li>
+ <li>Sets are defined using the <code>name</code> attribute.</li>
+ <li>Only one member of a set can be selected at once.</li>
+ </ul>
+ </div>
+ <div class="slide">
+ <h1>The &lt;select&gt; tag.</h1>
+ <pre>&lt;label for="choose"&gt;Make a choice.&lt;/label&gt;
+&lt;select id="choose" name=&quot;choose&quot;&gt;
+&lt;option&gt;Choice A&lt;/option&gt;
+&lt;option&gt;Choice B&lt;/option&gt;
+&lt;option&gt;Choice C&lt;/option&gt;
+&lt;/select&gt;</pre>
+ <ul>
+ <li>Similar to radio buttons by default.</li>
+ <li>Other attributes exist that will allow multi-selection and option grouping.</li>
+ </ul>
+ </div>
+ <div class="slide">
+ <h1>The &lt;button&gt; tag.</h1>
+ <pre>&lt;button&gt;Send!&lt;/button&gt;</pre>
+ <ul>
+ <li>By default, buttons will submit the form to its <code>action</code> using its <code>method</code>.</li>
+ <li>Also possible: <code>&lt;input type="submit"&gt;</code> or <code>&lt;input type="button"&gt;</code>.</li>
+ </ul>
+ </div>
+
+ <div class="slide">
+ <h1>Forms and CSS</h1>
+ <ul>
+ <li>As a general guideline, avoid over-styling form elements as they can have unpredictable consequences across devices.</li>
+ <li>Also, the more customized form elements become, the less obvious things are for your user as conventions are broken.</li>
+ <li>All form elements have <code>display: inline;</code> by default, but you can use <code>float</code> or different HTML structures to change that.</li>
+ </ul>
+ </div>
+
+ <div class="slide">
+ <h1 class="bigger">Forms <em>and</em> JavaScript.</h1>
+ </div>
+
+ <div class="slide">
+ <h3>Forms and Javascript</h3>
+ <ul>
+ <li>Target the form element using jQuery then attach a submit event.</li>
+ <li>Call e.preventDefault to stop the form from submitting via the browser.</li>
+ </ul>
+<pre>$(function() {
+
+ $('form').submit(function(e) {
+
+ // prevent the form from doing default stuff...
+ e.preventDefault();
+
+ // do whatever you want...
+
+ });
+
+})</pre>
+ </div>
+
<div class="slide">
- <h1 class="bigger">Examples.</h1>
+ <h1 class="bigger red">Examples.</h1>
+ <p>In class.</p>
</div>
</div>

0 comments on commit 46ad7d5

Please sign in to comment.