概要
このページでは、 formrun.js
を利用した郵便番号による住所補完機能の設定方法を紹介します。
formrun.js
の概要や他のバリデーション機能については、別ページをご覧ください。
郵便番号による住所補完機能の設定方法
formrun.jsの読み込み
このページの機能を利用する場合には、下記 formrun.js
を <head>内
で読み込み、 Formタグ
に formrun
というクラスを付与する必要があります。
<head> ... <script src="https://sdk.form.run/js/v2/formrun.js"></script> </head> <body> ... <form class="formrun" action="https://form.run/api/v1/r/<フォーム設定ページで指定される値>" method="post"> ... </form> ... </body>
※ formrun.js
を利用する場合は、以前の sdk.js
との併用はできません。
郵便番号による住所補完
タグに data-formrun-type="postal-code-jp"
属性を指定します。
郵便番号を入力すると対応するフィールドに住所が反映されます。
住所に対応するフィールドは data-formrun-type="region locality street-address"
という記述で指定します。
それぞれ、reagion
が都道府県
に、locality
が市区町村
に、street-address
が町名
に対応します。
該当する町名が存在しない場合は空になります。
data-formrun-type
の値を別々に記入することで、住所の複数フィールドにも対応できます。
<!-- マークアップ例1 (住所を1つにまとめる場合) --> <input type="text" name="郵便番号" data-formrun-type="postal-code-jp"> <input type="text" name="住所" data-formrun-type="region locality street-address"> <!-- マークアップ例2 (住所を複数フィールドに分割する場合) --> <input type="text" name="郵便番号" data-formrun-type="postal-code-jp"> <input type="text" name="住所" data-formrun-type="region"> <input type="text" name="住所" data-formrun-type="locality street-address" >
備考 | |
---|---|
設置可能場所 | Inputタグ type="text" |
都道府県タグの自動設定
Selectタグに data-formrun-type="prefecture-jp"
を指定します。
この機能を利用すると、都道府県を列挙した <option>タグ
が自動で設定されるので、<option>タグ
を記述する必要がなくなります。
この設定と data-formrun-type="region"
を併用することで、郵便番号による自動補完機能も利用できます。
<!-- マークアップ例 --> <input type="text" name="郵便番号" data-formrun-type="postal-code-jp"> <select name="都道府県" data-formrun-type="region prefecture-jp"></select>
備考 | |
---|---|
設置可能場所 | Selectタグ |
サンプルコード・動作デモ
See the Pen formrun.js (Postal Code JP) by Masato TADA (@tady) on CodePen.