<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Order Form</title>
<link rel="stylesheet" href="style.css">
<script src="modernizr.js"></script>
<script src="app.js"></script>
</head>
<body>
<form name="order" method="post" action="/submit">
<h1>Order Form</h1>
<fieldset>
<legend>Contact Details</legend>
<ul>
<li>
<label class="required">
<div>Full Name</div>
<input name="name" required autofocus>
</label>
</li>
<li>
<label class="required">
<div>Email Address</div>
<input type="email" name="email" required>
</label>
</li>
<li>
<label>
<div>Postal Address</div>
<input name="address1" placeholder="Address Line 1">
</label>
<div> </div>
<input name="address2" placeholder="Address Line 2">
<div> </div>
<input name="city" class="city" placeholder="Town/City">
<input name="state" class="state" placeholder="State">
<input name="zip" class="zip" placeholder="Zip Code">
<div> </div>
<select name="country">
<option value="0">Country</option>
<option value="US">United States</option>
<option value="CA">Canada</option>
</select>
</li>
<li>
<label>
<div>Home Phone No.</div>
<input type="tel" name="homephone">
</label>
</li>
<li>
<label>
<div>Cell Phone No.</div>
<input type="tel" name="cellphone">
</label>
</li>
<li>
<label>
<div>Skype Name</div>
<input name="skype">
</label>
</li>
<li>
<label>
<div>Twitter</div>
<span class="twitter_prefix">@</span>
<input name="twitter" class="twitter">
</label>
</li>
</ul>
</fieldset>
<fieldset>
<legend>Login Details</legend>
<ul>
<li>
<label class="required">
<div>Password</div>
<input type="password" name="password" required>
</label>
</li>
<li>
<label class="required">
<div>Confirm Password</div>
<input type="password" name="confirm_password" required>
</label>
</li>
</ul>
</fieldset>
<fieldset>
<legend>Order Details</legend>
<table>
<thead>
<tr>
<th>Product Code</th><th>Description</th><th>Qty</th>
<th>Price</th><th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>
COMP001
<input type="hidden" name="product_code" value="COMP001">
</td>
<td>The Ultimate Smartphone</td>
<td>
<input type="number" data-price="399.99" name="quantity"
value="0" min="0" max="99" maxlength="2">
</td>
<td>$399.99</td>
<td>
<output name="item_total" class="item_total">$0.00</output>
</td>
</tr>
<tr>
<td>
COMP002
<input type="hidden" name="product_code" value="COMP002">
</td>
<td>The Ultimate Tablet</td>
<td>
<input type="number" data-price="499.99" name="quantity"
value="0" min="0" max="99" maxlength="2">
</td>
<td>$499.99</td>
<td>
<output name="item_total" class="item_total">$0.00</output>
</td>
</tr>
<tr>
<td>
COMP003
<input type="hidden" name="product_code" value="COMP003">
</td>
<td>The Ultimate Netbook</td>
<td>
<input type="number" data-price="299.99" name="quantity"
value="0" min="0" max="99" maxlength="2">
</td>
<td>$299.99</td>
<td>
<output name="item_total" class="item_total">$0.00</output>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">Order Total</td>
<td>
<output name="order_total" id="order_total">$0.00</output>
</td>
</tr>
</tfoot>
</table>
</fieldset>
<fieldset>
<legend>Payment Details</legend>
<ul>
<li>
<label class="required">
<div>Name on Card</div>
<input name="card_name" required>
</label>
</li>
<li>
<label class="required">
<div>Credit Card No.</div>
<input name="card_number" pattern="[0-9]{13,16}"
maxlength="16" required title="13-16 digits, no spaces">
</label>
</li>
<li>
<label class="required">
<div>Expiry Date</div>
<input type="month" name="card_expiry" maxlength="7"
placeholder="YYYY-MM" required value="2015-06">
</label>
</li>
<li>
<label class="required">
<div>CVV2 No.</div>
<input name="card_cvv2" class="cvv" maxlength="3"
pattern="[0-9]{3}" required title="exactly 3 digits">
<span>(Three digit code at back of card)</span>
</label>
</li>
</ul>
</fieldset>
<div class="buttons">
<input type="submit" value="Submit Order">
<input type="submit" id="saveOrder" value="Save Order" formnovalidate formaction="/save">
</div>
</form>
</body>
</html>