2022/06/06
【WEB制作】住所を郵便番号から自動入力！
あなたHPで住所を郵便番号から自動入力したくありませんか？
このやり方を意外と簡単なんですよ。
最初から自分で一から実装するのは非常に大変ですが、いまどきそんなことは必要ないです。
「ajaxzip3」というプラグインを用いることで非常に簡単に実装することができるんですよ。
サンプルを以下となります。みなさん試してみてください！
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>郵便番号から住所自動表示</title>
<link rel="stylesheet" href="template_auto_address.css">
</head>
<body>
<script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>
<div class="container">
<form action="＃" method="get" class="row">
<div class="col-sm-8 col-sm-offset-2">
<div class="form-group">
<label for="zip"><span class="label label-danger"></span>郵便番号</label>
<input type="address" id="zip" name="zip" class="form-control" placeholder="" autofocus required maxlength="8" onKeyUp="AjaxZip3.zip2addr(this,'','pref01','addr01');">
</div>
<div class="form-group">
<label for="address"><span class="label label-danger"></span>都道府県</label>
<input type="address" id="pref01" name="pref01" class="form-control" placeholder="例：北海道" required>
</div>
<div class="form-group">
<label for="address"><span class="label label-danger"></span>都道府県以降の住所</label>
<input type="address" id="addr01" name="addr01" class="form-control" placeholder="例：札幌市" required>
</div>
</div>
</form>
</div>
</body>
</html>
