hcard-input-examples: Difference between revisions

From Microformats Wiki
Jump to navigation Jump to search
(start shopping checkout section with Advance Auto Parts example, prune some leftover scripting/presentational markup)
(→‎examples: person billing shipping input)
Line 207: Line 207:
</source>
</source>


=== shopping checkout ===
=== person billing shipping input ===
Shopping check out forms. What every ecommerce site asks for upon checking out, your shopping cart, etc. to make a purchase.
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:
Specific examples:

Revision as of 23:54, 25 July 2012

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>
<table>
<tbody>
<tr>
<td colspan="2">
<b>(Optional) Register your account by providing a password.</b>
<br>To Checkout as Guest, leave the following fields blank.
</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>

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=46918"