郵便番号から住所を自動入力する方法をご紹介します。YubinBango.jsというオープンソースのJavaScriptライブラリを使用します。
サンプルform-yubinbango1.html(link)に移動して、あなたの知っている郵便番号を入れて確かめてください。
以下のようにして使います。
<!-- 外部から郵便番号自動補完機能を提供するJavaScriptライブラリ「yubinbango.js」を読み込む -->
<script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>
<!-- フォームの開始。h-adrはマイクロフォーマットというHTMLに意味を持たせるための記法で、この場合は住所情報を示しています -->
<form action="#" class="h-adr">
<!-- p-country-nameもマイクロフォーマットで、国名を表します。ここでは日本を示していますが、非表示設定になっています -->
<span class="p-country-name" style="display:none;">Japan</span>
<!-- フォームグループの開始 -->
<div class="form-group">
<!-- p-postal-codeはマイクロフォーマットで郵便番号を示しています -->
<p>〒：<input type="text" class="p-postal-code form-control" size="8" maxlength="8"></p>
</div>
<!-- 別のフォームグループの開始 -->
<div class="form-group">
<!-- 住所の入力フィールド。p-region, p-locality, p-street-address, p-extended-addressは全てマイクロフォーマットで、それぞれ地域、市区町村、通りの名前、追加情報を表します -->
<p>住所：<input type="text" class="p-region p-locality p-street-address p-extended-address form-control" size="30"></p>
</div>
<!-- フォームの送信ボタン。btnはBootstrapのクラスで、ボタンに基本的なスタイリングを適用します。btn-primaryはボタンにプライマリー色（通常は青色）を適用します -->
<button type="submit" class="btn btn-primary">Submit</button>
</form>
住所の欄の４つのクラスの意味は以下の通り
都道府県：p-region
市区町村：p-locality
町域：p-street-address
以降の住所：p-extended-address
上記の例のように４つともまとめて書くことも、別々に書くこともできます。
以下に別々に書いた例を掲載します。
サンプルform-yubinbango2.html(link)に移動して、あなたの知っている郵便番号を入れて確かめてください。
<script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>
<form action="#" class="h-adr">
<span class="p-country-name" style="display:none;">Japan</span>
<div class="col-md-2">
<div class="form-group">
<p>〒：<input type="text" class="p-postal-code form-control" size="8" maxlength="8"></p>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<p>都道府県：<input type="text" class="p-region form-control" size="30"></p>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<p>市町村：<input type="text" class="p-locality form-control" size="30"></p>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<p>住所1：<input type="text" class="p-street-address form-control" size="30"></p>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<p>住所2：<input type="text" class="p-extended-address form-control" size="30"></p>
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>以上、yubinbango.jsをご紹介しました。