郵便番号から住所を自動入力するテキストボックスの作り方

無料ツール

テキストボックスを自由に作成

1行入力・複数行入力の切り替えや、ラベル・プレースホルダー・サイズ・色・余白・枠線などを設定して、HTML・CSSを自動生成できます。

文字・サイズ・色・角丸・グラデーション・アイコン・ホバー・立体表現などを設定して、HTML・CSSを自動生成できます。

ボタン作成ツールを使う

新しいタブで開きます

郵便番号を入力するだけで、対応する住所をテキストボックスへ自動入力する方法を紹介します。郵便番号が7桁そろうと自動的に住所の検索が始まるため、検索ボタンを押したり、入力欄からフォーカスを外したりする必要はありません。

今回のデモでは、郵便番号「1000001」を入力すると、該当する「東京都千代田区千代田」が住所欄へ自動入力されます。ハイフン付きの郵便番号にも対応しており、郵便番号を変更すると以前の住所が消去され、新しい郵便番号に対応する住所を検索します。自動入力された住所は、そのまま手動で編集することもできます。

郵便番号が正しい形式でない場合や、該当する住所が見つからなかった場合は、入力欄の下にメッセージを表示します。検索中や住所の取得に成功した場合もメッセージが切り替わるため、現在の処理状況を確認できます。

住所の取得には、郵便番号から住所情報を検索できる外部サービス「ZipCloud API」を使用しています。そのため、住所の自動入力にはインターネット接続が必要です。入力した郵便番号と取得した住所はJavaScriptで値として扱うことができ、取得した住所を別の処理に利用することもできます。APIの仕組みや利用時の注意点については、下記の「ファイル構成と設置方法」で詳しく説明します。

デモ

郵便番号を7桁入力すると、自動的に住所の検索が始まります。該当する住所が見つかると、住所欄のテキストボックスへ都道府県・市区町村・町域が入力されます。ハイフン付きの郵便番号にも対応しています。住所の取得にはZipCloud 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="zipcode-address-autofill-textbox_container">

    <form class="zipcode-address-autofill-textbox_form" id="zipcode-address-autofill-textbox-form">

      <!-- 郵便番号を入力するテキストボックス -->
      <div class="zipcode-address-autofill-textbox_field">

        <label class="zipcode-address-autofill-textbox_label" for="zipcode-address-autofill-textbox-zipcode">
          郵便番号
        </label>

        <input class="zipcode-address-autofill-textbox_input" id="zipcode-address-autofill-textbox-zipcode" type="text" name="zipcode" inputmode="numeric" autocomplete="postal-code" maxlength="8" placeholder="例：1000001">

      </div>

      <!-- 取得した住所を表示するテキストボックス -->
      <div class="zipcode-address-autofill-textbox_field">

        <label class="zipcode-address-autofill-textbox_label" for="zipcode-address-autofill-textbox-address">
          住所
        </label>

        <input class="zipcode-address-autofill-textbox_input" id="zipcode-address-autofill-textbox-address" type="text" name="address" autocomplete="street-address" placeholder="例：東京都千代田区千代田">

      </div>

      <!-- 検索結果やエラーを表示する -->
      <p class="zipcode-address-autofill-textbox_message" id="zipcode-address-autofill-textbox-message" role="status" aria-live="polite"></p>

    </form>

  </div>

  <!-- 郵便番号から住所を検索するJavaScriptを読み込む -->
  <script src="script.js"></script>
</body>
</html>

/* =========================================
  郵便番号と住所の入力フォーム全体
========================================= */

.zipcode-address-autofill-textbox_container {
  width: 100%; /* 設置先の横幅に合わせる */
  max-width: 680px; /* 最大横幅。大きくするとフォーム全体が横に広がる */
  margin: 40px auto; /* 上下40pxの余白を設け、左右中央に配置する */
  padding: 36px; /* 内側の余白。大きくすると枠線と入力欄の間隔が広がる */
  border: 1px solid #dbe5f1; /* 外枠の太さと色 */
  border-radius: 18px; /* 外枠の角丸。大きくすると丸みが強くなる */
  background: #f8fafc; /* フォーム全体の背景色 */
  box-sizing: border-box; /* 余白と枠線を横幅に含める */
  font-family: sans-serif; /* フォーム全体のフォント */
}

/* フォーム内の要素に共通のサイズ計算を適用 */
.zipcode-address-autofill-textbox_container * {
  box-sizing: border-box; /* 余白と枠線を要素の幅に含める */
}

/* =========================================
  入力フォーム
========================================= */

