Address lookup

Open this example in a new tab: address-lookup

Copy code: address-lookup

<div class="form__group">  
  <fieldset class="form__fieldset form__fieldset--address-lookup">  
    <legend class="form__legend ">Business address</legend>  
    <p class="form__hint">Use postcode search or enter address manually.</p>  
    <label class="form__label" for="postcodeLookup">Postcode search</label>  
    <div class="form__group form__group--inline">  
      <input autocapitalize="characters" autocomplete="postal-code" autocorrect="off" class="form__input form__input--address-short" id="postcodeLookup" type="text" name="postcodeLookup">  
      <button id="postcodeLookupBtn" class="button button--start">Find address</button>  
    </div>  
    <div id="postcodeLookupAddress" class="form__group form__input--long form__group--hidden">  
      <label id="addressSelect" class="form__label" for="idpc_dropdown">Select an address</label>  
      <div class="form__input--address" id="postcodeLookupAddressContainer"></div>  
    </div>  
    <div class="lookup_field" data-prefix="cbusiness-address-page-business-address_"></div>  
    <input id="postcodeApiKey" type="hidden" value="ak_jr1z1gmkIoaMm928AQR8qv8gItCaz">  
  </fieldset>  
  <fieldset id="enterAddress" class="form__fieldset form__fieldset--enter-address">  
    <legend class="form__legend ">Business address</legend>  
    <div class="form__group">  
      <label id="business-address_line1" class="form__label" for="cbusiness-address-page-business-address_line1">Building and street  
        <span class="sr-only">(line 1)</span>  
      </label><input required="" autocapitalize="words" autocomplete="address-line1" autocorrect="off" class="form__input form__input--address-long " id="cbusiness-address-page-business-address_line1" item-name="Building" name="business-address_line1" type="text" value="">  
      <label class="form__label sr-only" for="cbusiness-address-page-business-address_line2" id="business-address_line2">Building and  
      street (line 2)</label><input autocapitalize="words" autocomplete="address-line2" autocorrect="off" class="form__input form__input--address-long " id="cbusiness-address-page-business-address_line2" item-name="Street" name="business-address_line2" type="text" value="">  
    </div>  
    <div class="form__group">  
      <label class="form__label" id="business-address_city" for="cbusiness-address-page-business-address_city">Town or city</label><input required="" autocapitalize="words" autocomplete="address-level2" autocorrect="off" class="form__input " id="cbusiness-address-page-business-address_city" item-name="Town or city" name="business-address_city" type="text" value="">  
    </div>  
    <div class="form__group">  
      <label class="form__label" for="cbusiness-address-page-business-address_postcode" id="business-address_postcode">Postcode</label><input autocapitalize="characters" autocomplete="postal-code" autocorrect="off" class="form__input form__input--address-short " id="cbusiness-address-page-business-address_postcode" item-name="Postcode" name="business-address_postcode" type="text" value="">  
    </div>  
    <div class="form__group form__group--hidden">  
      <label class="form__label" for="cbusiness-address-page-business-address_longitude" id="business-address_longitude">Longitude</label>  
      <input class="form__input form__input--address-short " id="cbusiness-address-page-business-address_longitude" item-name="Postcode" name="business-address_longitude" type="text" value="">  
    </div>  
    <div class="form__group form__group--hidden">  
      <label class="form__label" for="cbusiness-address-page-business-address_latitude" id="business-address_latitude">Latitude</label>  
      <input class="form__input form__input--address-short " id="cbusiness-address-page-business-address_latitude" item-name="Postcode" name="business-address_latitude" type="text" value="">  
    </div>  
    <div class="form__group form__group--hidden">  
      <label class="form__label" for="cbusiness-address-page-business-address_buildingNumber" id="business-address_buildingNumber">buildingNumber</label>  
      <input class="form__input form__input--address-short " id="cbusiness-address-page-business-address_buildingNumber" item-name="Postcode" name="business-address_buildingNumber" type="text" value="">  
    </div>  
    <div class="form__group form__group--hidden">  
      <label class="form__label" for="cbusiness-address-page-business-address_buildingName" id="business-address_buildingName">buildingName</label>  
      <input class="form__input form__input--address-short " id="cbusiness-address-page-business-address_buildingName" item-name="Postcode" name="business-address_buildingName" type="text" value="">  
    </div>  
    <div class="form__group form__group--hidden">  
      <label class="form__label" for="cbusiness-address-page-business-address_organisationName" id="business-address_organisationName">organisationName</label>  
      <input class="form__input form__input--address-short " id="cbusiness-address-page-business-address_organisationName" item-name="Postcode" name="business-address_organisationName" type="text" value="">  
    </div>  
    <div class="form__group form__group--hidden">  
      <label class="form__label" for="cbusiness-address-page-business-address_uprn" id="business-address_uprn">uprn</label>  
      <input class="form__input form__input--address-short " id="cbusiness-address-page-business-address_uprn" item-name="Postcode" name="business-address_uprn" type="text" value="">  
    </div>  
    <div class="form__group">  
      <label class="form__label" for="cbusiness-address-page-business-address_country" id="business-address_country">Country</label><input required="" autocapitalize="words" autocomplete="country-name" autocorrect="off" class="form__input " id="cbusiness-address-page-business-address_country" item-name="Country" name="business-address_country" type="text" value=" United Kingdom">  
    </div>  
  </fieldset>  
</div>