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>

プロフィール

管理者 HONDA

福島県出身

ITで商売を効率化したいが、ITが苦手、分からない方是非ご相談ください。50過ぎの「おっさん」です。そのほうが話しやすい方はお勧めします。

カテゴリ

美容

ファッション

お酒


西暦和暦干支年齢対応表


設定

時計表示

都道府県

ブックマーク1

ブックマーク2

ブックマーク3

プライバシーポリシー

はじめに

HONDA WORK SHOPでは、ご利用のユーザ様個人情報の取り扱いに細心の注意を払っております。

また当サイトではアフィリエイトプログラムを利用しております。

第三者配信事業者(Amazonアソシエイト、楽天アフィリエイト、A8.net)がCookie を使用して、サイト利用者が当サイトや他のサイトに過去にアクセスした際の情報に基づいて広告を配信します。

Google が広告 Cookie を使用することにより、サイト利用者が当サイトや他のサイトにアクセスした際の情報に基づいて、Google やそのパートナーは適切な広告をサイト利用者に対して表示します。

広告設定でパーソナライズ広告を無効にすることができます。

Cookieの利用について

Cookieは、当サイトや他サイトへのアクセスに関する情報が含まれており、多くのサイトで利用者に有益な機能を提供する目的で使用されています。

Cookieには、サイト利用者の個人情報(氏名、住所、メールアドレス、電話番号)は一切含まれません。

アクセス解析ツールについて

当サイトでは、アクセス解析ツール「Google Analytics」を利用しています。

「Google Analytics」はトラフィックデータの収集のためにCookieを使用しています。

このトラフィックデータは匿名で収集されており、個人を特定するものではありません。

この機能はCookieを無効にすることで収集を拒否することができますので、ご利用のブラウザ設定をご確認のうえ、拒否設定を行ってください。

本ポリシーの変更

当サイトは、個人情報に関して適用される日本の法令を遵守するとともに、本ポリシーの内容を適宜見直しその改善に努めます。

修正された最新のプライバシーポリシーは常に本ページにて開示されます。