.zipcode-address-autofill-textbox_form {
  display: flex; /* 入力項目をFlexboxで配置する */
  flex-direction: column; /* 入力項目を縦方向に並べる */
  gap: 20px; /* 入力項目とメッセージの間隔 */
}

/* 郵便番号・住所の各入力項目 */
.zipcode-address-autofill-textbox_field {
  display: flex; /* ラベルと入力欄をFlexboxで配置する */
  flex-direction: column; /* ラベルの下に入力欄を配置する */
  gap: 10px; /* ラベルと入力欄の間隔 */
}

/* 入力欄のラベル */
.zipcode-address-autofill-textbox_label {
  display: block; /* ラベルをブロック要素として表示する */
  color: #111827; /* ラベルの文字色 */
  font-size: 16px; /* ラベルの文字サイズ */
  font-weight: 700; /* ラベルの文字の太さ */
}

/* 郵便番号と住所のテキストボックス */
.zipcode-address-autofill-textbox_input {
  display: block; /* 入力欄をブロック要素として表示する */
  width: 100%; /* 親要素の横幅いっぱいに広げる */
  padding: 16px; /* 入力欄の内側の余白 */
  border: 2px solid #dbe5f1; /* 入力欄の枠線の太さと色 */
  border-radius: 12px; /* 入力欄の角丸 */
  background: #ffffff; /* 入力欄の背景色 */
  color: #111827; /* 入力文字の色 */
  font-size: 16px; /* 入力文字のサイズ */
  line-height: 1.5; /* 入力文字の行の高さ */
  outline: none; /* ブラウザ標準のフォーカス枠を非表示にする */
  transition: border-color 0.2s ease, box-shadow 0.2s ease; /* 枠線と影の変化を0.2秒で滑らかにする */
}

/* 入力例の文字色 */
.zipcode-address-autofill-textbox_input::placeholder {
  color: #94a3b8; /* プレースホルダーの文字色 */
}

/* 入力欄を選択したときの表示 */
.zipcode-address-autofill-textbox_input:focus {
  border-color: #2563eb; /* フォーカス時の枠線色 */
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); /* 入力欄の外側に3pxの青い影を表示する */
}

/* =========================================
  検索結果・エラーメッセージ
========================================= */

.zipcode-address-autofill-textbox_message {
  min-height: 22px; /* メッセージが空でも表示領域の高さを確保する */
  margin: 0; /* 段落要素の標準余白をなくす */
  color: #dc2626; /* エラーメッセージの文字色 */
  font-size: 14px; /* メッセージの文字サイズ */
  font-weight: 700; /* メッセージの文字の太さ */
  line-height: 1.6; /* メッセージの行の高さ */
  overflow-wrap: anywhere; /* 長いメッセージも領域内で折り返す */
}

/* 住所の取得に成功した場合 */
.zipcode-address-autofill-textbox_message.is-success {
  color: #15803d; /* 成功メッセージを緑色で表示する */
}

/* 住所を検索している場合 */
.zipcode-address-autofill-textbox_message.is-loading {
  color: #2563eb; /* 検索中のメッセージを青色で表示する */
}

/* =========================================
  スマートフォン対応
========================================= */

@media (max-width: 640px) {

  /* 画面幅640px以下ではフォーム全体の余白を調整する */
  .zipcode-address-autofill-textbox_container {
    padding: 24px 18px; /* 上下24px・左右18pxの内側余白 */
  }

  /* スマートフォンでは入力欄の余白を小さくする */
  .zipcode-address-autofill-textbox_input {
    padding: 14px; /* 入力欄の内側の余白 */
  }

}

/* =========================================
  郵便番号から住所を自動入力
========================================= */

