updates to 14

zarend · Aug 6, 2012 · 94b3eac · 94b3eac
1 parent b11faa7
commit 94b3eac
Show file tree

Hide file tree

Showing 7 changed files with 141 additions and 17 deletions.
diff --git a/chapter14/starbuzz/accessform.css b/chapter14/starbuzz/accessform.css
@@ -0,0 +1,32 @@
+body {
+	background: #efe5d0 url(images/background.gif) top left;
+	margin: 20px;
+}
+
+form {
+	display: table;
+	padding: 10px;
+	border: thin dotted #7e7e7e;
+	background-color: #e1ceb8;
+}
+
+div.tableRow {
+	display: table-row;
+}
+
+div.tableRow > p, div.tableRow > label, div.tableRow > input {
+	display: table-cell;
+	vertical-align: top;
+	padding: 3px;
+}
+div.tableRow label:first-child {
+	text-align: right;
+}
+form textarea {
+	display: table-cell;
+	width: 500px;
+	height: 200px;
+}
+legend {
+	font-weight: bold;
+}
diff --git a/chapter14/starbuzz/accessform.html b/chapter14/starbuzz/accessform.html
@@ -0,0 +1,93 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>The Starbuzz Bean Machine</title>
+	<link rel="stylesheet" href="starbuzz.css">
+	<link rel="stylesheet" href="accessform.css">
+  </head>
+  <body>
+
+    <h1>The Starbuzz Bean Machine</h1>
+    <h2>Fill out the form below and click "order now" to order</h2>
+
+    <form action="http://www.starbuzzcoffee.com/processorder.php" method="post">
+	<fieldset>
+		<legend>Order details</legend>
+		<div class="tableRow">
+			<label for="beans">
+          		Choose your beans:
+			</label>
+            <select id="beans" name="beans">
+              <option value="House Blend">House Blend</option>
+              <option value="Bolivia">Shade Grown Bolivia Supremo</option>
+              <option value="Guatemala">Organic Guatemala</option>
+              <option value="Kenya">Kenya</option>
+            </select>
+		</div>
+		<div class="tableRow">
+			<label>Type:</label>
+			<p>
+           		<input type="radio" id="whole_beantype" name="beantype" value="whole"> 
+					<label for="whole_beantype">Whole bean</label><br>
+            	<input type="radio" id="ground_beantype" name="beantype" value="ground" checked> 
+            		<label for="ground_beantype">Ground</label>
+			</p>
+		</div>
+		<div class="tableRow">
+			<label for="bags">Number of bags:</label>
+			<input type="number" id="bags" name="bags" min="1" max="10">
+		</div>
+		<div class="tableRow">
+			<label for="date">Must arrive by date:</label>
+			<input type="date" name="date">
+		</div>
+		<div class="tableRow">
+			<label>Extras:</label>
+			<p>
+            	<input type="checkbox" id="giftwrap_extras" name="extras[]" value="giftwrap"> 
+					<label for="giftwrap_extras">Gift wrap</label><br>
+            	<input type="checkbox" id="catalog_extras" name="extras[]" value="catalog" checked>
+            		<label for="catalog_extras">Include catalog with order</label>
+			</p>
+		</div>
+	</fieldset>
+	<fieldset>
+		<legend>Ship to</legend>
+		<div class="tableRow">
+			<label for="name">Name:</label>
+			<input type="text" id="name" name="name" value="" placeholder="Buckaroo Banzai" required> 
+		</div>
+		<div class="tableRow">
+			<label for="address">Address:</label>
+			<input type="text" id="address" name="address" value="" placeholder="Banzai Institute" required> 
+		</div>
+		<div class="tableRow">
+			<label for="city">City:</label>
+			<input type="text" id="city" name="city" value="" placeholder="Los Angeles" required> 
+		</div>
+		<div class="tableRow">
+			<label for="state">State:</label>
+			<input type="text" id="state" name="state" value="" placeholder="CA" required>
+		</div>
+		<div class="tableRow">
+			<label for="zip">Zip:</label>
+			<input type="text" id="zip" name="zip" value="" placeholder="90050" required>
+		</div>
+		<div class="tableRow">
+			<label for="phone">Phone:</label>
+			<input type="tel" id="phone" name="phone" value="" placeholder="310-555-1212" required>
+		</div>
+		<div class="tableRow">
+			<label for="comments">Customer Comments:</label>
+            <textarea id="comments" name="comments"></textarea>
+		</div>
+		<div class="tableRow">
+			<label></label>
+			<input type="submit" value="Order Now">
+		</div>
+	</fieldset>
+    </form>
+  </body>
+</html>
+
diff --git a/chapter14/starbuzz/blog.html b/chapter14/starbuzz/blog.html
@@ -11,7 +11,7 @@
       <img id="headerLogo"
            src="images/headerLogo.gif" alt="Starbuzz Coffee header logo image">
       <img id="headerSlogan"
