Difference between revisions of "hcard-input-examples"

Latest revision as of 05:58, 4 April 2017

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 1.0 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

http://yelp.com/ - when signing up for a new account: https://www.yelp.com/signup

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

http://shop.advanceautoparts.com, search for an item, enter your zip code, add to cart, checkout.

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

https://www.ae.com/, search for an item, add to bag, checkout, guest checkout.

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

http://playfoursquare.com/ - when creating a new venue: http://playfoursquare.com/add_venue

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

http://upcoming.org/ - when creating a new venue as part of creating a new event http://upcoming.org/event/add/

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

http://yelp.com/ - when adding a new business: http://www.yelp.com/writeareview/newbiz

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:

https://src.chromium.org/viewvc/chrome/trunk/src/chrome/test/data/autofill/heuristics/input/

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

@@ Line 1,267: / Line 1,267: @@
 ==== Upcoming ====
-* http://upcoming.yahoo.com/ - when creating a new venue as part of creating a new event http://upcoming.yahoo.com/event/add/
+* http://upcoming.org/ - when creating a new venue as part of creating a new event http://upcoming.org/event/add/
 Input form markup simplified a bit with much presentational markup removed, whitespace added for readability:

Difference between revisions of "hcard-input-examples"

Latest revision as of 05:58, 4 April 2017

Contents

examples

person info input

Yelp sign up

person billing shipping input

Advance Auto Parts

American Eagle

organization info input

foursquare

Upcoming

Yelp add business

Yelp add business markup challenges

... more organization info input examples ...

location info input

Chrome autocomplete examples

see also

related

Navigation menu

Personal tools

Namespaces

Variants

Views

More

Search

Microformats Wiki

Microformats

Tools