郵便番号検索が簡単に実装できる!ajaxzip3を試す
郵便番号検索が簡単に実装できる「ajaxzip3」を試してみました。
データベースを使わずに簡単に郵便番号検索を設置できてしまいます。
実装方法
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; }