YubinBango

https://yubinbango.github.io/yubinbango/

Admin

YubinBango is a Japanese postal code lookup library that automatically fills address fields by using...

Tokens:635

Snippets:5

Trust Score:9.7

Update:5 months ago

Show doc for...

Tokens:

Raw

### Basic YubinBango Setup with Single Address Field

Source: https://yubinbango.github.io/yubinbango

Include the YubinBango script and use microformats2 classes like 'h-adr' and 'p-postal-code' within a form to enable postal code search functionality. This setup is for a single input field for the postal code.

```html
<script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>
    <form class="h-adr">
      <span class="p-country-name" style="display:none;">Japan</span>

      〒<input type="text" class="p-postal-code" size="8" maxlength="8"><br>

      <input type="text" class="p-region p-locality p-street-address p-extended-address" /><br>
    </form>
```

--------------------------------

### YubinBango Setup with Split Postal Code Fields

Source: https://yubinbango.github.io/yubinbango

Configure YubinBango for separate input fields for the postal code (e.g., first 3 digits and last 4 digits). This requires using the 'h-adr' class on the form and 'p-postal-code' on the respective input fields.

```html
<form class="h-adr">
      <span class="p-country-name" style="display:none;">Japan</span>

      〒<input type="text" class="p-postal-code" size="3" maxlength="3">
      <input type="text" class="p-postal-code" size="4" maxlength="4"><br>

      <input type="text" class="p-region" readonly /><br>
      <input type="text" class="p-locality" readonly /><br>
      <input type="text" class="p-street-address" /><br>
      <input type="text" class="p-extended-address" />
    </form>
```

Tokens:

Raw