郵便番号から住所を自動入力するフォームを作る方法
郵便番号から住所を自動入力するフォームを作る方法を紹介します。このサンプルでは、郵便番号をテキストフィールドへ入力して「住所を自動入力」ボタンを押すと、入力された郵便番号をもとに住所を取得し、住所欄へ自動で入力します。都道府県・市区町村・町域を利用者が最初から手入力する必要がないため、住所入力の手間を減らせます。
会員登録、お問い合わせ、ECサイトの配送先入力など、郵便番号と住所を入力するフォームで利用できます。郵便番号による住所検索にはZipCloudの郵便番号検索APIを使用し、取得した都道府県・市区町村・町域を連結して住所欄へ表示します。郵便番号が未入力の場合や該当する住所が見つからない場合にはメッセージを表示するため、入力状態も確認できます。
HTMLでは郵便番号欄や住所欄、ボタンなどの表示内容を変更でき、CSSではフォームの横幅、余白、背景色、枠線、角丸、ボタンのデザインなどを調整できます。JavaScriptでは郵便番号を取得してAPIへ問い合わせ、取得した住所をテキストフィールドへ反映します。入力項目を減らしたい会員サイトや注文フォームなどにも取り入れやすい住所自動入力のサンプルです。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
郵便番号を入力すると住所を自動入力します。
郵便番号を入力して「住所を自動入力」を押してください。取得できた住所が住所欄へ自動で入力されます。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コード -->
<meta charset="UTF-8">
<!-- スマートフォン対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル -->
<title>郵便番号から住所を自動入力するフォーム</title>
<!-- CSSファイルを読み込む -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 住所入力フォーム全体 -->
<div class="form-zipcode-autofill_wrap">
<!-- タイトル -->
<div class="form-zipcode-autofill_title">
住所入力フォーム
</div>
<!-- 説明文 -->
<p class="form-zipcode-autofill_text">
郵便番号を入力すると住所を自動入力します。
</p>
<!-- 入力フォーム -->
<form class="form-zipcode-autofill_form">
<!-- 郵便番号入力項目 -->
<div class="form-zipcode-autofill_field">
<!-- 郵便番号ラベル -->
<label
class="form-zipcode-autofill_label"
for="zipcode">
郵便番号
</label>
<!-- 郵便番号入力欄 -->
<input
class="form-zipcode-autofill_input"
type="text"
id="zipcode"
name="zipcode"
placeholder="1000001">
</div>
<!-- 住所を取得するボタン -->
<button
class="form-zipcode-autofill_button"
type="button">
住所を自動入力
</button>
<!-- 住所入力項目 -->
<div class="form-zipcode-autofill_field">
<!-- 住所ラベル -->
<label
class="form-zipcode-autofill_label"
for="address">
住所
</label>
<!-- 自動入力される住所欄 -->
<input
class="form-zipcode-autofill_input"
type="text"
id="address"
name="address"
placeholder="東京都千代田区千代田">
</div>
<!-- エラーメッセージ表示欄 -->
<div
class="form-zipcode-autofill_message"
aria-live="polite"></div>
</form>
</div>
<!-- JavaScriptファイルを読み込む -->
<script src="script.js"></script>
</body>
</html>コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。 サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
Q ダウンロードしたけど、これをネット上で動かすにはどうするの？
Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。
InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLで郵便番号入力欄、住所入力欄、「住所を自動入力」ボタン、エラーメッセージ表示欄を配置し、CSSでフォーム全体や入力欄、ボタンのデザインを設定します。JavaScriptでは入力された郵便番号を使ってZipCloudの郵便番号検索APIへ問い合わせ、取得した都道府県・市区町村・町域を連結して住所欄へ自動入力します。APIキーやアクセストークンなど、利用者ごとに設定する認証情報は使用しません。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlは住所入力フォームの表示部分を構成するファイルです。「住所入力フォーム」のタイトル、説明文、郵便番号入力欄、「住所を自動入力」ボタン、住所入力欄、エラーメッセージ表示欄を配置しています。同じ階層にあるstyle.cssとscript.jsもこのファイルから読み込みます。
style.cssはフォーム全体の横幅、余白、背景色、枠線、角丸、入力欄、ボタン、エラーメッセージなどのデザインを設定するファイルです。入力欄へフォーカスしたときは枠線を青色へ変更し、外側へ薄い影を表示します。
script.jsは郵便番号から住所を取得して住所欄へ入力するファイルです。「住所を自動入力」ボタンが押されると郵便番号入力欄の値を取得し、ハイフンと前後の空白を取り除いてからZipCloudの郵便番号検索APIへ送信します。取得した住所情報のaddress1、address2、address3を連結し、住所入力欄へ設定します。
設置方法・使い方
sampleフォルダを作成し、その中へindex.html、style.css、script.jsを同じ階層で保存してください。sample/index.htmlをブラウザで開くと、index.htmlからstyle.cssとscript.jsが読み込まれます。このサンプルはZipCloudの郵便番号検索APIへアクセスするため、住所の自動取得にはインターネットへ接続できる環境が必要です。APIキーなどを取得してコードへ設定する作業はありません。
郵便番号入力欄へ郵便番号を入力し、「住所を自動入力」ボタンを押します。例えば1000001のようなハイフンなしの郵便番号を入力できます。JavaScriptでは.replace(/-/g,"")によってハイフンを削除するため、100-0001のようにハイフンを含めて入力した場合も検索用の値は1000001になります。
郵便番号が空の場合はAPIへ問い合わせず、「郵便番号を入力してください。」と表示します。APIから該当する住所を取得できなかった場合は「住所が見つかりませんでした。」と表示して住所欄を空にします。通信エラーなどで住所情報を取得できなかった場合は「住所の取得に失敗しました。」と表示します。住所が取得できた場合は、都道府県・市区町村・町域を連結した文字列が住所欄へ自動入力されます。
カスタマイズできる内容
index.htmlでは、「住所入力フォーム」のタイトル、説明文、「郵便番号」「住所」のラベル、各入力欄のプレースホルダー、「住所を自動入力」のボタン文字を変更できます。住所欄は通常のテキスト入力欄として作成しているため、自動入力されたあとに利用者が内容を編集することもできます。
style.cssでは、フォーム全体の最大横幅、余白、背景色、枠線、角丸、入力欄のサイズ、フォーカス時の表示、ボタンの背景色や文字サイズ、エラーメッセージの文字色などを変更できます。
script.jsでは、住所を取得したあとに住所欄へ設定する内容を変更できます。現在はresult.address1、result.address2、result.address3を連結しているため、都道府県・市区町村・町域を1つの住所入力欄へ表示する構成です。
数値調整
style.css
padding:40px 20px;
ページ全体の内側余白です。40pxが上下、20pxが左右の余白です。値を大きくすると画面端との間隔が広がります。
max-width:520px;
住所入力フォーム全体の最大横幅です。値を大きくするとフォームが横に広がり、小さくするとコンパクトになります。
margin:40px auto;
フォーム全体の上下余白です。40pxを大きくすると上下の間隔が広がります。autoによって左右中央へ配置します。
padding:32px;
フォーム全体の内側余白です。値を大きくすると内容と外枠の間隔が広がります。
border-radius:18px;
フォーム全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:22px;
フォームタイトルの文字サイズです。値を大きくするとタイトルが大きく表示されます。
margin-bottom:24px;
説明文の下側余白です。24pxを大きくすると入力フォームとの間隔が広がります。
gap:16px;
郵便番号入力項目、ボタン、住所入力項目、メッセージ表示欄の間隔です。値を大きくすると各項目の間隔が広がります。
gap:8px;
ラベルと入力欄の間隔です。値を大きくするとラベルと入力欄の間隔が広がります。
padding:14px 16px;
入力欄の内側余白です。14pxが上下、16pxが左右の余白です。値を大きくすると入力欄の内側に余裕ができます。
border-radius:10px;
入力欄とボタンの角丸です。値を大きくすると丸みが強くなります。
font-size:16px;
入力欄とボタンの文字サイズです。値を大きくすると文字が大きく表示されます。
box-shadow:0 0 0 3px rgba(11,107,255,0.15);
入力欄へフォーカスしたときの外側の強調表示です。3pxを大きくすると影の広がる範囲が大きくなります。
min-height:18px;
エラーメッセージ表示欄の最小高さです。値を大きくするとメッセージ用に確保する高さが大きくなります。
font-size:13px;
エラーメッセージの文字サイズです。値を大きくするとメッセージが大きく表示されます。
レスポンシブ対応
このサンプルはstyle.cssでレスポンシブ対応しています。フォーム全体にwidth:100%とmax-width:520pxを設定しているため、広い画面では最大520pxで表示し、画面幅が狭くなると利用できる横幅に合わせて縮小します。さらに@media (max-width:640px)を使用し、画面幅640px以下ではフォーム全体の内側余白をpadding:24px 18px;へ変更します。これにより、スマートフォン・タブレット・PCの画面幅に合わせて利用できます。
コメント