快適な住所入力フォームを作るぜ!

Webの住所入力ってめちゃめちゃ面倒ですよね?
少しでもユーザー様に快適に操作して貰いたい
Web系エンジニアでなくてもアプリ開発をしている人なら全ての人がそう考えるはず!

ちょっと調べて実装してみたのでその時のメモ

実装がめちゃくちゃ簡単なのに高機能で感動した!

<script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>

YubinBangoを読み込んで

<form class="h-adr">
      <label for="post-code">郵便番号:</label>
      <input id="post-code" type="text" class="p-postal-code"><br>

      <label for="address">住所:</label>
      <input id="address" type="text" class="p-postal-code"><br>
    </form>

YubinBangoを使うにあたっては以下の項目だけ遵守すればOK!
あとは自動で郵便番号から住所を自動入力してくれます。

  • formのクラスにh-adrをつける
  • formタグの中で p-country-name がJapanにしている
    例:<span class=”p-country-name” style=”display:none;”>Japan</span>
  • 住所を展開したいinputのClassをp-region p-locality p-street-address p-extended-addressにする

上記3つをクリアしてればあとはJSやJQueryなど書かなくても自動で動きます!

マジですげーー!まじで便利!

詳しくはGitHubで!
https://github.com/yubinbango/yubinbango

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次