-          src="images/headerSlogan.gif" alt="Starbuzz Coffee header slogan image">
+          src="images/headerSlogan.gif" alt="Providing all the caffeine you need to power your life.">
     </header>
 
 	<nav>

diff --git a/chapter14/starbuzz/form-complete.html b/chapter14/starbuzz/form-complete.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <meta charset="utf-8">
@@ -9,7 +9,7 @@
     <h1>The Starbuzz Bean Machine</h1>
     <h2>Fill out the form below and click "order now" to order</h2>
 
-    <form id="beanform" action="http://starbuzzcoffee.com/processorder.php" method="post">
+    <form action="http://starbuzzcoffee.com/processorder.php" method="post">
 		<p>
           Choose your beans:
             <select name="beans">
@@ -24,7 +24,7 @@ <h2>Fill out the form below and click "order now" to order</h2>
             <input type="radio" name="beantype" value="whole">
             Whole bean
             <br>
-            <input type="radio" name="beantype" value="ground" checked="checked"> 
+            <input type="radio" name="beantype" value="ground" checked> 
             Ground
 		</p>
 		<p>
@@ -38,7 +38,7 @@ <h2>Fill out the form below and click "order now" to order</h2>
             <input type="checkbox" name="extras[]" value="giftwrap">
             Gift wrap
             <br>
-            <input type="checkbox" name="extras[]" value="catalog" checked="checked">
+            <input type="checkbox" name="extras[]" value="catalog" checked>
             Include catalog with order
 		</p>
 		<p>
@@ -58,7 +58,7 @@ <h2>Fill out the form below and click "order now" to order</h2>
 		</p>
 		<p>
           Customer Comments:<br>
-            <textarea name="comments" rows="10" cols="48"></textarea>
+            <textarea name="comments"></textarea>
 		</p>
 		<p>
             <input type="submit" value="Order Now">

diff --git a/chapter14/starbuzz/index.html b/chapter14/starbuzz/index.html
@@ -11,7 +11,7 @@
       <img id="headerLogo"
            src="images/headerLogo.gif" alt="Starbuzz Coffee header logo image">
       <img id="headerSlogan"
-          src="images/headerSlogan.gif" alt="Starbuzz Coffee header slogan image">
+          src="images/headerSlogan.gif" alt="Providing all the caffeine you need to power your life.">
     </header>
 
 	<nav>

diff --git a/chapter14/starbuzz/styledform.css b/chapter14/starbuzz/styledform.css
@@ -1,9 +1,3 @@
-/*
-@font-face {
-	font-family: SkippySharp;
-	src: url(SkippySharp.otf);
-}
-*/
 body {
 	background: #efe5d0 url(images/background.gif) top left;
 	margin: 20px;
@@ -16,6 +10,11 @@ form {
 	background-color: #e1ceb8;
 }
 
+form textarea {
+	width: 500px;
+	height: 200px;
+}
+
 div.tableRow {
 	display: table-row;
 }

diff --git a/chapter14/starbuzz/styledform.html b/chapter14/starbuzz/styledform.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <meta charset="utf-8">
@@ -29,7 +29,7 @@ <h2>Fill out the form below and click "order now" to order</h2>
 		<p> Type: </p>
 		<p>
             <input type="radio" name="beantype" value="whole"> Whole bean<br>
-            <input type="radio" name="beantype" value="ground" checked="checked"> 
+            <input type="radio" name="beantype" value="ground" checked> 
             Ground
 		</p>
 	</div>
@@ -45,7 +45,7 @@ <h2>Fill out the form below and click "order now" to order</h2>
 		<p> Extras: </p>
 		<p>
             <input type="checkbox" name="extras[]" value="giftwrap"> Gift wrap<br>
-            <input type="checkbox" name="extras[]" value="catalog" checked="checked">
+            <input type="checkbox" name="extras[]" value="catalog" checked>
             Include catalog with order
 		</p>
 	</div>
@@ -80,7 +80,7 @@ <h2>Fill out the form below and click "order now" to order</h2>
 	<div class="tableRow">
 		<p> Customer Comments: </p>
 		<p>
-            <textarea name="comments" rows="10" cols="48"></textarea>
+            <textarea name="comments"></textarea>
 		</p>
 	</div>
 	<div class="tableRow">