hcard-input-examples

From Microformats Wiki
Revision as of 05:58, 4 April 2017 by Tantek (talk | contribs) (fix upcoming link)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to search

This page is for documenting real world examples of web forms that input contact information (people or organizations/venues) towards brainstorming the use of hCard for input into forms for enabling hCard forms auto-fill and hCard copy + paste.

examples

person info input

  • Nearly every social network site's "sign up" / register / registration form.

E.g. see hcard-supporting-user-profiles.

Specific examples:

Yelp sign up

Input form markup simplified a bit with presentational markup removed, whitespace adjusted for readability: 

<form class="signup" method="post" action="/signup" name="signup_form">
  <fieldset>
    <input type="hidden" name="action_submit" value="1"/>
    <ol>
      <li><label for="signup-first-name">First Name:</label>
          <input id="signup-first-name" type="text" maxlength="32" name="first_name" value=""/>
      </li>
      <li><label for="signup-last-name">Last Name:</label>
          <input id="signup-last-name"type="text" maxlength="32" name="last_name" value=""/>
      </li>
      <li><label for="signup-address">Email Address:</label>
          <input id="signup-address" type="text" maxlength="64" name="email" value=""/>
          <p class="formNote">We loathe spam even more than you do. We will NOT sell your email address.</p>
      </li>
      <li><label for="signup-password">Password:</label>
          <input id="signup-password" type="password" maxlength="16" name="password" value=""/>
      </li>
      <li><label for="signup-password-confirm">Retype Password:</label>
          <input id="signup-password-confirm" type="password" maxlength="16" name="confirm_password" value=""/>
      </li>
      <li><label for="signup-zip">Zip Code:</label>
          <input id="signup-zip" type="text" class="zip" name="zip" value=""/>
          <span class="other-countries">
           <em>Not in the U.S.?</em>
           <input type="hidden" name="other_country" value="">
           <a href="http://www.yelp.ca/signup" class="ca" rel="CA"  alt="I live in Canada">CA</a>
           <a href="http://www.yelp.ie/signup" class="ie" rel="IE"  alt="I live in Ireland">IE</a>
           <a href="http://www.yelp.co.uk/signup" class="gb" rel="GB"  alt="I live in the U.K.">GB</a>
          </span>
      </li>
      <li class="gender">
        <span class="gender-label">Gender:<span class="formNote">(Optional)</span></span>
        <label for="signup-gender-male">
          <input id="signup-gender-male" class="gender" type="radio" name="gender" value="m"  /> Male</label>
        <label for="signup-gender-female">
          <input id="signup-gender-female" class="gender" type="radio" name="gender" value="f"  /> Female</label>
      </li>
      <li class="birthdate">
        <label for="signup-birthdate">Birthdate:<span class="formNote">(Optional)</span></label>
        <select name="birthdate_m">
          <option value="">---</option>
          <option value="1" >Jan</option>
          <option value="2" >Feb</option>
          <option value="3" >Mar</option>
          <option value="4" >Apr</option>
          <option value="5" >May</option>
          <option value="6" >Jun</option>
          <option value="7" >Jul</option>
          <option value="8" >Aug</option>
          <option value="9" >Sep</option>
          <option value="10" >Oct</option>
          <option value="11" >Nov</option>
          <option value="12" >Dec</option>
        </select>
        <select name="birthdate_d">
          <option value="">--</option>
          <option value="1" >1</option>
          <option value="2" >2</option>
          <option value="3" >3</option>
          <option value="4" >4</option>
          <option value="5" >5</option>
          <option value="6" >6</option>
          <option value="7" >7</option>
          <option value="8" >8</option>
          <option value="9" >9</option>
          <option value="10" >10</option>
          <option value="11" >11</option>
          <option value="12" >12</option>
          <option value="13" >13</option>
          <option value="14" >14</option>
          <option value="15" >15</option>
          <option value="16" >16</option>
          <option value="17" >17</option>
          <option value="18" >18</option>
          <option value="19" >19</option>
          <option value="20" >20</option>
          <option value="21" >21</option>
          <option value="22" >22</option>
          <option value="23" >23</option>
          <option value="24" >24</option>
          <option value="25" >25</option>
          <option value="26" >26</option>
          <option value="27" >27</option>
          <option value="28" >28</option>
          <option value="29" >29</option>
          <option value="30" >30</option>
          <option value="31" >31</option>
        </select>
        <select name="birthdate_y">
          <option value="">----</option>
          <option value="1993" >1993</option>
          <option value="1992" >1992</option>
          <option value="1991" >1991</option>
          <option value="1990" >1990</option>
          <option value="1989" >1989</option>
          <option value="1988" >1988</option>
          <option value="1987" >1987</option>
          <option value="1986" >1986</option>
          <option value="1985" >1985</option>
          <option value="1984" >1984</option>
          <option value="1983" >1983</option>
          <option value="1982" >1982</option>
          <option value="1981" >1981</option>
          <option value="1980" >1980</option>
          <option value="1979" >1979</option>
          <option value="1978" >1978</option>
          <option value="1977" >1977</option>
          <option value="1976" >1976</option>
          <option value="1975" >1975</option>
          <option value="1974" >1974</option>
          <option value="1973" >1973</option>
          <option value="1972" >1972</option>
          <option value="1971" >1971</option>
          <option value="1970" >1970</option>
          <option value="1969" >1969</option>
          <option value="1968" >1968</option>
          <option value="1967" >1967</option>
          <option value="1966" >1966</option>
          <option value="1965" >1965</option>
          <option value="1964" >1964</option>
          <option value="1963" >1963</option>
          <option value="1962" >1962</option>
          <option value="1961" >1961</option>
          <option value="1960" >1960</option>
          <option value="1959" >1959</option>
          <option value="1958" >1958</option>
          <option value="1957" >1957</option>
          <option value="1956" >1956</option>
          <option value="1955" >1955</option>
          <option value="1954" >1954</option>
          <option value="1953" >1953</option>
          <option value="1952" >1952</option>
          <option value="1951" >1951</option>
          <option value="1950" >1950</option>
          <option value="1949" >1949</option>
          <option value="1948" >1948</option>
          <option value="1947" >1947</option>
          <option value="1946" >1946</option>
          <option value="1945" >1945</option>
          <option value="1944" >1944</option>
          <option value="1943" >1943</option>
          <option value="1942" >1942</option>
          <option value="1941" >1941</option>
          <option value="1940" >1940</option>
          <option value="1939" >1939</option>
          <option value="1938" >1938</option>
          <option value="1937" >1937</option>
          <option value="1936" >1936</option>
          <option value="1935" >1935</option>
          <option value="1934" >1934</option>
          <option value="1933" >1933</option>
          <option value="1932" >1932</option>
          <option value="1931" >1931</option>
          <option value="1930" >1930</option>
          <option value="1929" >1929</option>
          <option value="1928" >1928</option>
          <option value="1927" >1927</option>
          <option value="1926" >1926</option>
          <option value="1925" >1925</option>
          <option value="1924" >1924</option>
          <option value="1923" >1923</option>
          <option value="1922" >1922</option>
          <option value="1921" >1921</option>
          <option value="1920" >1920</option>
          <option value="1919" >1919</option>
          <option value="1918" >1918</option>
          <option value="1917" >1917</option>
          <option value="1916" >1916</option>
          <option value="1915" >1915</option>
          <option value="1914" >1914</option>
          <option value="1913" >1913</option>
          <option value="1912" >1912</option>
          <option value="1911" >1911</option>
          <option value="1910" >1910</option>
          <option value="1909" >1909</option>
          <option value="1908" >1908</option>
          <option value="1907" >1907</option>
          <option value="1906" >1906</option>
          <option value="1905" >1905</option>
          <option value="1904" >1904</option>
          <option value="1903" >1903</option>
          <option value="1902" >1902</option>
          <option value="1901" >1901</option>
        </select>
      </li>
    </ol>
    <p class="smaller fine-print">By clicking the button below, you agree to the Yelp <a href="/static?p=tos&amp;country=US">Terms of Service</a> and <a href="/static?p=privacy&amp;country=US">Privacy Policy</a>.</p>
    <p><input type="image" id="signUpButton" src="https://images.yelp.com/static/20090605/i/new/btn/signup.gif"></p>
  </fieldset>
</form>

person billing shipping input

Shopping check out forms for ecommerce of virtual or physical items. What ecommerce sites ask for upon checking out, your shopping cart, etc. to make a purchase.

Specific examples:

Advance Auto Parts

Input form markup simplified a bit with scripting/presentational markup removed, whitespace adjusted for readability: 

