全国対応！外注・下請けのホームページ制作会社をお探しの会社様。
人員リソース不足、技術不足でお困りなら外注・下請け専門のランランドにお任せ下さい
Web blog WEBブログ
郵便番号から住所を自動表示する方法
2018.08.17
※この記事は2018年08月17日時点の情報をもとに作成されました。
コーダーの兼山です。
サイトを訪問していただくお客様の、入力フォームへの入力負担を少しでも軽減するため、
郵便番号の入力で住所が自動表示できるようにしてみるのは如何でしょうか？
方法は、幾つかありますが、
今回は、私が個人的にお薦めの、入力フォームに郵便番号を入力することで住所を自動表示する方法をご紹介します。
「ajaxzip3.js」の特徴
「ajaxzip3.js」は、下記の特徴があります。
・実装が簡単
・軽量で読み込みが早い
・常に最新版の郵便番号データを利用可能
・郵便番号や住所を分けるパターンにも対応
・jQueryが不要
手順① JSファイルを内で読み込む
タグ内に、下記のコードを入力します。
<script src=”https://ajaxzip3.github.io/ajaxzip3.js” charset=”UTF-8″></script>
ファイルをダウンロードして指定する場合は、
こちら、ajaxzip3 からダウンロードします。
今回は、ダウンロードの不必要なパターンで説明をします。
(常に最新版の郵便番号データを利用可能なため。)
手順② フォーム内に入力フィールドを設置する
郵便番号を一つの入力フィールドにする
■ 郵便番号を一つの入力フィールド(7桁)で入力
■ 住所も一つの入力フィールドで表示
郵便番号を一つの入力フィールド(7桁)で入力し、住所は都道府県とそれ以降の二つの入力フィールドで表示する
■ 郵便番号を一つの入力フィールド(7桁)で入力
■ 住所は都道府県とそれ以降の二つの入力フィールドで表示
郵便番号を二つの入力フィールドにする
■ 郵便番号を二つの入力フィールド(3桁+4桁)で入力
■ 住所は一つの入力フィールドで表示
郵便番号を二つの入力フィールド(3桁+4桁)で入力し、
住所は都道府県とそれ以降の二つの入力フィールドで表示する
■ 郵便番号を二つの入力フィールド(3桁+4桁)で入力
■ 住所は都道府県とそれ以降の二つの入力フィールドで表示
まとめ
郵便番号から住所自動入力は本当に便利さと、
郵便番号を間違えると住所も間違って表示されるので入力ミスを防ぐメリットもあります。
ユーザビリティの向上に繋がりますね。
ご相談・カスタマイズご依頼
弊社では上記ブログ内容にある修正・カスタマイズのご依頼も承っております。
ご自身で行ってみて上手くいかない場合などこちらよりお気軽にご相談ください。
この記事を書いた人 兼山 暖美 エンジニア
この記事を読んだ方はこんな記事も読んでいます
こんにちは。コーダーの兼山です。 コーディング時にtableで表を組み込む際、レスポンシブコーディングなどでのスマートフ…
こんにちは。コーダーの兼山です。 今回はドラッグで左右の比較表示ができるjQueryプラグイン「twentytwenty…
こんにちは。コーダーの兼山です。 前回は、reCAPTCHAを設置するために必要となる、GoogleへWEBサイト登録と…