(function() {

  // 郵便番号・住所・メッセージの要素を取得
  const zipcodeInput = document.getElementById("zipcode-address-autofill-textbox-zipcode");
  const addressInput = document.getElementById("zipcode-address-autofill-textbox-address");
  const message = document.getElementById("zipcode-address-autofill-textbox-message");

  // 古い検索結果を反映しないための管理番号
  let requestId = 0;

  // 郵便番号から住所を検索する
  async function searchAddress(zipcode, currentRequestId) {

    try {

      // 検索中のメッセージを表示する
      message.textContent = "住所を検索中...";
      message.classList.add("is-loading");

      // ZipCloud APIへ郵便番号を送信する
      const response = await fetch(
        "https://zipcloud.ibsnet.co.jp/api/search?zipcode=" + zipcode
      );

      // 通信結果を確認する
      if (!response.ok) {
        throw new Error("住所データの取得に失敗しました。");
      }

      // APIから返されたJSONデータを取得する
      const data = await response.json();

      // 検索中に郵便番号が変更された場合は反映しない
      if (currentRequestId !== requestId) {
        return;
      }

      // 検索中の表示を解除する
      message.classList.remove("is-loading");

      // APIからエラーが返された場合
      if (data.status !== 200) {
        message.textContent = data.message || "住所を検索できませんでした。";
        return;
      }

      // 該当する住所が見つからなかった場合
      if (!data.results || data.results.length === 0) {
        addressInput.value = "";
        message.textContent = "該当する住所が見つかりませんでした。";
        return;
      }

      // 最初に見つかった住所データを取得する
      const result = data.results[0];

      // 都道府県・市区町村・町域を結合する
      const address = result.address1 + result.address2 + result.address3;

      // 住所欄へ自動入力する
      addressInput.value = address;

      // 検索成功メッセージを表示する
      message.textContent = "住所を自動入力しました。";
      message.classList.add("is-success");

    } catch (error) {

      // 古い検索のエラーは表示しない
      if (currentRequestId !== requestId) {
        return;
      }

      // 通信エラーを表示する
      message.classList.remove("is-loading");
      message.textContent = "住所の取得に失敗しました。インターネット接続を確認してください。";

    }

  }

  // 郵便番号が入力・変更されたときの処理
  function handleZipcodeInput() {

    // 古い検索結果を無効にする
    requestId++;

    // 郵便番号の入力値を取得する
    const value = zipcodeInput.value;

    // ハイフンを除去する
    const zipcode = value.replace(/-/g, "").trim();

    // 前回の住所とメッセージを消去する
    addressInput.value = "";
    message.textContent = "";
    message.classList.remove("is-success", "is-loading");

    // 7桁に満たない場合は検索しない
    if (zipcode.length < 7) {
      return;
    }

    // 7桁の数字ではない場合はエラーを表示する
    if (!/^[0-9]{7}$/.test(zipcode)) {
      message.textContent = "郵便番号は7桁の数字で入力してください。";
      return;
    }

    // 現在の検索管理番号を保存する
    const currentRequestId = requestId;

    // 郵便番号が7桁そろったらすぐに住所を検索する
    searchAddress(zipcode, currentRequestId);

  }

  // 入力内容が変更されるたびに確認する
  zipcodeInput.addEventListener("input", handleZipcodeInput);

})();

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。 免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。 サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。

Q ダウンロードしたけど、これをネット上で動かすにはどうするの？

Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。

InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。

ファイル構成と設置方法

郵便番号から住所を自動入力する仕組みは、HTML・CSS・JavaScriptの3つのファイルで構成されています。郵便番号と住所の入力欄をHTMLで配置し、CSSで入力フォームの外観を整えています。JavaScriptでは郵便番号の入力を監視し、7桁の数字がそろったときにZipCloud APIから住所情報を取得して、住所欄へ反映しています。

sample/
  ├── index.html
  ├── style.css
  └── script.js

各ファイルの役割
index.htmlには、郵便番号と住所を入力する2つのinput要素と、検索状況を表示するメッセージ領域を記述しています。style.cssでは、フォーム全体の横幅・余白・背景色、入力欄の枠線やフォーカス時の表示、検索状況に応じたメッセージの文字色を設定しています。script.jsでは、郵便番号の形式確認、ZipCloud APIへのアクセス、取得した住所の自動入力、検索失敗時のメッセージ表示を行っています。

設置方法・使い方
「サンプル一式をダウンロード」をクリックしてZIPファイルを保存し、展開してください。sampleフォルダ内のindex.html・style.css・script.jsを同じ階層に配置します。
index.htmlをブラウザで開くと、郵便番号と住所の入力フォームが表示されます。郵便番号欄に「1000001」または「100-0001」と入力すると、対応する住所が検索され、取得に成功した場合は住所欄に「東京都千代田区千代田」が入力されます。
住所の取得には外部のZipCloud APIを使用するため、インターネット接続が必要です。ブラウザのセキュリティ設定によってローカルファイルからの通信が制限される場合は、ローカルサーバーやWebサーバー上で動作を確認してください。今回のコードではAPIキーの設定や追加のローカルファイルは必要ありません。

郵便番号と住所の入力欄を取得する方法
script.jsでは、document.getElementById()を使用して、郵便番号の入力欄、住所の入力欄、メッセージの表示先を取得しています。

// 郵便番号・住所・メッセージの要素を取得
const zipcodeInput = document.getElementById("zipcode-address-autofill-textbox-zipcode");
const addressInput = document.getElementById("zipcode-address-autofill-textbox-address");
const message = document.getElementById("zipcode-address-autofill-textbox-message");