...
<tbody><tr><td id="bill-form">
<div>
<h3>Billing Address<a name="create" id="create"></a></h3>
<p>
<input name="billingShippingSame" tabindex="6" value="false" title="Billing Shipping Same" type="checkbox">
Make shipping the same as my billing address
</p>
<h4>Use form below for your billing address:</h4>
<table> 
<tbody><tr>
<th class="required-text">* required fields</th> 
</tr>
<tr>
<th><span class="required-text">*</span>First Name:</th>
<td><input name="billFirstName" maxlength="40" tabindex="10" value="" id="billFirstName" title="billFirstName" type="text"></td>
</tr>
<tr>
<th><span class="required-text">*</span>Last Name:</th>
<td><input name="billLastName" maxlength="40" tabindex="11" value="" title="billLastName" type="text"></td>
</tr>
<tr>
<th><span class="required-text">*</span>Street Address 1:</th>
<td><input name="billAddress1" maxlength="49" tabindex="12" value="" title="billAddress1" type="text"></td>
</tr>
<tr>
<th>Street Address 2:</th>
<td><input name="billAddress2" maxlength="49" tabindex="13" value="" title="billAddress2" type="text"></td>
</tr>
<tr>
<th><span class="required-text">*</span>City:</th>
<td><input name="billCity" maxlength="40" tabindex="14" value="" title="billCity" type="text"></td>
</tr>
<tr>
<th></th>
<td>(Military Customers, enter APO/FPO/DPO for city)</td> 
</tr>
<input name="billCountry" value="US" type="hidden">
<tr>
<th><span class="required-text">*</span>State:</th>
<td>
<select name="billState" tabindex="15" title="billState">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AS">American Samoa</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="AA">Armed Forces Americas</option>
<option value="AE">Armed Forces Europe</option>
<option value="AP">Armed Forces Pacific</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="GU">Guam</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="MP">Northern Mariana Islands</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="PR">Puerto Rico</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="VI">Virgin Islands</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>
</td>
</tr>
<tr>
<th><span class="required-text">*</span>Zip Code:</th>
<td><input name="billZipCode" maxlength="10" tabindex="16" value="" title="billZipCode" type="text"></td>
</tr>
<tr>
<th><span class="required-text">*</span>Day Phone:</th>
<td>
(<input name="billDayPhonePart1" maxlength="3" tabindex="17" value="" title="billDayPhonePart1" type="text">)
<input name="billDayPhonePart2" maxlength="3" tabindex="19" value="" title="billDayPhonePart2" type="text">
<input name="billDayPhonePart3" maxlength="4" tabindex="20" value="" title="billDayPhonePart3" type="text">
</td>
</tr>
<tr>
<th><span class="required-text">*</span>Email Address:</th>
<td><input name="billEmail" maxlength="50" tabindex="21" value="" title="billEmail" type="text"></td>
</tr>
<tr>
<td colspan="2">
<input name="sendMeEmail" tabindex="22" value="checked" checked="checked" title="sendMeEmail" type="checkbox">
Yes, please send me emails about news, special offers, exclusives and promotions from Advance Auto Parts. See our
<a href="https://shop.advanceautoparts.com/webapp/wcs/stores/servlet/content_privacypolicy___" target="_blank">
Privacy Policy.
</a>
<input name="receiveEmail" value="" type="hidden">
</td>
</tr>
</tbody></table>
</div>
</td>
<td>&nbsp;</td>
<td id="ship-form">
<input name="hasDeliveryItems" value="true" type="hidden">
<h3>Shipping Address</h3>
<div id="ship-area">
<input name="shipAddressId" value="" type="hidden">
<h4>Add a new shipping address:</h4>
<table>
<tbody><tr>
<th class="required-text">* required fields</th> 
</tr>
<tr>
<th>*First Name:</th>
<td><input name="shipFirstName" maxlength="40" tabindex="115" value="" title="shipFirstName" type="text"></td>
</tr>
<tr>
<th>*Last Name:</th>
<td><input name="shipLastName" maxlength="40" tabindex="116" value="" title="shipLastName" type="text"></td>
</tr>
<tr>
<th>*Street Address 1:</th>
<td><input name="shipAddress1" maxlength="49" tabindex="118" value="" title="shipAddress1" type="text"></td>
</tr>
<tr>
<th>Street Address 2:</th>
<td><input name="shipAddress2" maxlength="49" tabindex="119" value="" title="shipAddress2" type="text"></td>
</tr>
<tr>
<th>*City:</th>
<td><input name="shipCity" maxlength="40" tabindex="120" value="" title="shipCity" type="text"></td>
</tr>
<tr>
<th></th>
<td>(Military Customers, enter APO/FPO/DPO for city)</td>
</tr>
<input name="shipCountry" value="US" type="hidden">
<tr>
<th>*State:</th>
<td>
<select name="shipState" tabindex="122" title="shipState">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AS">American Samoa</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="AA">Armed Forces Americas</option>
<option value="AE">Armed Forces Europe</option>
<option value="AP">Armed Forces Pacific</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="GU">Guam</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="MP">Northern Mariana Islands</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="PR">Puerto Rico</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="VI">Virgin Islands</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>
</td>
</tr>
<tr>
<th>*Zip Code:</th>
<td><input name="shipZipCode" maxlength="10" tabindex="123" value="" title="shipZipCode" type="text"></td>
</tr>
<tr>
<th>*Day Phone:</th>
<td>
(<input name="shipDayPhonePart1" maxlength="3" tabindex="124" value="" title="shipDayPhonePart1" type="text">)
<input name="shipDayPhonePart2" maxlength="3" tabindex="125" value="" title="shipDayPhonePart2" type="text">
<input name="shipDayPhonePart3" maxlength="4" tabindex="126" value="" title="shipDayPhonePart3" type="text"></td> 
</tr>
<tr>
<th>Night Phone:</th>
<td>
(<input name="shipNightPhonePart1" maxlength="3" tabindex="127" value="" title="shipNightPhonePart1" type="text">)
<input name="shipNightPhonePart2" maxlength="3" tabindex="128" value="" title="shipNightPhonePart2" type="text">
<input name="shipNightPhonePart3" maxlength="4" tabindex="129" value="" title="shipNightPhonePart3" type="text">
</td> 
</tr>
</tbody></table>
</div>
</td>
</tr>
</tbody>
...


American Eagle

Input form markup simplified a bit with scripting/presentational/divitis markup removed, whitespace adjusted for readability:

Step 1: 

...
<div class="accordionStep accordionOpen" id="shippingInfoStep">
<h2 class="stepTitle">Step 1: Shipping Info</h2>
<div class="stepBody">
<form id="checkoutShippingInfoForm" action="https://www.ae.com/web/checkout/checkout.jsp?_DARGS=/web/checkout/checkout.jsp.shippingMethodFid" class="accordionTrigger" method="post">
<input name="_dyncharset" value="UTF-8" type="hidden">
<input name="_dynSessConf" value="xyz" type="hidden">
<input name="countryType" value="usa" disabled="disabled" type="hidden">
<input name="_D:countryType" value=" " type="hidden">
<input name="country" value="US" disabled="disabled" type="hidden">
<input name="_D:country" value=" " type="hidden">
<input name="firstName" value="" disabled="disabled" type="hidden">
<input name="_D:firstName" value=" " type="hidden">
<input name="lastName" value="" disabled="disabled" type="hidden">
<input name="_D:lastName" value=" " type="hidden">
<input name="address1" value="" disabled="disabled" type="hidden">
<input name="_D:address1" value=" " type="hidden">
<input name="address2" value="" disabled="disabled" type="hidden">
<input name="_D:address2" value=" " type="hidden">
<input name="city" value="" disabled="disabled" type="hidden">
<input name="_D:city" value=" " type="hidden">
<input name="state" value="" disabled="disabled" type="hidden">
<input name="_D:state" value=" " type="hidden">
<input name="zip" value="" disabled="disabled" type="hidden">
<input name="_D:zip" value=" " type="hidden">
<input name="existing" value="" disabled="disabled" type="hidden">
<input name="_D:existing" value=" " type="hidden">
<input name="/atg/commerce/order/checkout/ShippingGroupFormHandler.applyShippingGroupsSuccessURL" value="https://www.ae.com/web/checkout/checkout.jsp" type="hidden">
<input name="_D:/atg/commerce/order/checkout/ShippingGroupFormHandler.applyShippingGroupsSuccessURL" value=" " type="hidden">
<input name="/atg/commerce/order/checkout/ShippingGroupFormHandler.applyShippingGroupsErrorURL" value="https://www.ae.com/web/checkout/checkout.jsp" type="hidden">
<input name="_D:/atg/commerce/order/checkout/ShippingGroupFormHandler.applyShippingGroupsErrorURL" value=" " type="hidden">
<input name="ajaxSuccess" value="checkout_htmljax.jsp" type="hidden">
<input name="_D:ajaxSuccess" value=" " type="hidden">
<input name="ajaxError" value="checkout_htmljax.jsp" type="hidden">
<input name="_D:ajaxError" value=" " type="hidden">
<div id="shippingAddressFields">
<div class="checkoutFieldsetHolder" id="countryTypeBoxShipAddField">
<div class="checkoutBlock fieldset_bg">
<h3 class="uppercase">Shipping Country Type
</h3>
<div class="inputLabelHolder">
<label for="countryTypeShipAddField">Country Type
</label>
<input tabindex="0" id="countryTypeShipAddField" class="sel_field pseudoSelect" readonly="readonly" type="text">
<input value="usa" name="countryType" type="hidden">
</div>
</div>
</div>
<div class="checkoutFieldsetHolder in_field_form" id="notCountryTypeBoxShipAddField">
<div class="checkoutBlock fieldset_bg">
<h3 class="infoTitle">Shipping Address
</h3>
<div class="inputLabelHolder fullField">
<label for="countryShipAddField">Country, APO/FPO
</label>
<input tabindex="0" id="countryShipAddField" class="sel_field pseudoSelect" readonly="readonly" type="text">
<input value="US" name="country" type="hidden">
</div>
<div class="inputLabelHolder">
<label for="firstNameShipAddField">First Name
</label>
<input name="firstName" value="" id="firstNameShipAddField" class="in_field nameField" maxlength="12" type="text">
</div>
<div class="inputLabelHolderLast">
<label for="lastNameShipAddField">Last Name
</label>
<input name="lastName" value="" id="lastNameShipAddField" class="in_field nameField" maxlength="15" type="text">
</div>
<div class="inputLabelHolderLast">
<label for="address1ShipAddField">Address
</label>
<input name="address1" value="" id="address1ShipAddField" class="in_field addressField" maxlength="30" type="text">
<input name="address2" value="" id="address2ShipAddField" class="in_field addressField" maxlength="30" type="text">
</div>
<div id="cityStateShipAddFieldHolder">
<div class="inputLabelHolder">
<label class="sm_label" for="cityShipAddField">City
</label>
<input name="city" value="" id="cityShipAddField" class="in_field cityField" maxlength="20" type="text">
</div>
<div class="inputLabelHolder">
<label class="sm_label" for="stateShipAddField">State
</label>
<input tabindex="0" id="stateShipAddField" class="sel_field stateField pseudoSelect" readonly="readonly" type="text">
<input value="" name="state" type="hidden">
</div>
<div class="inputLabelHolderLast">
<label class="sm_label" for="zipShipAddField">Zip
</label>
<input name="zip" value="" id="zipShipAddField" class="in_field zipField" maxlength="9" type="text">
</div>
</div>
</div>
</div>
</div>
<input name="shippingChoice" value="Standard" disabled="disabled" type="hidden">
<input name="_D:shippingChoice" value=" " type="hidden">
<div class="checkoutFieldsetHolder" id="shippingMethodsFields">
<div class="checkoutBlock fieldset_bg">
<h3 class="infoTitle">Shipping Method 
<img class="aeHelpIcon" src="https://www.ae.com/Images/captainCheckout/btns/help_btn.gif" alt="help">
</h3>
<p>Place this order by 1PM EST to get it by the 
<strong>estimated dates
</strong> below:
</p>
<div class="checkoutRadio rad_bttn shipMethodStandard shipMethodRadio rad_bttn_checked">
<div class="hiddenElement">
<input name="shippingChoice" id="standardShip" value="Standard" checked="checked" class="jsRadio" type="radio">
</div>
<label for="standardShip" class="clickMe">
<span class="nameShipMethodStd shipMethodName">Standard
</span>
<span class="daysShipMethod">3 - 7 business days
</span>
<br>
<span class="arrivalShipMethod">date: Jul 31 - Aug 06
</span>
<br>
<span class="costShipMethod">
$7
<br>
</span>
</label>
<span class="checkedRadioMarker">✓
</span>
</div>
<div class="checkoutRadio rad_bttn shipMethodSecondDay shipMethodRadio rad_bttn_hoverable">
<div class="hiddenElement">
<input name="shippingChoice" id="twoDayShip" value="SecondDay" class="jsRadio" type="radio">
</div>
<label for="twoDayShip" class="clickMe" id="chkOutTwoDayShipLabel">
<span class="nameShipMethod2nd shipMethodName">Two Day
</span>
<span class="daysShipMethod">2 business days
</span>
<br>
<span class="arrivalShipMethod">date: Jul 30
</span>
<br>
<span class="costShipMethod">
$15
<br>
</span>
</label>
<span class="checkedRadioMarker">✓
</span>
</div>
<div class="checkoutRadio rad_bttn shipMethodOvernight shipMethodRadio rad_bttn_hoverable">
<div class="hiddenElement">
<input name="shippingChoice" id="overnightShip" value="Overnight" class="jsRadio" type="radio">
</div>
<label for="overnightShip" class="clickMe" id="chkOutOvernightShipLabel">
<span class="nameShipMethodOver shipMethodName">Overnight
</span>
<span class="daysShipMethod">1 business day
</span>
<br>
<span class="arrivalShipMethod">date: Jul 27
</span>
<br>
<span class="costShipMethod">
$20
<br>
</span>
</label>
<span class="checkedRadioMarker">✓
</span>
</div>

