ウェブ学のすすめ

Study of Web Design & Programing

郵便番号検索が簡単に実装できる!ajaxzip3を試す

郵便番号検索が簡単に実装できる「ajaxzip3」を試してみました。
データベースを使わずに簡単に郵便番号検索を設置できてしまいます。

プレビュー

↓郵便番号を入力すると....住所を自動入力してくれます!

DEMO:ajaxzip3 - js do it


実装方法

1.head内に

<script src="http://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3.js" charset="UTF-8"></script>

2.body内に

郵便番号:<input type="text" name="zip21" size="4" maxlength="3"><input type="text" name="zip22" size="5" maxlength="4" onKeyUp="AjaxZip3.zip2addr('zip21','zip22','pref21','addr21','strt21');">
都道府県:<input type="text" name="pref21" size="40">
市区町村:<input type="text" name="addr21" size="40">
以降の住所:<input type="text" name="strt21" size="40">

ソース

HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプル</title>
<script src="http://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3.js" charset="UTF-8"></script>
</head>
<body>
    <table>
        <tr><th>郵便番号</th><td><input type="text" name="zip21" size="4" maxlength="3"><input type="text" name="zip22" size="5" maxlength="4" onKeyUp="AjaxZip3.zip2addr('zip21','zip22','pref21','addr21','strt21');"></td></tr>
        <tr><th>都道府県</th><td><input type="text" name="pref21" size="20"></td></tr>
        <tr><th>市区町村</th><td><input type="text" name="addr21" size="20"></td></tr>
        <tr><th>以降の住所</th><td><input type="text" name="strt21" size="20"></td></tr>
    </table>
</body>
</html>
CSS
table,td,th {
    border:1px solid #333;
    border-collapse:collapse;
}

td,th {
    padding:10px;
}

th {
    background:#0283d5;
    color:#fff;
}