zipcodeInputには郵便番号のテキストボックス、addressInputには住所のテキストボックス、messageには検索状況を表示する要素が入ります。
HTML側のidを変更する場合は、JavaScriptのgetElementById()に指定している文字列も同じ名前に変更してください。

郵便番号が7桁そろったときに検索する仕組み
郵便番号の入力欄にはinputイベントを登録しています。文字を入力・削除するたびにhandleZipcodeInput()が実行され、現在の郵便番号を確認します。

// 入力内容が変更されるたびに確認する
zipcodeInput.addEventListener("input", handleZipcodeInput);

handleZipcodeInput()では、最初にzipcodeInput.valueで入力値を取得します。その後、replace()でハイフンを取り除き、trim()で前後の空白を除去しています。

// 郵便番号の入力値を取得する
const value = zipcodeInput.value;

// ハイフンを除去する
const zipcode = value.replace(/-/g, "").trim();

// 前回の住所とメッセージを消去する
addressInput.value = "";
message.textContent = "";
message.classList.remove("is-success", "is-loading");

// 7桁に満たない場合は検索しない
if (zipcode.length < 7) {
  return;
}

// 7桁の数字ではない場合はエラーを表示する
if (!/^[0-9]{7}$/.test(zipcode)) {
  message.textContent = "郵便番号は7桁の数字で入力してください。";
  return;
}

例えば「100-0001」と入力した場合、ハイフンを除去したzipcodeには「1000001」が入ります。zipcode.lengthが7未満の場合は検索せず、7桁以上になった場合は正規表現/^[0-9]{7}$/で7桁の数字だけが入力されているか確認します。
条件を満たした場合は、searchAddress()を呼び出してすぐに検索を開始します。待機時間は設けていないため、検索開始までに意図的な遅延はありません。ただし、住所が表示されるまでの時間は通信状況やAPIの応答速度によって変わります。

// 現在の検索管理番号を保存する
const currentRequestId = requestId;

// 郵便番号が7桁そろったらすぐに住所を検索する
searchAddress(zipcode, currentRequestId);

ZipCloud APIから住所を取得する方法
郵便番号が7桁の数字であることを確認すると、searchAddress()関数内のfetch()を使用してZipCloud APIへアクセスします。APIへ送信する郵便番号には、ハイフンを除去した7桁の数字を使用します。

// ZipCloud APIへ郵便番号を送信する
const response = await fetch(
  "https://zipcloud.ibsnet.co.jp/api/search?zipcode=" + zipcode
);

// 通信結果を確認する
if (!response.ok) {
  throw new Error("住所データの取得に失敗しました。");
}

// APIから返されたJSONデータを取得する
const data = await response.json();

fetch()は外部のAPIへリクエストを送信するための処理です。zipcodeが「1000001」の場合、その郵便番号を検索条件として送信します。
response.okでHTTP通信の結果を確認し、問題がなければresponse.json()で返されたJSONデータをJavaScriptから利用できる形式に変換します。
なお、ZipCloud APIは外部サービスのため、サービスの停止・仕様変更・通信障害などによって住所を取得できなくなる可能性があります。実際のWebサイトで利用する場合は、サービスの利用条件も確認してください。

取得した住所をテキストボックスへ反映する方法
ZipCloud APIから住所情報が返された場合は、data.results[0]で最初の検索結果を取得します。取得した住所情報のうち、address1が都道府県、address2が市区町村、address3が町域に対応しています。

// 最初に見つかった住所データを取得する
const result = data.results[0];

// 都道府県・市区町村・町域を結合する
const address = result.address1 + result.address2 + result.address3;

// 住所欄へ自動入力する
addressInput.value = address;

// 検索成功メッセージを表示する
message.textContent = "住所を自動入力しました。";
message.classList.add("is-success");

取得した3つの住所情報を結合し、変数addressに代入しています。例えば「1000001」の検索結果では、都道府県の「東京都」、市区町村の「千代田区」、町域の「千代田」を結合して「東京都千代田区千代田」という文字列を作成します。
addressInput.value = address;によって、その文字列を住所欄へ自動入力しています。番地や建物名は今回のAPI検索結果からは取得していないため、必要な場合は住所欄に手動で追加入力してください。
今回のコードでは検索結果が複数ある場合もdata.results[0]の最初の1件を使用します。複数候補から住所を選択する機能は実装していません。