<div class="clearer">
</div>
</div>
</div>
<div class="stepSubmitPadding">
<input id="shippingFormSubmit" name="submit" value="▸ Next Step" class="nextStepbtn strong_bttn js_submitForm" type="submit">
<input name="_D:submit" value=" " type="hidden">
</div>
<input name="_DARGS" value="/web/checkout/checkout.jsp.shippingMethodFid" type="hidden">
</form>
</div>
<div class="stepComplete" id="shippingFormComplete">
<div class="checkoutBlock fieldset_bg">
<div id="shippingAddressComplete">
<h3 class="infoTitle">Shipping Address
</h3>
<div class="stepOutputHolder">
<p class="firstLineHeader">
<span id="firstNameShipAddFieldOutput">
</span> 
<span id="lastNameShipAddFieldOutput">
</span>
</p>
<p id="streetOneShipAddFieldOutput">
</p>
<p id="streetTwoShipAddFieldOutput">
</p>
<p>
<span id="cityShipAddFieldOutput">
</span>,

<span id="stateShipAddFieldOutput">
</span>
<span id="zipShipAddFieldOutput">
</span>
</p>
<p id="countryShipAddFieldOutput">
United States

</p>
</div>
</div>
<div id="shippingMethodComplete">
<h3 class="infoTitle">Shipping Method
</h3>
<div class="stepOutputHolder">
<p class="firstLineHeader">
<span id="shippingMethodOutput">Standard 
</span>
<span id="shippingPriceOutput">
FREE

</span>
</p>
<p id="deliveryTimeOutput">3 - 7 Business Days
</p>
<p class="firstLineHeader">Estimated Delivery
</p>
<p id="estDeliveryOutput">Jul 31 - Aug 06
</p>
</div>
</div>
<div id="editStepOne">
<a class="stepEdit sm_bttn" href="checkout.jsp?clearStepOne=true">Edit
</a>
</div>

<div class="clearer">
</div>

</div>
</div>
</div>
...


Step 2: 

