Form - 郵便番号から住所を自動入力

郵便番号から住所を自動入力する

住所

※全角でも半角でもハイフンがあってもなくてもOK
郵便番号を入力すると市町村名までは自動で表示されます

〒

住所 


//CDN : HEAD内に記述
<script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>

//Body
<form action="./" method="post" enctype="multipart/form-data" class="h-adr">
  <input type="hidden" class="p-country-name" value="Japan">
  <dl>
    <dt>住所</dt>
    <dd><p>郵便番号を入力すると市町村名までは自動で表示されます。</p>
      <p>&#12306; <input type="text" class="p-postal-code w9" maxlength="8"> 
          ※全角でも半角でもハイフンがあってもなくてもOK</p>
      <p>住所 <input type="text" class="p-region p-locality p-street-address p-extended-address"></p></dd>
  </dl>
</form>
住所

郵便番号を入力すると市町村名までは自動で表示されます。

〒 -

都道府県名：

市町村名：

以降住所： 


//CDN : HEAD内に記述
<script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>

//Body
// formタグのclass指定の中に h-adr が含まれていること
<form action="path/to/mailform/program" method="post" enctype="multipart/form-data" class="h-adr">

// form中で、国名(p-country-name) が Japan に指定されていること
<input type="hidden" class="p-country-name" value="Japan" >

※以下、name属性値はメールフォームプログラムによる。

// 郵便番号入力欄のclass指定の中に p-postal-code が含まれていること
  例1: まとめて表示（全角・半角、ハイフンの有る無しはフォームプログラムによるので確認）
        〒 <input type="text" class="p-postal-code" maxlength="8" >
  例2: ハイフンで分けて表示
        〒<input type="text" class="p-postal-code" maxlength="3" >
         - <input type="text" class="p-postal-code" maxlength="4" >

// 住所欄のclass指定の中に それぞれキーワードが含まれていること
		都道府県名(p-region)
		市町村区(p-locality)
		町域(p-street-address)
		以降の住所(p-extended-address) 

	例1: まとめて表示
		住所：<input type="text" name="住所[value]" class="p-region p-locality p-street-address p-extended-address" >
	例2: 分けて表示
		都道府県名：<input type="text" class="p-region" >
		市町村名：<input type="text" class="p-locality p-street-address" >
		以降住所：<input type="text" class="p-extended-address" >
</form>

TOP