(Sample)

郵便番号から住所を自動入力する方法をご紹介します。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>

住所の欄の4つのクラスの意味は以下の通り

都道府県:p-region
市区町村:p-locality
町域:p-street-address
以降の住所:p-extended-address

上記の例のように4つともまとめて書くことも、別々に書くこともできます。

以下に別々に書いた例を掲載します。

サンプル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をご紹介しました。

最後までお読みいただきありがとうございます。