...
<h2 class="stepTitle">Step 2: Payment Info</h2>
<div class="stepBody">
<div id="billingGiftCards">
<div class="checkoutFieldsetHolder">
<div class="checkoutBlock fieldset_bg">
<h3 class="infoTitle">Payment Methods</h3>
<p>Please select how you would like to pay for this order.</p>
<div id="giftCardHolder">
<a href="#" id="giftCardBtn" class="giftCardOff">
<span>Gift Card</span>
</a>
<div id="giftCardWrapper" style="display: none;" class="paymentTabBodyWrapper">
<div class="paymentTabTop">
</div>
<div class="paymentTabInnerBody">
<div id="gcPaymentTabBody" class="paymentTabBody">
<p>You can apply up to 3 gift cards.</p>
<form id="applyGiftCard" name="applyGiftCard" action="/web/checkout/checkout.jsp">
<input name="_dyncharset" value="UTF-8" type="hidden">
<input name="_dynSessConf" value="xyz" type="hidden">
<input name="/aeo/commerce/order/checkout/AeoGiftCardPaymentHandler.successURL" value="/web/checkout/checkout.jsp" type="hidden">
<input name="_D:/aeo/commerce/order/checkout/AeoGiftCardPaymentHandler.successURL" value=" " type="hidden">
<input name="/aeo/commerce/order/checkout/AeoGiftCardPaymentHandler.errorURL" value="/web/checkout/checkout.jsp" type="hidden">
<input name="_D:/aeo/commerce/order/checkout/AeoGiftCardPaymentHandler.errorURL" value=" " type="hidden">
<input name="ajaxSuccess" value="checkout_htmljax.jsp" type="hidden">
<input name="_D:ajaxSuccess" value=" " type="hidden">
<input name="ajaxError" value="checkout_htmljax.jsp" type="hidden">
<input name="_D:ajaxError" value=" " type="hidden">
<input name="giftNumEntry" value="" disabled="disabled" type="hidden">
<input name="_D:giftNumEntry" value=" " type="hidden">
<input name="pinNumEntry" value="" disabled="disabled" type="hidden">
<input name="_D:pinNumEntry" value=" " type="hidden">
<div class="inputLabelHolder">
<label for="giftNumEntry">Gift Card Number: <img style="" class="aeHelpIcon" src="https://www.ae.com/Images/captainCheckout/btns/help_btn.gif" alt="help">
</label>
<input name="giftNumEntry" id="giftNumEntry" class="in_field giftNumEntryField" value="" maxlength="19" autocomplete="off" type="text">
</div>
<div class="inputLabelHolder">
<label for="pinNumEntry">PIN:</label>
<input autocomplete="off" name="pinNumEntry" id="pinNumEntry" class="in_field pinNumEntryField" value="" maxlength="4" type="text">
</div>
<input id="applyGiftCardBtn" name="/aeo/commerce/order/checkout/AeoGiftCardPaymentHandler.applyGiftCard" value="Apply Card" class="strong_bttn" type="submit">
<input name="_D:/aeo/commerce/order/checkout/AeoGiftCardPaymentHandler.applyGiftCard" value=" " type="hidden">
<input name="_DARGS" value="/web/checkout/billing/giftCard.jsp.applyGiftCardFid" type="hidden">
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<form id="checkoutBillingInfoForm" action="https://www.ae.com/web/checkout/checkout.jsp?_DARGS=/web/checkout/checkout.jsp.billingMethodFid" class="accordionTrigger" method="post">
<input name="_dyncharset" value="UTF-8" type="hidden">
<input name="_dynSessConf" value="xyz" type="hidden">
<input name="ccType" value="" disabled="disabled" type="hidden">
<input name="_D:ccType" value=" " type="hidden">
<input name="ccNumber" value="" disabled="disabled" type="hidden">
<input name="_D:ccNumber" value=" " type="hidden">
<input name="ccSecCode" value="" disabled="disabled" type="hidden">
<input name="_D:ccSecCode" value=" " type="hidden">
<input name="expMonth" value="" disabled="disabled" type="hidden">
<input name="_D:expMonth" value=" " type="hidden">
<input name="expYear" value="" disabled="disabled" type="hidden">
<input name="_D:expYear" value=" " type="hidden">
<input name="birthDayBMLField" value="" disabled="disabled" type="hidden">
<input name="_D:birthDayBMLField" value=" " type="hidden">
<input name="birthMonthBMLField" value="" disabled="disabled" type="hidden">
<input name="_D:birthMonthBMLField" value=" " type="hidden">
<input name="birthYearBMLField" value="" disabled="disabled" type="hidden">
<input name="_D:birthYearBMLField" value=" " type="hidden">
<input name="SSN" value="" disabled="disabled" type="hidden">
<input name="_D:SSN" value=" " type="hidden">
<input name="agree" value="" disabled="disabled" type="hidden">
<input name="_D:agree" value=" " type="hidden">
<input name="agreeTs" value="" disabled="disabled" type="hidden">
<input name="_D:agreeTs" value=" " type="hidden">
<input name="checkoutPaymentType" value="" disabled="disabled" type="hidden">
<input name="_D:checkoutPaymentType" value=" " type="hidden">
<div id="paymentInfoBlock">
<div class="checkoutFieldsetHolder in_field_form">
<div class="checkoutBlock fieldset_bg">
<div id="paymentTabs">
<input id="checkoutPaymentType" name="checkoutPaymentType" value="creditCardPayment" type="hidden">
<ul id="paymentTabLinks">
<li id="ccPaymentTabLink" class="tabOn">
<a>Credit Card</a>
</li>
<li id="ppPaymentTabLink">
<a>Paypal</a>
</li>
<li id="bmlPaymentTabLink">
<a>BillMeLater<sup>®</sup>
</a>
</li>
</ul>
<div class="paymentTabBodyWrapper">
<div class="paymentTabTop">
</div>
<div class="paymentTabInnerBody">
<div id="ccPaymentTabBody" class="paymentTabBody tabBodyOn">
<div class="inputLabelHolder">
<label for="ccTypeCCField">Card Type:</label>
<input tabindex="0" id="ccTypeCCField" class="sel_field ccTypeField pseudoSelect" readonly="readonly" type="text">
<input value="" name="ccType" type="hidden">
</div>
<div id="ccNumberHolderCCField" class="inputLabelHolder">
<label for="ccNumberCCField">Card Number:</label>
<input name="ccNumber" id="ccNumberCCField" size="30" maxlength="16" value="" class="in_field ccNumberField" autocomplete="off" type="text">
</div>
<div id="expDateCCField" class="inputLabelHolder">
<label for="expMonthCCField">Expiration <span>(Month / Year)</span>:</label>
<input tabindex="0" id="expMonthCCField" class="sel_field expMonthField pseudoSelect" readonly="readonly" type="text">
<input value="1" name="expMonth" type="hidden">
<input tabindex="0" id="expYearCCField" class="sel_field expYearField pseudoSelect" readonly="readonly" type="text">
<input value="2012" name="expYear" type="hidden">
</div>
<div id="ccSecCodeHolderCCField" class="inputLabelHolder">
<label for="ccSecCodeCCField">Security Code: <img style="" class="aeHelpIcon" src="https://www.ae.com/Images/captainCheckout/btns/help_btn.gif" alt="help">
</label>
<input name="ccSecCode" id="ccSecCodeCCField" size="4" maxlength="4" value="" class="in_field ccSecCodeField" autocomplete="off" type="text">
</div>
</div>
<div style="display: none;" id="ppPaymentTabBody" class="paymentTabBody tabBodyDisabled">
<h3>You have chosen PayPal as your payment method.</h3>
<p>Continue to Step 3 where you will be able to Login to PayPal and complete your order.</p>
</div>
<div style="display: none;" id="bmlPaymentTabBody" class="paymentTabBody tabBodyDisabled">
<p class="noticeField">
<span class="noticeShout">!</span>Bill Me Later<sup>®</sup> is only available to US residents. <a href="https://www.securecheckout.billmelater.com/paycapture-content/fetch?hash=BPU23UPB&amp;content=/bmlweb/coreiw.html" id="bmlLearnMore" title="Learn more." target="_blank">Learn more</a>.</p>
<h3 class="infoTitle">Data Verification</h3>
<p>For verification purposes, please provide the following information. Bill Me Later<sup>®</sup> is subject to credit approval.</p>
<div id="birthdateInfoBMLField" class="birthdayField">
<div class="inputLabelHolder">
<label for="birthMonthBMLField">Birthday: <img style="" class="aeHelpIcon" src="https://www.ae.com/Images/captainCheckout/btns/help_btn.gif" alt="help">
</label>
<input tabindex="0" id="birthMonthBMLField" class="sel_field birthMonthField pseudoSelect" readonly="readonly" type="text">
<input value="" name="birthMonthBMLField" type="hidden">
<input tabindex="0" id="birthDayBMLField" class="sel_field birthDayField pseudoSelect" readonly="readonly" type="text">
<input value="" name="birthDayBMLField" type="hidden">
<input tabindex="0" id="birthYearBMLField" class="sel_field birthYearField pseudoSelect" readonly="readonly" type="text">
<input value="" name="birthYearBMLField" type="hidden">
</div>
</div>
<div class="inputLabelHolder bmlSSN">
<label for="SSNBMLField">Last 4 digits of your social security #: <img style="" class="aeHelpIcon" src="https://www.ae.com/Images/captainCheckout/btns/help_btn.gif" alt="help">
</label>
<input name="SSN" size="4" maxlength="4" value="" id="SSNBMLField" class="in_field" autocomplete="off" type="text">
</div>
<h3 class="infoTitle">E-Sign Consent and Terms and Conditions</h3>
<a href="https://www.securecheckout.billmelater.com/paycapture-content/fetch?hash=BPU23UPB&amp;content=/bmlweb/bmlwebtnc.pdf" id="printBMLField" title="Print BML" target="_blank">(Print)</a>
<p id="termsBML">
<a href="https://www.securecheckout.billmelater.com/paycapture-content/fetch?hash=BPU23UPB&amp;content=/bmlweb/bmlwebtnc.html" title="See terms" target="_blank">See terms</a> of the Bill Me Later<sup>®</sup> payment system.</p>
<p id="consentBMLField">You must read and scroll to the bottom of the E-sign consent section of the Terms and Conditions prior to checking the box below.</p>
<div id="agreeHolderBMLField" class="inputLabelHolder">
<p class="checkField">
<input id="agreeBMLField" name="agree" value="yes" type="checkbox">
<label style="" id="agreeBMLFieldLabel" for="agreeBMLField">I agree to have the <a href="https://www.securecheckout.billmelater.com/paycapture-content/fetch?hash=BPU23UPB&amp;content=/bmlweb/bmlwebtnc.html" title="Terms and Conditions" target="_blank">Terms and Conditions</a> presented electronically.</label>
</p>
<input id="scrollCheck" name="scrollCheck" value="false" type="hidden">
<p class="checkField">
<input id="agreeTsBMLField" name="agreeTs" value="yes" type="checkbox">
<label id="agreeTsBMLFieldLabel" for="agreeTsBMLField">I agree to the Bill Me Later<sup>®</sup> <a href="https://www.securecheckout.billmelater.com/paycapture-content/fetch?hash=BPU23UPB&amp;content=/bmlweb/bmlwebtnc.html" title="Terms and Conditions" target="_blank">Terms and Conditions</a>.</label>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="marketing_callout">
<span>Credit Cards</span>
<p class="marketing_head_liner">Don't forget to use your AE, aerie, or 77kids credit card</p>
<p>Get <em>Extra Savings</em> and special offers.</p>
<div class="clearer">
</div>
</div>
</div>
</div>
</div>
<input name="countryType" value="" disabled="disabled" type="hidden">
<input name="_D:countryType" value=" " type="hidden">
<input name="country" value="" disabled="disabled" type="hidden">
<input name="_D:country" value=" " type="hidden">
<input name="firstName" value="" disabled="disabled" type="hidden">
<input name="_D:firstName" value=" " type="hidden">
<input name="lastName" value="" disabled="disabled" type="hidden">
<input name="_D:lastName" value=" " type="hidden">
<input name="address1" value="" disabled="disabled" type="hidden">
<input name="_D:address1" value=" " type="hidden">
<input name="address2" value="" disabled="disabled" type="hidden">
<input name="_D:address2" value=" " type="hidden">
<input name="city" value="" disabled="disabled" type="hidden">
<input name="_D:city" value=" " type="hidden">
<input name="state" value="" disabled="disabled" type="hidden">
<input name="_D:state" value=" " type="hidden">
<input name="zip" value="" disabled="disabled" type="hidden">
<input name="_D:zip" value=" " type="hidden">
<input name="email" value="" disabled="disabled" type="hidden">
<input name="_D:email" value=" " type="hidden">
<input name="confirmEmail" value="" disabled="disabled" type="hidden">
<input name="_D:confirmEmail" value=" " type="hidden">
<input name="billingPhone" value="" disabled="disabled" type="hidden">
<input name="_D:billingPhone" value=" " type="hidden">
<input name="existingCC" value="" disabled="disabled" type="hidden">
<input name="_D:existingCC" value=" " type="hidden">
<input name="birthDayBillAddField" value="" disabled="disabled" type="hidden">
<input name="_D:birthDayBillAddField" value=" " type="hidden">
<input name="birthMonthBillAddField" value="" disabled="disabled" type="hidden">
<input name="_D:birthMonthBillAddField" value=" " type="hidden">
<input name="birthYearBillAddField" value="" disabled="disabled" type="hidden">
<input name="_D:birthYearBillAddField" value=" " type="hidden">
<input name="createLoyaltyAccount" value="false" disabled="disabled" type="hidden">
<input name="_D:createLoyaltyAccount" value=" " type="hidden">
<input name="mobileNumber" value="" disabled="disabled" type="hidden">
<input name="_D:mobileNumber" value=" " type="hidden">
<input name="baseBrand" value="" disabled="disabled" type="hidden">
<input name="_D:baseBrand" value=" " type="hidden">
<input name="loyaltyTerms" value="" disabled="disabled" type="hidden">
<input name="_D:loyaltyTerms" value=" " type="hidden">
<input name="aeAccount" value="false" disabled="disabled" type="hidden">
<input name="_D:aeAccount" value=" " type="hidden">
<input name="aeAccountPass" value="" disabled="disabled" type="hidden">
<input name="_D:aeAccountPass" value=" " type="hidden">
<input name="aeAccountPassConfirm" value="" disabled="disabled" type="hidden">
<input name="_D:aeAccountPassConfirm" value=" " type="hidden">
<input name="aeEmail" value="false" disabled="disabled" type="hidden">
<input name="_D:aeEmail" value=" " type="hidden">
<input name="aerieEmail" value="false" disabled="disabled" type="hidden">
<input name="_D:aerieEmail" value=" " type="hidden">
<input name="kidsEmail" value="false" disabled="disabled" type="hidden">
<input name="_D:kidsEmail" value=" " type="hidden">
<input name="mandoEmail" value="false" disabled="disabled" type="hidden">
<input name="_D:mandoEmail" value=" " type="hidden">
<input name="/atg/commerce/order/checkout/AeoCreatePaymentGroupFormHandler.applyPaymentGroupsSuccessURL" value="https://www.ae.com/web/checkout/checkout.jsp" type="hidden">
<input name="_D:/atg/commerce/order/checkout/AeoCreatePaymentGroupFormHandler.applyPaymentGroupsSuccessURL" value=" " type="hidden">
<input name="/atg/commerce/order/checkout/AeoCreatePaymentGroupFormHandler.applyPaymentGroupsErrorURL" value="https://www.ae.com/web/checkout/checkout.jsp" type="hidden">
<input name="_D:/atg/commerce/order/checkout/AeoCreatePaymentGroupFormHandler.applyPaymentGroupsErrorURL" value=" " type="hidden">
<input name="ajaxSuccess" value="/checkout/checkout_htmljax.jsp" type="hidden">
<input name="_D:ajaxSuccess" value=" " type="hidden">
<input name="ajaxError" value="/checkout/checkout_htmljax.jsp" type="hidden">
<input name="_D:ajaxError" value=" " type="hidden">
<input name="accessPassNumber" value="" disabled="disabled" type="hidden">
<input name="_D:accessPassNumber" value=" " type="hidden">
<div id="billingAddressFields">
<div class="checkoutFieldsetHolder">
<div class="checkoutBlock fieldset_bg" id="countryTypeBoxBillAddField" style="display: none;">
<h3 class="uppercase">Billing Country Type</h3>
<div class="inputLabelHolder fullField">
<label for="countryTypeBillAddField">Country Type</label>
<input tabindex="0" id="countryTypeBillAddField" class="sel_field pseudoSelect" readonly="readonly" type="text">
<input value="usa" name="countryType" type="hidden">
</div>
</div>
</div>
<div class="checkoutFieldsetHolder">
<div class="checkoutBlock fieldset_bg" id="notCountryTypeBoxBillAddField">
<h3 class="infoTitle">Billing Address</h3>
<div id="billingSameAsShip">
<div id="billingSameAsShipComplete">
<div class="stepOutputHolder">
<p class="largeBold">
<span id="firstNameBillAddFieldOutput">
</span> <span id="lastNameBillAddFieldOutput">
</span>
</p>
<p id="streetOneBillAddFieldOutput">
</p>
<p id="streetTwoBillAddFieldOutput">
</p>
<p>
<span id="cityBillAddFieldOutput">
</span>,
<span id="stateBillAddFieldOutput">
</span>
<span id="zipBillAddFieldOutput">
</span>
</p>
<p id="countryOutput">
United States
</p>
</div>
</div>
<div id="editBillSameAsShip">
<div class="stepOutputHolder">
<a class="sm_bttn">Edit</a>
</div>
</div>
</div>
<div id="standardBillingForm">
<p>For your protection, this information must match the information that appears on your credit card or bank statement.</p>
<div class="inputLabelHolder checkField fullField">
<input name="billSameAsShip" id="billSameAsShipBillAddField" value="yes" class="" type="checkbox">
<label for="billSameAsShipBillAddField" class="uppercase underline">My Billing &amp; Shipping addresses are the same</label>
</div>
<div class="inputLabelHolder fullField">
<label for="countryBillAddField">Country, APO/FPO</label>
<input tabindex="0" id="countryBillAddField" class="sel_field pseudoSelect" readonly="readonly" type="text">
<input value="US" name="country" type="hidden">
</div>
<div class="inputLabelHolder">
<label for="firstNameBillAddField">First Name</label>
<input name="firstName" value="" id="firstNameBillAddField" class="in_field nameField" maxlength="12" type="text">
</div>
<div class="inputLabelHolderLast">
<label for="lastNameBillAddField">Last Name</label>
<input name="lastName" value="" id="lastNameBillAddField" class="in_field nameField" maxlength="15" type="text">
</div>
<div class="inputLabelHolderLast">
<label for="address1BillAddField">Address</label>
<input name="address1" value="" id="address1BillAddField" class="in_field addressField" maxlength="30" type="text">
<input name="address2" value="" id="address2BillAddField" class="in_field addressField" maxlength="30" type="text">
</div>
<div id="cityStateBillAddFieldHolder">
<div class="inputLabelHolder">
<label for="cityBillAddField">City</label>
<input name="city" value="" id="cityBillAddField" class="in_field cityField" maxlength="20" type="text">
</div>
<div class="inputLabelHolder">
<label for="stateBillAddField">State</label>
<input tabindex="0" id="stateBillAddField" class="sel_field stateField pseudoSelect" readonly="readonly" type="text">
<input value="" name="state" type="hidden">
</div>
<div class="inputLabelHolderLast">
<label for="zipBillAddField">Zip</label>
<input name="zip" value="" id="zipBillAddField" class="in_field zipField" maxlength="9" type="text">
</div>
</div>
</div>
</div>
</div>
</div>
<div id="contactInfoFields">
<div class="checkoutFieldsetHolder ">
<div class="checkoutBlock fieldset_bg">
<h3 class="infoTitle">Contact Info</h3>
<div class="compareCheckHolder">
<div class="inputLabelHolder">
<label for="email">Email <img style="" class="aeHelpIcon" src="https://www.ae.com/Images/captainCheckout/btns/help_btn.gif" alt="help">
</label>
<input name="email" value="" id="emailBillAddField" class="in_field emailField" type="email">
</div>
<div class="inputLabelHolderLast">
<label for="emailConfirm">Re-Type Email</label>
<input name="confirmEmail" value="" id="confirmEmailBillAddField" class="in_field emailField" type="email">
</div>
<span id="emailCompareCheck" class="compareCheck">✓</span>
</div>
<div class="inputLabelHolder">
<label for="billingPhone">Billing Phone Number <img style="" class="aeHelpIcon" src="https://www.ae.com/Images/captainCheckout/btns/help_btn.gif" alt="help">
</label>
<input name="billingPhone" value="" id="billingPhoneBillAddField" class="in_field phoneField" maxlength="17" type="text">
</div>
</div>
</div>
</div>
<div id="aerewardProgram" class="checkoutFieldsetHolder">
<div class="checkoutBlock fieldset_bg">
<h3 class="infoTitle">Get AEREWARD$ for your purchase <span class="optional">(optional)</span>
</h3>
<div class="inputLabelHolder">
<label for="accessPassNumber">My AEREWARD$ # <img class="aeHelpIcon" src="https://www.ae.com/Images/captainCheckout/btns/help_btn.gif" alt="help">
</label>
<input name="accessPassNumber" value="" id="accessPassNumber" class="in_field" type="text">
</div>
<div class="inputLabelHolder inputCreateAcct">
<input name="aeRewardsSignUp" id="aeRewardsSignUp" class="checkoutCheckbox" maxlength="19" value="true" type="checkbox">
<div class="checkboxLabelField">
<label for="aeRewardsSignUp">Sign up now and receive 25 points just for signing up!</label>
<br>
<a class="jsAerewardsLink checkout_link" href="/web/modals/etcetera.jsp?name=aerewards">Learn More</a>
</div>
</div>
<div class="inputLabelHolderLast mobilInfo">
<label class="sm_label" for="mobileNumber">Mobile Phone Number *</label>
<input name="mobileNumber" value="" id="mobileNumRewardsUnlinked" class="in_field mobileNumField" maxlength="10" type="tel">
<p>* By entering your mobile number you are subscribing to receive AE text message promotions and alerts from short code 32453. Four (4) messages/month. Message and data rates may apply. <strong>Reply "HELP" for help or "STOP" to cancel to 32453.</strong> <a href="http://www.ae.com/web/help/privacy_policy.jsp?topic=1" class="checkout_link" target="_blank" title="Privacy Policy">Privacy Policy</a> | <a href="http://www.m3mobile.com/aeo/tc.htm" class="checkout_link checkout_mlink" target="_blank" title="Terms and Conditions">Terms &amp; Conditions</a> | <a href="http://www.m3mobile.com/aeo/faq.htm" class="checkout_link checkout_mlink" title="FAQ" target="_blank">FAQ</a>
</p>
</div>
<div class="clearer">
</div>
</div>
</div>
<div id="createAccountHolder" class="checkoutFieldsetHolder">
<div class="checkoutBlock fieldset_bg">
<div id="createNewAccountHeader">
<h3 class="infoTitle" id="acctTitle">Create an AE account for a faster checkout <span class="optional">(optional)</span>
</h3>
<h3 class="infoTitle" id="acctRewardTitle">Get AEREWARD$ for your purchase <span class="optional">(optional)</span>
</h3>
<div id="createAccountField" class="inputLabelHolder checkField">
<input name="aeAccount" id="aeAccount" maxlength="19" value="true" type="checkbox">
<label for="aeAccount" class="plain" id="accountLabel">Create my AE Account.
<img class="aeHelpIcon" src="https://www.ae.com/Images/captainCheckout/btns/help_btn.gif" alt="help">
</label>
<label for="aeAccount" class="plain" id="accountRewardLabel">Sign up now and receive 25 points just for signing up! <a class="jsAerewardsLink checkout_link" href="/web/modals/etcetera.jsp?name=aerewards">Learn More</a>
</label>
</div>
</div>
<input value="false" name="createLoyaltyAccount" id="createLoyaltyAccount" type="hidden">
<div id="aeAccountFields">
<div class="aeRewardsFields">
<img src="/Images/global/myaccount/aerewards/create_account_card.png" alt="AEREWARD$ One card. Two Brands. Endless Rewards." height="71" width="285">
<input id="aeoBrandCard" name="baseBrand" value="00" type="hidden">
<br>
<p class="clearer">To sign up, please create an AE account.</p>
</div>
<div class="compareCheckHolder">
<div class="inputLabelHolder">
<label for="aeAccountPass">Password (6-15 Letters &amp; Numbers)</label>
<input name="aeAccountPass" id="aeAccountPass" class="in_field passwordField" maxlength="15" type="password">
</div>
<div class="inputLabelHolder">
<label for="aeAccountPassConfirm">Confirm Password</label>
<input name="aeAccountPassConfirm" id="aeAccountPassConfirm" class="in_field passwordField" maxlength="15" type="password">
</div>
<span id="passwordCompareCheck" class="compareCheck">✓</span>
</div>
<div id="birthdateInfoBillAddField" class="birthdayField">
<div class="inputLabelHolder">
<label for="birthMonthBillAddField">Birthday: <img style="" class="aeHelpIcon" src="https://www.ae.com/Images/captainCheckout/btns/help_btn.gif" alt="help">
</label>
<input tabindex="0" id="birthMonthBillAddField" class="sel_field birthMonthField pseudoSelect" readonly="readonly" type="text">
<input value="" name="birthMonthBillAddField" type="hidden">
<input tabindex="0" id="birthDayBillAddField" class="sel_field birthDayField pseudoSelect" readonly="readonly" type="text">
<input value="" name="birthDayBillAddField" type="hidden">
<input tabindex="0" id="birthYearBillAddField" class="sel_field birthYearField pseudoSelect" readonly="readonly" type="text">
<input value="" name="birthYearBillAddField" type="hidden">
</div>
</div>
<div id="rewardsMobile" class="inputLabelHolderLast mobilInfo">
<label class="sm_label" for="mobileNumber">Mobile Phone Number *</label>
<input name="mobileNumber" value="" id="mobileNumRewardsLinked" class="in_field mobileNumField" maxlength="10" type="tel">
<p>* By entering your mobile number you are subscribing to receive AE text message promotions and alerts from short code 32453. Four (4) messages/month. Message and data rates may apply. <strong>Reply "HELP" for help or "STOP" to cancel to 32453.</strong> <a href="http://www.ae.com/web/help/privacy_policy.jsp?topic=1" class="checkout_link" target="_blank" title="Privacy Policy">Privacy Policy</a> | <a href="http://www.m3mobile.com/aeo/tc.htm" class="checkout_link checkout_mlink" target="_blank" title="Terms and Conditions">Terms &amp; Conditions</a> | <a href="http://www.m3mobile.com/aeo/faq.htm" class="checkout_link checkout_mlink" title="FAQ" target="_blank">FAQ</a>
</p>
</div>
<div id="mailingSignup">
<p class="emailAcctText">I would like to receive emails and special offers from the following brands of American Eagle Outfitters, Inc. <a href="/web/help/privacy_policy.jsp?topic=1" class="checkout_link" target="_blank">Privacy Policy</a>
</p>
<div class="inputLabelHolder checkField">
<input name="aeEmail" id="aeEmail" checked="checked" type="checkbox">
<label for="aeEmail" class="plain">AE</label>
</div>
<div class="inputLabelHolder checkField">
<input name="aerieEmail" id="aerieEmail" checked="checked" type="checkbox">
<label for="aerieEmail" class="plain">aerie</label>
</div>
</div>
<div class="clearer">
</div>
<div class="inputLabelHolder aeRewardsFields checkField">
<input name="loyaltyTerms" id="loyaltyTerms" value="" type="checkbox">
<label for="loyaltyTerms" class="plain">I accept the <a href="/web/help/aerewards.jsp?topic=4" class="checkout_link" target="_blank">Terms &amp; Conditions</a>
</label>
</div>
</div>
</div>
</div>
<div class="stepSubmitPadding">
<input id="billingFormSubmit" name="submit" value="▸ Next Step" class="nextStepbtn strong_bttn js_submitForm" type="submit">
<input name="_D:submit" value=" " type="hidden">
</div>

