HTML for online store form

gistfile1.htm

<form action="/order/" class="form" id="form1" method="post">
 	<fieldset style="border: 2px solid ; padding: 10px;">    
	<legend>Pick a product</legend>
    <table id="product_detail_box" width="100%">
      <tbody><tr>
        <td>
          <table>
            
            <tbody><tr>
              <td><input checked="checked" id="product_complete" name="product" type="radio" value="complete"> <label for="product_complete">myHalo Complete</label> ($59/mo)</td>
              <td><img alt="Myhalo-chest-strap" src="/images/myhalo-chest-strap.gif?1265329118"></td>
              <script type="text/javascript">
//<![CDATA[
new Form.Element.Observer('product_complete', 1, function(element, value) {toggleProductDetails();})
//]]>
</script>
            </tr>
                        
            <tr>
              <td><input id="product_clip" name="product" type="radio" value="clip"> <label for="product_clip">myHalo Clip</label> ($49/mo)</td>
              <td><img alt="Myhalo-belt-clip" src="/images/myhalo-belt-clip.jpg?1265945969"></td>
              <script type="text/javascript">
//<![CDATA[
new Form.Element.Observer('product_clip', 1, function(element, value) {toggleProductDetails();})
//]]>
</script>
            </tr>
                        
            <tr><td colspan="2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="/images/product_matrix.jpg?1265329118" rel="facebox">What's the difference?</a></td></tr>
                      </tbody></table>
        </td>
        
        <td>
          
          <div id="halo_complete_box" style="float: left; margin-top: 20px; width: 100%; display: block; ">
            <table width="100%" class="colored">
              <tbody><tr><th>Shopping cart items</th><th>Price</th></tr>
              <tr><td>Deposit</td><td>$249.00</td></tr>
              <tr class="altrow"><td>3 months advance ($59 x 3)</td><td>$177.00</td></tr>
              <tr><td>Shipping</td><td>$15.00</td></tr>
              <tr class="altrow"><td>Total*</td><td>
                                <strong>$439.00</strong>
            </td></tr>
            </tbody></table>
            <p>
              *Note: Recurring monthly charge of <b>$59.00/mo</b> will begin Saturday, May 22, 2010
            </p>
          </div>
          
          
          <div id="halo_clip_box" style="float: left; margin-top: 20px; width: 100%; display: none; ">
            <table width="100%" class="colored">
              <tbody><tr><th>Shopping cart items</th><th>Price</th></tr>
              <tr><td>Deposit</td><td>$249.00</td></tr>
              <tr class="altrow"><td>3 months advance ($49 x 3)</td><td>$147.00</td></tr>
              <tr><td>Shipping</td><td>$15.00</td></tr>
              <tr class="altrow"><td>Total*</td><td>
                                <strong>$409.00</strong>
              </td></tr>
            </tbody></table>
            <p>
              *Note: Recurring monthly charge of <b>$49.00/mo</b> will begin Saturday, May 22, 2010
            </p>
          </div>
                    
          <br>
        </td>

      </tr>
    </tbody></table>
  </fieldset>
  <br><br>
	<fieldset style="border: 2px solid; padding: 10px;">   		 
    <legend>Billing and Shipping</legend>
    <table width="100%">
      <tbody><tr align="left">
        <th width="33%">
          Shipping address
        </th>
        
        <th width="33%">
          Billing address
        </th>
        
        <th>
          Payment method
        </th>
      </tr>
      
      <tr>
        <td width="33%">
          <input id="order_halouser" name="order[halouser]" type="checkbox" value="1"><input name="order[halouser]" type="hidden" value="0">
          <label>Also myHalo user</label>
        </td>
        <td width="33%">
          <input checked="checked" id="order_bill_address_same" name="order[bill_address_same]" type="checkbox" value="1"><input name="order[bill_address_same]" type="hidden" value="0">
          <label for="order_bill_address_same">Same as shipping</label>
          <script type="text/javascript">