住所が見つからない場合と通信エラーの処理
APIから該当する住所が返されなかった場合は、data.resultsを確認してメッセージを表示します。住所欄は空欄のままとなり、利用者が手動で住所を入力することもできます。

// 該当する住所が見つからなかった場合
if (!data.results || data.results.length === 0) {
  addressInput.value = "";
  message.textContent = "該当する住所が見つかりませんでした。";
  return;
}

通信に失敗した場合やJSONデータを取得できなかった場合は、catch内でエラーメッセージを表示します。また、郵便番号を変更した際は前回の住所とメッセージを消去するため、変更前の住所が入力欄に残ることを防いでいます。

// 通信エラーを表示する
message.classList.remove("is-loading");
message.textContent = "住所の取得に失敗しました。インターネット接続を確認してください。";

さらに、検索中に郵便番号が変更された場合に古い検索結果が表示されないよう、requestIdで検索を管理しています。検索開始時の番号と現在の番号が異なる場合は、その検索結果を反映せずに処理を終了します。

// 古い検索結果を反映しないための管理番号
let requestId = 0;

// 検索中に郵便番号が変更された場合は反映しない
if (currentRequestId !== requestId) {
  return;
}

郵便番号と住所の入力値を取得する方法
郵便番号と住所のテキストボックスは、どちらもvalueプロパティで現在の入力値を取得できます。次のコードは値の確認方法を示す説明用の例で、掲載しているscript.jsには含まれていません。

// 郵便番号の入力値を取得する
const zipcodeValue = document.getElementById("zipcode-address-autofill-textbox-zipcode").value;

// 住所の入力値を取得する
const addressValue = document.getElementById("zipcode-address-autofill-textbox-address").value;

// 取得した値をコンソールに表示する
console.log(zipcodeValue);
console.log(addressValue);

郵便番号欄に「100-0001」と入力した場合、zipcodeValueにはハイフンを含む「100-0001」が入ります。住所の取得に成功している場合、addressValueには「東京都千代田区千代田」などの文字列が入ります。
どちらも文字列として取得されるため、郵便番号の先頭にある「0」も保持されます。また、住所欄を手動で編集した場合は、編集後の内容を取得できます。
ブラウザの開発者ツールのコンソールで現在の値を直接確認したい場合は、次のコードも使用できます。

// 郵便番号を確認する
console.log(document.getElementById("zipcode-address-autofill-textbox-zipcode").value);

// 住所を確認する
console.log(document.getElementById("zipcode-address-autofill-textbox-address").value);

入力欄とメッセージのデザインを変更する方法
style.cssの.zipcode-address-autofill-textbox_inputでは、郵便番号と住所の入力欄に共通するデザインを設定しています。padding: 16px;を大きくすると入力欄の内側の余白が広がり、border-radius: 12px;を変更すると角の丸みを調整できます。
入力欄を選択したときの青い枠線は、.zipcode-address-autofill-textbox_input:focusのborder-colorで変更できます。外側の青い影はbox-shadowで設定しており、影の広がりや色を調整できます。

/* 入力欄を選択したときの表示 */
.zipcode-address-autofill-textbox_input:focus {
  border-color: #2563eb; /* フォーカス時の枠線色 */
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); /* 入力欄の外側に3pxの青い影を表示する */
}

検索状況のメッセージは、通常のエラー表示を赤色、検索成功時を緑色、検索中を青色に設定しています。それぞれの文字色は.zipcode-address-autofill-textbox_message、.is-success、.is-loadingのcolorで変更できます。

レスポンシブ対応
フォーム全体にはwidth: 100%;とmax-width: 680px;を指定しています。これにより、広い画面では最大680pxの幅で中央に表示され、狭い画面では設置先の横幅に合わせて縮小します。
max-widthの数値を変更すると、フォーム全体の最大横幅を調整できます。スマートフォンでは画面幅640px以下を条件に、フォームと入力欄の内側余白を小さくしています。

/* =========================================
  スマートフォン対応
========================================= */

@media (max-width: 640px) {

  /* 画面幅640px以下ではフォーム全体の余白を調整する */
  .zipcode-address-autofill-textbox_container {
    padding: 24px 18px; /* 上下24px・左右18pxの内側余白 */
  }

  /* スマートフォンでは入力欄の余白を小さくする */
  .zipcode-address-autofill-textbox_input {
    padding: 14px; /* 入力欄の内側の余白 */
  }

}

画面幅が640px以下になると、フォーム全体の内側余白は上下36pxから24px、左右36pxから18pxへ変更されます。入力欄の余白も16pxから14pxへ変更されるため、スマートフォンでも郵便番号と住所を入力しやすい表示になります。