...

organization info input

foursquare

Input form markup simplified a bit with presentational markup removed, whitespace added for readability: 

<form action="/add_venue" method="POST">
  <table cellpadding="3" cellspacing="0" border="0" class="text">
    <tr><td>Name: </td>
        <td><input type="text" name="venuename" value=""></td>
    </tr>
    <tr><td>Address: </td>
        <td><input type="text" name="address" value=""></td>
    </tr>
    <tr><td>Cross Street: </td>
        <td><input type="text" name="crossstreet" value="">
        <span class="text_mini">
          (Not sure, check 
          <a target="_new" href="http://maps.google.com">
            Google Maps</a>. Then add like this: "at 5th Ave", "btw Essex &amp; Rivington", "btw 3rd and 4th") 
      </td>
    </tr>
    <tr><td>City, State, Zip: </td>
        <td><input type="text" name="city" value="San Francisco">
            <input type="text" name="state" value="CA">, 
            <input type="text" name="zip" value=""></td>
    </tr>
    <tr><td>Phone: </td>
        <td><input type="text" name="phone" value=""></td>
    </tr>
    <tr><td>In...  </td>
        <td><select name="cityid">
            <option value="56">Amsterdam 
            <option value="46">Atlanta 
            <option value="42">Austin 
            <option value="24">Boston 
            <option value="32">Chicago 
            <option value="43">Dallas / Fort Worth 
            <option value="25">Denver 
            <option value="47">Detroit 
            <option value="48">Houston 
            <option value="49">Las Vegas 
            <option value="34">Los Angeles 
            <option value="39">Miami 
            <option value="51">Minneapolis / St. Paul 
            <option value="22">New York City 
            <option value="33">Philadelphia 
            <option value="53">Phoenix 
            <option value="37">Portland 
            <option value="38">San Diego 
            <option value="23" selected>San Francisco 
            <option value="41">Seattle 
            <option value="31">Washington, DC
            </select>
         </td>
    </tr>
    <tr><td>&nbsp; </td>
        <td><input type="hidden" name="task" value="add"><br>
            <input type="submit" name="submit" value="Add venue" class="input_button">
        </td>
    </tr>
  </table>