//<![CDATA[
new Form.Element.EventObserver('order_bill_address_same', function(element, value) {if (document.getElementById('order_bill_address_same').checked) { hideDiv('billing_block'); } else { showDiv('billing_block'); }}, 'click')
//]]>
</script>
        </td>
        <td>&nbsp;</td>
      </tr>
      
      <tr>
      <td style="vertical-align: top;">
        <p>
          <label for="order_ship_first_name">First name</label>, <label for="order_ship_last_name">Last name</label><br>
          <input class="required validate-alpha" id="order_ship_first_name" name="order[ship_first_name]" size="30" type="text"> 
          <input class="required validate-alpha" id="order_ship_last_name" name="order[ship_last_name]" size="30" type="text">
        </p>
        <p>
          <label for="order_ship_address">Shipping address</label><br>
          <input class="required" id="order_ship_address" name="order[ship_address]" size="30" type="text">
        </p>
        <p>
          <label for="order_ship_city">City</label><br>
          <input class="required" id="order_ship_city" name="order[ship_city]" size="30" type="text">
        </p>
        <p>
          <label for="order_ship_state">State</label><br>
          
            <select id="order_ship_state" name="order[ship_state]"><option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District Of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option></select>
                  </p>
        <p>
          <label for="order_ship_zip">Zip</label><br>
          <input class="required validate-digits" id="order_ship_zip" name="order[ship_zip]" size="10" type="text" maxlength="6">
        </p>
        <p>
          <label for="order_ship_phone">Phone</label><br>
          <input class="required" id="order_ship_phone" name="order[ship_phone]" size="30" type="text">
        </p>
        <p>
          <label for="order_ship_email">Email</label><br>
          <input class="required validate-email" id="order_ship_email" name="order[ship_email]" size="30" type="text">
        </p>
      </td>
      
      <td style="vertical-align: top;" width="33%">
        <div id="billing_block" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; display: none; ">
          <p>
            <label for="order_bill_first_name">First name</label>, <label for="order_bill_last_name">Last name</label><br>
            <input class="required validate-alpha" id="order_bill_first_name" name="order[bill_first_name]" size="30" type="text"> 
            <input class="required validate-alpha" id="order_bill_last_name" name="order[bill_last_name]" size="30" type="text">
          </p>
          <p>
            <label for="order_bill_address">Billing address</label><br>
            <input class="required" id="order_bill_address" name="order[bill_address]" size="30" type="text">
          </p>
          <p>
            <label for="order_bill_city">City</label><br>
            <input class="required" id="order_bill_city" name="order[bill_city]" size="30" type="text">
          </p>
          <p>
            <label for="order_bill_state">State</label><br>
            
              <select id="order_bill_state" name="order[bill_state]"><option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District Of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option></select>
                      </p>
          <p>
            <label for="order_bill_zip">Zip</label><br>
            <input class="required validate-digits" id="order_bill_zip" name="order[bill_zip]" size="10" type="text" maxlength="6">
          </p>
          <p>
            <label for="order_bill_phone">Phone</label><br>
            <input class="required" id="order_bill_phone" name="order[bill_phone]" size="30" type="text">
          </p>
          <p>
            <label for="order_bill_email">Email</label><br>
            <input class="required validate-email" id="order_bill_email" name="order[bill_email]" size="30" type="text">
          </p>
        </div>
      </td>
      
      <td style="vertical-align: top;">
        <p>
          <label for="order_card_number">Card number</label><br>
          <input class="required" id="order_card_number" name="order[card_number]" size="20" type="text" maxlength="16">
        </p>
        <p>
          <label for="order_card_expiry">Expiration</label> (Month/Year)<br>
          <input id="order_card_expiry_3i" name="order[card_expiry(3i)]" type="hidden" value="1">
<select id="order_card_expiry_2i" name="order[card_expiry(2i)]">
<option value="1">January</option>
<option selected="selected" value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select id="order_card_expiry_1i" name="order[card_expiry(1i)]">
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option selected="selected" value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
</select>

        </p>
        <p>
          <label for="order_card_type">Card Type</label><br>
          
            <select id="order_card_type" name="order[card_type]"><option value="visa">Visa</option>
<option value="master">MasterCard</option>
<option value="express">American Express</option>
<option value="discover">Discover</option></select>
                  </p>
        <p>
          <label for="order_card_csc">CSC</label> (Card Security Code)<br>
            <input class="required" id="order_card_csc" name="order[card_csc]" size="4" type="password" maxlength="4">
        </p>
        <span class="hint">Note: The CSC is located on the back of <a href="/images/CVC2SampleVisaNew.png?1265329118" rel="facebox">MasterCard, VISA, or Discover</a> cards and is typically a separate group of 3 digits to the right of signature strip. On <a href="/images/CIDSampleAmex.png?1265329118" rel="facebox">American Express</a> cards, the CSC is a 4 digit code on the front towards the right.</span>
        <p>
          <label>Comments and special shipping instructions</label><br>
          <textarea cols="40" id="order_comments" name="order[comments]" rows="5"></textarea>
        </p>
              </td>
      </tr>
    </tbody></table>
  </fieldset>
  <p class="textright">
    
    <input class="largebutton" id="order_submit" name="commit" type="submit" value="Continue &gt;">
  </p>
</form>