hcard-input-examples

From Microformats Wiki
Revision as of 20:27, 10 June 2009 by Tantek (talk | contribs) (note location info input possibility, additional see also links)
Jump to navigation Jump to search

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

This article is a stub. You can help the microformats.org wiki by expanding it.

examples

person info input

  • Nearly every social network site's "sign up" 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" size="20" maxlength="32" name="first_name" value=""/>
      </li>
      <li><label for="signup-last-name">Last Name:</label>
          <input id="signup-last-name"type="text" size="20" maxlength="32" name="last_name" value=""/>
      </li>
      <li><label for="signup-address">Email Address:</label>
          <input id="signup-address" type="text" size="20" 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" size="20" maxlength="16" name="password" value=""/>
      </li>
      <li><label for="signup-password-confirm">Retype Password:</label>
          <input id="signup-password-confirm" type="password" size="20" maxlength="16" name="confirm_password" value=""/>
      </li>
      <li><label for="signup-zip">Zip Code:</label>
          <input id="signup-zip" type="text" size="7" 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>


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" size="20" value=""></td>
    </tr>
    <tr><td>Address: </td>
        <td><input type="text" name="address" size="20" value=""></td>
    </tr>
    <tr><td>Cross Street: </td>
        <td><input type="text" name="crossstreet" size="20" 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" size="10" value="San Francisco">
            <input type="text" name="state" size="2" value="CA">, 
            <input type="text" name="zip" size="5" value=""></td>
    </tr>
    <tr><td>Phone: </td>
        <td><input type="text" name="phone" size="10" 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" onsubmit="return YAHOO.up.newVenueForm.submit()">
  <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="" size="60" /></td>
    </tr>
    <tr><td class="fieldName required">Address</td>
        <td><input id="venueForm.address" class="longwidth" type="text" name="address" value="" size="60" /></td>
    </tr>
    <tr><td class="fieldName required">City</td>
        <td><input id="venueForm.city" type="text" class="shortwidth" name="city" value="San Francisco" size="30" />
        <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="" size="8" 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" size="20" /></td>
    </tr>
    <tr><td class="fieldName optional">Venue homepage</td>
        <td><input id="venueForm.url" type="text" name="url" value="" class="longwidth" size="60" /></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="#" onclick="YAHOO.up.newVenueForm.close(); return false;">  Close this window </a>
      </td>
    </tr>
  </table>
</form>


Yelp add business

Simplified input form markup, 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" size="35" class="form300" value="" autocomplete="off" onkeyup="schedule_search()" onchange="schedule_search()"></dd>
    <dt><strong>Address 1</strong></dt>
    <dd><input maxlength=64 name="newbiz_address1" size="35" class="form300" value="" autocomplete="off" onkeyup="schedule_search()" onchange="schedule_search()"></dd>
    <dt><strong>Address 2</strong></dt>
    <dd><input maxlength=64 name="newbiz_address2" size="35" class="form300" value=""></dd>
    <dt><strong>City, State &amp; Zip</strong></dt>
    <dd><input maxlength=64 name="newbiz_location" id="newbiz_location" size="20" class="form300" value="" autocomplete="off" onkeyup="schedule_search()" onchange="schedule_search()"></dd>
    <dt><strong>Phone</strong></dt>
    <dd><input maxlength=32 name="newbiz_phone" size="14" class="form150" value="" autocomplete="off" onkeyup="schedule_search()" onchange="schedule_search()"></dd>
    <dt><strong>Web Address</strong></dt>
    <dd><input maxlength=255 name="newbiz_website" size="35" 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" size="20" class="form300" value="" autocomplete="off" onkeyup="schedule_search()" onchange="schedule_search()"></dd>

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:

  • ...

see also