</form>

Upcoming

Input form markup simplified a bit with much presentational markup removed, whitespace added for readability: 

<form id="venueForm">
  <input type="hidden" name="mode" value="add" />
  <table>
    <tr><td class="fieldName required">Venue name</td>
        <td><input id="venueForm.name" class="longwidth" type="text" name="name" value=""/></td>
    </tr>
    <tr><td class="fieldName required">Address</td>
        <td><input id="venueForm.address" class="longwidth" type="text" name="address" value=""/></td>
    </tr>
    <tr><td class="fieldName required">City</td>
        <td><input id="venueForm.city" type="text" class="shortwidth" name="city" value="San Francisco"/>
        <span id="city_locality"></span>
      </td>
    </tr>
    <tr id="venueForm.stateControl">
      <td class="fieldName required" id="venueForm.stateFieldName">State</td>
      <td id="venueForm.stateFieldSelect">
        <select id="venueForm.state_id" name="state_id" class="shortwidth">
        <option value="">Select one:</option>
        <option value="VrrjuESbApjeFS4.">Alabama</option>
        <option value="EGmcViGbApjaOAIx">Alaska</option>
        <option value="aMpCyxWbApibkpqW">Arizona</option>
        <option value="7xRVzoqbApiHDeUo">Arkansas</option>
        <option value="SVrAMtCbAphCLAtP" selected="selected">California</option>
        <option value="MKJHB.WbApho1rUk">Colorado</option>
        <option value="FkxA9BebApjYEct2">Connecticut</option>
        <option value="9lnLQaubAph4CBFY">Delaware</option>
        <option value="hEO_NTibApj.GarA">District of Columbia</option>
        <option value="X2rdBEmbAphlKYoq">Florida</option>
        <option value="SfUOhpybApgiOUqd">Georgia</option>
        <option value="hJJxLmabApiLFHxu">Hawaii</option>
        <option value="VjF8qh6bApgg1NEP">Idaho</option>
        <option value="ep0T8vebApgnVGQJ">Illinois</option>
        <option value="6ZUu6dSbAphlUwuQ">Indiana</option>
        <option value="z0YqJVWbApjKiSnP">Iowa</option>
        <option value="oWJeqYybApiY0W5o">Kansas</option>
        <option value="iK5lPHCbApgEgL2g">Kentucky</option>
        <option value="VJHA.cubApgwcs4j">Louisiana</option>
        <option value="ixFYT4KbApjgio6l">Maine</option>
        <option value=".lxt4uObApj2NsBW">Maryland</option>
        <option value="hTJZWCCbApjOtQtE">Massachusetts</option>
        <option value="IS02152bAphBVbXh">Michigan</option>
        <option value="4p3FSLibApjuko1f">Minnesota</option>
        <option value="lo49c0qbApjMM6Zl">Mississippi</option>
        <option value="0y2li7qbApg.ucH1">Missouri</option>
        <option value="PUAsXQubApif9uxp">Montana</option>
        <option value="TWcSbO2bApixYeYW">Nebraska</option>
        <option value="kB09AqebApi0LC1C">Nevada</option>
        <option value="ccBppK2bAphDyDdD">New Hampshire</option>
        <option value="4siKkMybApicLFcV">New Jersey</option>
        <option value="nVGNdS6bApiTnTVD">New Mexico</option>
        <option value="R63H06ibApjqiWyL">New York</option>
        <option value="ouArr2CbAphmLPif">North Carolina</option>
        <option value="mRIcwCybApgZ9OLE">North Dakota</option>
        <option value="LtkqzVqbApjAbJxv">Ohio</option>
        <option value="L9NuIHqbApg9_5WE">Oklahoma</option>
        <option value="4vvLDQabApjbhCKB">Oregon</option>
        <option value="A_iJ8aibApiqrHrE">Pennsylvania</option>
        <option value="r_aB4QObApiRFE0s">Rhode Island</option>
        <option value="WNAy5LmbApgBn3np">South Carolina</option>
        <option value="KtbP0w.bAph.qbDW">South Dakota</option>
        <option value="QZ9P1cibApj2OGLJ">Tennessee</option>
        <option value="b1Yi6qubApjz6jWW">Texas</option>
        <option value="dRP0NVGbApgp2ig.">Utah</option>
        <option value="oMgj1Q.bAphUWSGp">Vermont</option>
        <option value="22b1cJWbApjzghQy">Virginia</option>
        <option value="8LwX6FSbApgD.7YC">Washington</option>
        <option value="HrjecOWbApilONRg">West Virginia</option>
        <option value="olxEVY.bApgALAoK">Wisconsin</option>
        <option value="GKBBst6bApgMUjLT">Wyoming</option>
        </select>
      </td>
    </tr>
    <tr><td class="fieldName optional">Postal/ZIP code</td>
        <td><input id="venueForm.zip" type="text" name="zip" value="" maxlength="20" /></td>
    </tr>
    <tr><td class="fieldName required">Location</td>
        <td>
        <select id="venueForm.country_id" name="country_id" class="shortwidth">  
        <option value="">Select a location:</option>
        <option value="99j0L66bApj3ieAJnA--">  </option>
        <option value="mk7pmhqbApgNkF9cxQ--">Afghanistan</option>
        <option value="93On3wqYA5nlcPOg_g--">Aland Islands</option>
        <option value="5vfTLnubApiLBhNR.w--">Albania</option>
        <option value="ORyW1j2bApgE.0qQ1w--">Algeria</option>
        <option value="Zs9tDlybApiQpHY_Dw--">Andorra</option>
        <option value="0_VzNnObApiBuCV4.Q--">Angola</option>
        <option value="air5DJGbApiDaxRFqw--">Anguilla</option>
        <option value="1ANQpIebCZ5PZzsFvw--">Antarctica</option>
        <option value="RBw1Mu2bAphpl9xRRw--">Antigua &amp; Barbuda</option>
        <option value="6W4_JdubAphR0wHLfQ--">Argentina</option>
        <option value="02C6Lc.bAphot7JqUg--">Armenia</option>
        <option value="h03BNNubApigEfCGrA--">Aruba</option>
        <option value="om3Zr2abAphqrm3jdA--">Australia</option>
        <option value="0rwtp2CbApivsyK_vg--">Austria</option>
        <option value="C.FaCZabAphsmzy5ZQ--">Azerbaijan</option>
        <option value="XM2m9IubApjhngMjTw--">Bahamas</option>
        <option value="JdXAX2KbApjExcA27Q--">Bahrain</option>
        <option value="bs.gdkibAphIoXLofA--">Bangladesh</option>
        <option value="n7rOIBSbApiRLRkm.A--">Barbados</option>
        <option value="ZSq41q.bApiEwz0LAg--">Belarus</option>
        <option value="V5Bv0yebAph.v7zRHQ--">Belgium</option>
        <option value="5wFG4vSbApgmrg8KSQ--">Belize</option>
        <option value="xbugkTabApgvllxe2g--">Benin</option>
        <option value="F6imz.KbApj2gKYUog--">Bermuda</option>
        <option value="OMJtMoObApiRaiy.ng--">Bhutan</option>
        <option value="W9p9WrubApgW2PD9CA--">Bolivia</option>
        <option value="H_Q_X6ObApjiAEsAng--">Bosnia and Herzegovina</option>
        <option value="F4AhWUybAphJFMk0Ug--">Botswana</option>
        <option value="STgdNFebCZ4MxImwuw--">Bouvet Island</option>
        <option value="upv8IF2bAphU2TQWUg--">Brazil</option>
        <option value="hwmWntebApg7frl_pg--">British Indian Ocean Territory</option>
        <option value="PvjeYGybApjIyoaWrQ--">Brunei</option>
        <option value="J8M70dGbApgS6xLIFw--">Bulgaria</option>
        <option value="qlfX7bqbAphcq7090g--">Burkina Faso</option>
        <option value="eqpW3dWbAphM_7Kfrw--">Burundi</option>
        <option value="PofUD3WbAphrc6gXCg--">Cambodia</option>
        <option value="PAHftWWbApgiXJSV0g--">Cameroon</option>
        <option value="EESRy8qbApgaeIkbsA--">Canada</option>
        <option value="XmagXgGbAph1Sq5.7w--">Cape Verde</option>
        <option value="5C1tIfibApi8xnV5PA--">Cayman Islands</option>
        <option value="9do_6MebApiKmpjaaw--">Central African Rep</option>
        <option value="rW3W6XubAph1h5qU5A--">Chad</option>
        <option value="aWTaf8KbApg_rhXSIw--">Chile</option>
        <option value="T.Hkt2ObApgpie.ozQ--">China</option>
        <option value="7Kf1XjGbAphpCBdyZA--">Christmas Island</option>
        <option value="V4ioOo6bApjfrDztDg--">Cocos (Keeling) Islands</option>
        <option value="sIxHQmubApjpQKqFZw--">Colombia</option>
        <option value="Zr3xudybAphyN.T2Tg--">Comoros</option>
        <option value="52QT_bqbApjFEe3Few--">Congo</option>
        <option value="ICrDU2ObApi1wEHYag--">Cook Islands</option>
        <option value="GGuH8nabApi3E_piFA--">Costa Rica</option>
        <option value="l3qgsFqbApiZ8tehVw--">Cote d'Ivoire</option>
        <option value="aXXFY66bApjxD_pAnA--">Croatia</option>
        <option value="LgXPpuObApjiHycxIA--">Cuba</option>
        <option value="a8lDDD6bB5SdIb2xbg--">Cyprus</option>
        <option value="mb7vmlObApj0EX3VpA--">Czech Republic</option>
        <option value="vKseDrebApj6WaqXyQ--">Denmark</option>
        <option value="_Bz0w.ebApg2UDJ_IQ--">Djibouti</option>
        <option value="8s622CybApiVx.90Jg--">Dominica</option>
        <option value="l3C6r0WbAphufkWC3Q--">Dominican Republic</option>
        <option value="ufLVLH6bAphVeziG0g--">East Timor</option>
        <option value="DKCe25ubAph.RhNDdA--">Ecuador</option>
        <option value="Pu5_HsObApilq4vUtQ--">Egypt</option>
        <option value="wg1mHHubApiMpkYz3g--">El Salvador</option>
        <option value="JvTMIFubApjqSiQeCw--">Equatorial Guinea</option>
        <option value="RhHr7dabApjqd5Tdxw--">Eritrea</option>
        <option value="TUibXW2bAphY.fKQLw--">Estonia</option>
        <option value="adtSGRKbApizQ8GeVA--">Ethiopia</option>
        <option value="JRsg3SabAphwNOF8jQ--">Falkland Islands</option>
        <option value="JRYCbmybApgJ.a5U0w--">Faroe Islands</option>
        <option value="z4KjFz.bApirM6lO.Q--">Fiji</option>
        <option value="mSCQNWWbAphdLH6WDQ--">Finland</option>
        <option value="6immEPubAphfvM5R0g--">France</option>
        <option value="4k5sWY.bAphidHAvcQ--">French Guiana</option>
        <option value="gIb3R5CbAphWNsY4kw--">French Polynesia</option>
        <option value="c5unhWebApiRc1KLVA--">Gabon</option>
        <option value="PR2M2RibApjBqrMTTw--">Gambia</option>
        <option value="RmtfJUebApi3y0ZLCg--">Georgia</option>
        <option value=".CuNPxmbApgQChfYbQ--">Germany</option>
        <option value="AMCzGkqbApgwZCTi5w--">Ghana</option>
        <option value="NP_GbgCbApjCLTWAhg--">Gibraltar</option>
        <option value="zM5Y.8KbApibMHBs6g--">Greece</option>
        <option value="aPYw1F2bApg1dnrjrQ--">Greenland</option>
        <option value="IwK4EZibAph2ooHg9g--">Grenada</option>
        <option value="pSYtXBebAphLFzrUAQ--">Guadeloupe</option>
        <option value="HxUewXebApi7ODh1jg--">Guam</option>
        <option value="Vfrmd7qbAphGjGnabQ--">Guatemala</option>
        <option value="dtPTX06bApghIGXe8Q--">Guinea</option>
        <option value="191Y.5ObApihzoxtCw--">Guinea-Bissau</option>
        <option value="cdRwH_qbApg0UYtUuA--">Guyana</option>
        <option value="ftb3taCbAphc1LvXlw--">Haiti</option>
        <option value="2Dzxkp.bApg2oDSwSw--">Honduras</option>
        <option value="nwT2nyWbBZTnoYEf1w--">Hong Kong</option>
        <option value="JV78LJabApggXHWAVg--">Hungary</option>
        <option value="82XvRyWbApiBdYUVcg--">Iceland</option>
        <option value="7gGxOnGbApgQ3.2i2g--">India</option>
        <option value="PgohIQSbApi499P62w--">Indonesia</option>
        <option value="hj5CUgmbAphQv4QraQ--">Iran</option>
        <option value="gsz9goybApiUhrfYWQ--">Iraq</option>
        <option value="NgWwDdibApjORH9Dzg--">Ireland</option>
        <option value="ktwvIm6bApiHRCYuCw--">Israel</option>
        <option value="mpa01jWbAphICsyCsA--">Italy</option>
        <option value="ffXSwFabApiK1MiqQw--">Jamaica</option>
        <option value="JOgKHwabApgvrbIuBA--">Japan</option>
        <option value="t1nzQlabApislO4_Ng--">Jordan</option>
        <option value="pVRDy0CbApiUFdo1Cw--">Kazakhstan</option>
        <option value="beQahHabAph9YX72Bg--">Kenya</option>
        <option value="pfKWbqCbApjj2aWt.g--">Kiribati</option>
        <option value="WE.KMIibAph4wnAotg--">Kuwait</option>
        <option value="1hkNzRGbAphM9YmatA--">Kyrgyzstan</option>
        <option value=".4mH_JKbApj9R1THMg--">Laos</option>
        <option value="b4k0DgibApgJUMzQNQ--">Latvia</option>
        <option value="KqieB9ibApgOVlou.g--">Lebanon</option>
        <option value="2WX8N06bApjNMPIr3g--">Lesotho</option>
        <option value="wJNrqOGbAphoYTggvw--">Liberia</option>
        <option value="fjfChhqbAph4Po9qnQ--">Libya</option>
        <option value="JBZl0uubApj47dn5nA--">Liechtenstein</option>
        <option value="RvoJCNybApgZwAXUdw--">Lithuania</option>
        <option value="SRJMfbGbApgmaXaCHw--">Luxembourg</option>
        <option value="WRA46habAZwNB2KPvA--">Macau</option>
        <option value="KorxKmubApj5tgGqIw--">Macedonia</option>
        <option value="uOAlq5ybApg5JWDr2g--">Madagascar</option>
        <option value="7TMi8ZKbApiRqCOF9g--">Malawi</option>
        <option value="Szh8wXObApjtkb7uRg--">Malaysia</option>
        <option value="kgkcaxSbAphjbHPODQ--">Maldives</option>
        <option value="Kckuqs.bApgn52ySOA--">Mali</option>
        <option value="Ju2IetqbApgVybuIIw--">Malta</option>
        <option value=".YSmwFCbAph2qpKcww--">Marshall Islands</option>
        <option value="9W208P2bApicb3oGQQ--">Martinique</option>
        <option value="fh5QIxKbApgRINgIWw--">Mauritania</option>
        <option value="BKI.R3WbApiaydihVw--">Mauritius</option>
        <option value="2mr2Xg.bApgJRrrorg--">Mayotte</option>
        <option value="NHPFyi2bApioBMz4qQ--">Mexico</option>
        <option value="2FT9ReSbApjX7a2B7g--">Micronesia</option>
        <option value="lqgmluqbAphfVIeWgw--">Moldova</option>
        <option value="QBLLXwmbApgjE7501A--">Monaco</option>
        <option value="y8JIDwmbApiGDBUEog--">Mongolia</option>
        <option value="oeC00PqbApjswgZGzQ--">Montserrat</option>
        <option value="PksYt6GbApjZnqbeog--">Morocco</option>
        <option value="1CtYQ7mbApjXFUoh.g--">Mozambique</option>
        <option value=".Xjm7iCbApi7b57ibg--">Myanmar</option>
        <option value="KQOUNmKbApgBnYy5KQ--">Namibia</option>
        <option value="EE02tV6bApgf.goqxg--">Nauru</option>
        <option value="40CSPnmbApi1Lz.guQ--">Nepal</option>
        <option value="bIrkmoqbApgSFKQkbA--">Netherlands</option>
        <option value="O9KQtTGbApiSCtcpiQ--">Netherlands Antilles</option>
        <option value="9TK1dFqbApgwS0BpCQ--">New Caledonia</option>
        <option value="IGGna0WbApjrTG64MQ--">New Zealand</option>
        <option value="VP_M67ybApg23k8JxA--">Nicaragua</option>
        <option value="xjMTDWebApjKuhXX2w--">Niger</option>
        <option value="RAanp1SbAphrfiOjnQ--">Nigeria</option>
        <option value="A56KC8ubApizM.foJA--">Niue</option>
        <option value="AeQ._5KbAphKdIz7kQ--">Norfolk Island</option>
        <option value="z31zW9abApgsbvbFEQ--">Northern Mariana Islands</option>
        <option value="hJOTe52bAphxGEaUNA--">Norway</option>
        <option value="eHAbyCmbApjTqPR6wg--">Oman</option>
        <option value="YMVhl7qbApiGiV5K7g--">Pakistan</option>
        <option value="AADt9VybApif8MoHHA--">Palau</option>
        <option value="JB8DH62bCZ56qA5neg--">Palestine</option>
        <option value="aHbYEyObAphH9RopeA--">Panama</option>
        <option value="HTk5xEybApjTNVOy5g--">Papua New Guinea</option>
        <option value="I84gLkmbApjYB.8cEQ--">Paraguay</option>
        <option value=".AImfuqbAphP1VCCRA--">Peru</option>
        <option value="3wLNHKCbApioSrAs.A--">Philippines</option>
        <option value="4hKSLdibApiuV9HnXA--">Pitcairn</option>
        <option value="0kV97TybAphIxvm14g--">Poland</option>
        <option value="Tk1TTfSbAphr_X8ZQQ--">Portugal</option>
        <option value="XwiDSL.bAph1f_koJg--">Puerto Rico</option>
        <option value="_8vj8o.bApiVMJeJ6A--">Qatar</option>
        <option value="33mz8N2bApjWpg2ENA--">Reunion</option>
        <option value="gIKzNP2bApgChOkbMw--">Romania</option>
        <option value="_18eXJWbApiQJFogjg--">Russia</option>
        <option value="XDAzAjGbApjNAoO62Q--">Rwanda</option>
        <option value="AVNwdECbAphhjZMHfA--">Saint Lucia</option>
        <option value="t.upO4ObAph549Fkqg--">Samoa American</option>
        <option value="mCrU3SybApirEffyaw--">Samoa Western</option>
        <option value="FcPfV9qbApi2_odvow--">San Marino</option>
        <option value="Dd9nWmqbAphsplI0Gw--">Sao Tome &amp; Principe</option>
        <option value="9y6.AxebAphKDEN_hg--">Saudi Arabia</option>
        <option value="wlenGZabApgkcvdJkQ--">Senegal</option>
        <option value="WvL7VOabAph2kI4rYQ--">Serbia and Montenegro</option>
        <option value="UNQMbqGbApiCY2VSRw--">Seychelles</option>
        <option value="pIZ6R.ObApgvI5Ppww--">Sierra Leone</option>
        <option value="I5nu9NCbApiYXGcS7A--">Singapore</option>
        <option value="FoI2iJKbAph_Wp9MYQ--">Slovakia</option>
        <option value="u4BHPT.bApjdmD9O0g--">Slovenia</option>
        <option value="jmQWCBGbApggGa8usw--">Solomon Islands</option>
        <option value="8Gyen6abAphUelKElw--">Somalia</option>
        <option value="gN1gp86bAphaqw7f8A--">South Africa</option>
        <option value="yOH.Bu.bAphO1VO.Ug--">South Korea</option>
        <option value="3s63vaibApjQipWazQ--">Spain</option>
        <option value="ZkWuNn2bAphbZV1cWA--">Sri Lanka</option>
        <option value="InV05VqbAphiffXy5A--">St Kitts &amp; Nevis</option>
        <option value="GedQ9gSbApj5hYp0gQ--">St Vincent</option>
        <option value="mwmYvzWbApj7ebl7vw--">St. Helena</option>
        <option value="kTRJkWWbApiMuKgqmg--">St. Pierre &amp; Miquelon</option>
        <option value="9yNom0ybApiMmOsh.Q--">Sudan</option>
        <option value="blK_TrabApgSDTuXGA--">Suriname</option>
        <option value="0e_SMc2bApi0DUmnKA--">Swaziland</option>
        <option value="5br4Zu.bApj.jCAqAw--">Sweden</option>
        <option value="YmiN9_ybApjeMPWXWA--">Switzerland</option>
        <option value="MCfUBUqbAphARLGJeg--">Syria</option>
        <option value="aeon25WbAph6k4cGqg--">Taiwan</option>
        <option value="ayxowz6bApjpio_asQ--">Tajikistan</option>
        <option value="HYgjo1qbApgTYknVEA--">Tanzania</option>
        <option value="wVzKvc6bAphUAzlxNg--">Thailand</option>
        <option value="Eb_XBMibApi6E.CBYA--">Togo</option>
        <option value="GdaPbXubApilnS.PKA--">Tokelau</option>
        <option value="BuwEbp.bApj4oRvR8A--">Tonga</option>
        <option value="pzhe7UybApildYjpQQ--">Trinidad &amp; Tobago</option>
        <option value="R0Xz5ZKbApgMxoYh1w--">Tunisia</option>
        <option value="FjYPPTmbApi1G.RRlw--">Turkey</option>
        <option value="tW5NznmbApiAL5GwTw--">Turkmenistan</option>
        <option value="1iFqCa6bApj42p_P8w--">Turks &amp; Caicos</option>
        <option value="e9kvXgybApgn8VsrYQ--">Tuvalu</option>
        <option value="dZhYeOWbAphhU.1P0A--">Uganda</option>
        <option value="zJOg_w.bApgGM39lUQ--">Ukraine</option>
        <option value="M_HdsZabApiDA.C.6Q--">United Arab Emirates</option>
        <option value="DevLebebApj4RVbtaQ--">United Kingdom</option>
        <option value="4KO02SibApitvSBieQ--" selected="selected">United States</option>
        <option value="PiiHJuibAphbasf.lQ--">Uruguay</option>
        <option value="wJpoo96bAph1kTne2Q--">Uzbekistan</option>
        <option value="CY80R5abAphhC7kHIg--">Vanuatu</option>
        <option value="umv5A3ubAph0.QLFHQ--">Vatican City</option>
        <option value="BpQAAZebApil.XeDXg--">Venezuela</option>
        <option value="Je31N0qbApjgWRKI7w--">Vietnam</option>
        <option value="1NhpyzqbApjR7kITKA--">Virgin Islands US</option>
        <option value="NM4VepGbApjNilNu9A--">Wallis &amp; Futuna</option>
        <option value="S2pzEVmbApiVX1jfYQ--">Western Sahara</option>
        <option value="stkCiEabAphGFkrFLg--">Yemen</option>
        <option value="uD9tliCbApjjszjtVA--">Zambia</option>
        <option value="jCJwhnebAphHfsijqA--">Zimbabwe</option>
        </select>
      </td>
    </tr>
    <tr><td colspan="2"><span class="tblTitle">More details</span>(optional, but nice)</td>
    </tr>
    <tr><td class="fieldName optional">Phone number</td>
        <td><input id="venueForm.phone" type="text" name="phone" value="" class="shortwidth"/></td>
    </tr>
    <tr><td class="fieldName optional">Venue homepage</td>
        <td><input id="venueForm.url" type="text" name="url" value="" class="longwidth"/></td>
    </tr>
    <tr><td class="fieldName optional">Short description</td>
        <td><textarea class="longwidth" id="venueForm.description" name="description" rows="5" cols="50"></textarea>
      </td>
    </tr>
    <tr><td class="fieldName"></td>
        <td><input type="checkbox" name="private" value="1" id="private" />
        <label for="private">  <b>Personal/private</b> (e.g. your apartment, home, or private space)</label><br /></td>
    </tr>
    <tr id="venue_submit">
      <td class="fieldName"></td>
      <td><input id="venue_submit" type="submit" name="submit" value="Submit" class="submit" />
          or <a href="#">  Close this window </a>
      </td>
    </tr>
  </table>
