提携パートナー連絡フォームその他その他のお問い合わせホームページ運営ブログBlogホームページのことを中心にためになるかもしれないことをいろいろと書いています。ホームページ制作のことからSEOや広告、マーケティングの話まで思いついたことを語っています。今日は郵便番号から住所を自動入力するスクリプトの紹介します。問い合わせフォーム等で住所の入力が必要な時に、郵便番号から自動的に住所が入力されるのってよく見ますよね。ホームページ制作の仕事をしていると、結構な確率でお客さんにを入れて欲しいと言われるので、最近はほぼ全員に入れるようにしています。弊社でも使っている非常に簡単に設置できて優秀なスクリプトを紹介しますね。以前からこの仕組みを入れたいと思っていた人も多いかもしれません。難しそうだなぁと思ってなかなかできなかった人も多いのではないでしょうか。実はむちゃくちゃ簡単にできるので、これを機に導入してみてください。「yubinbango」というもので、こちらのサイトからソースコードをダウンロードできます。yubinbango.js設置方法は非常に簡単なので、ダウンロードURLに書かれている説明だけでも十分に設置できると思いますが、ここでも簡単に紹介しておきましょう。設置方法jsファイルをダウンロードまずはファイルのダウンロードです。yubinbango.jsより、ファイルをダウンロードしてください。この中で使用するのはyubinbango.jsだけです。スクリプトの読み込みさて、次に先ほどダウンロードしたファイルからyubinbango.jsを任意の場所においてください。「/js/yubinbango.js」みたいな感じですね。使用したいHTMLファイル内で、このスクリプトを読み込みましょう。charset="UTF-8"></script>githubにあがっているものを直接参照するならこんな感じ。charset="UTF-8"></script>フォームの設定これでスクリプト自体は読み込めたはずなので、あとは実際に自動入力を実装します。これはテンプレのようなコードがあるのでまずこれを設定しましょう。/><br></form>たったこれだけ!!DEMOJapan〒スクリプト何も書いてないじゃん!って思いますが、クラス名を見ていろいろと勝手に処理してくれてます。入力する郵便番号を分けてみよう先ほど設置したテンプレで、郵便番号を入力する部分を分けたいと思ったかもしれません。単純に、クラス名をそのままで郵便番号入力欄を2つにするだけ。–はい、これも簡単でしたね。何も考えなくても、クラス名のルールだけ守っていたらいいんです。住所欄を分けてみよう住所を分けたいっていう場合もあるでしょう。住所に関する入力欄はこのようになってましたね。/>クラス名の部分をそれぞれ分けるだけで対応できます。p-extended-address”単純にすべて分けてみましょう。分けるのは簡単でしたね。都道府県だけ分けたければこんな感じです。/><br></form>必要な入力項目の数だけinputタグを用意して、入力させたいクラス名を入れるだけですね。都道府県をセレクトボックスで用意しておくと、入力をセレクトボックスにすることもできます。非常に簡単だったと思います。郵便番号分ける、住所を分けるなど自分で使っているフォームの入力スタイルというのがそれぞれあると思います。一度作ったものをテンプレートして残しておくと、今後はコピペで簡単に自動住所入力は設置できるようになります。使ってみてくださいね。設置が簡単!郵便番号から自動で住所入力してくれるスクリプト「ajaxzip3」を紹介HTMLフォームの入力候補を出さないようにするにはautocompleteを使うカレンダーからフォームへ簡単入力「datepicker」。特定日を選択できないようにする方法を紹介。テキストを動かしたいならこれ!Javascript(jQuery)で様々なバリエーションの動きを表現できるスクリプト。メールでのご相談・お問い合わせjQueryプラグインホームページの作り方JavaScript投稿ナビゲーション前の投稿アウトライン化って何?イラストレーターでWEBデザイン。フォントのアウトライン化について知っておこう。次の投稿テキストを動かしたいならこれ!Javascript(jQuery)で様々なバリエーションの動きを表現できるスクリプト。ご相談から、ホームページを作るのがはじめての方も気軽にお問い合わせ下さい。無料お見積りAIチャットで質問AIチャットでご質問くださいホームページの制作について聞きたいことはありませんか。AIがあなたの質問にお答えします。下のフォームに質問文を入れて聞いてみてください。|関東の方もホームページの制作を対応いたします。reserved.ホームページ制作YCOMトップホームページに必要な費用ホームページ制作料金ホームページ制作の流れオリジナルホームページホームページ制作実績ホームページ活用事例お客様の声よくある質問お問い合わせホームページの制作見積り依頼パートナー募集フォーム。