</form>


Yelp add business

Simplified input form markup, scripting/presentational markup removed, whitespace adjusted for readability: 

<form method="post" action="/writeareview/newbiz" name="review_rate_form" id="review_rate_form">
  <dl id="reviewForm">
    <dt><strong>Business Name</strong></dt>
    <dd><input maxlength=64 name="newbiz_name" id="newbiz_name" class="form300" value="" autocomplete="off"></dd>
    <dt><strong>Address 1</strong></dt>
    <dd><input maxlength=64 name="newbiz_address1" class="form300" value="" autocomplete="off"></dd>
    <dt><strong>Address 2</strong></dt>
    <dd><input maxlength=64 name="newbiz_address2" class="form300" value=""></dd>
    <dt><strong>City, State &amp; Zip</strong></dt>
    <dd><input maxlength=64 name="newbiz_location" id="newbiz_location" class="form300" value="" autocomplete="off" ></dd>
    <dt><strong>Phone</strong></dt>
    <dd><input maxlength=32 name="newbiz_phone" class="form150" value="" autocomplete="off"></dd>
    <dt><strong>Web Address</strong></dt>
    <dd><input maxlength=255 name="newbiz_website" class="form300" value=""></dd>
  </dl>
  <div>
    <p class="alignright"><em class="smaller">* Please Note: it will take 48 hours for a newly added business to appear in search.</em></p>
    <input type="hidden" name="default_action" value="select">
    <a href="/">Cancel</a> 
    <input type="submit" name="action_select" value="Post It">
  </div>
</form>
Yelp add business markup challenges
  • Yelp has a single input for "City, State & Zip". The challenge here is how to mark that up to express the semantic that adr locality, region, and postal-code should be concatenated (perhaps with a comma "," between the city and state, and a space " " between the state and the zip?) and placed into that single field.
<dt><strong>City, State &amp; Zip</strong></dt>
<dd><input maxlength=64 name="newbiz_location" id="newbiz_location" class="form300" value="" autocomplete="off"></dd>

... more organization info input examples ...

location info input

Presumably there are sites and forms where a user enters location information but not necessarily a complete venue. If it's a named location, it could benefit from copy and paste hCard support, or if it is just an address or geo coordinates, it could benefit from copy and paste adr/geo support.

Examples:

  • ...

Chrome autocomplete examples

See:

And extract examples of specific sites and their input forms to document here as real world examples.

see also

related

Retrieved from "http://microformats.org/wiki/index.php?title=hcard-input-examples&oldid=66008"