<html>
<head>
<meta charset="UTF-8">
<title>formrun.js - Postal Code JP</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" integrity="sha384-MIwDKRSSImVFAZCVLtU0LMDdON6KVCrZHyVQQj6e8wIEJkW4tvwqXrbMIya1vriY" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.slim.min.js" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/js/bootstrap.min.js" integrity="sha384-ux8v3A6CPtOTqOzMKiuo3d/DomGaaClxFYdCu2HPMBEkf6x2xiDyJ7gkXU0MWwaD" crossorigin="anonymous"></script>
<script src="https://sdk.form.run/js/v2/formrun.js"></script>
</head>
<body>
<div class="container">
<h1>formrun.js <small> - Postal Code JP</small></h1>
<div class="card">
<h3 class="card-header">住所自動補完</h3>
<div class="card-block">
<form class="formrun" action="#" method="get">
<div class="form-group"
data-formrun-class-if-success="has-success" data-formrun-class-if-error="has-danger" data-formrun-target="住所">
<label class="form-control-label" for="email">住所</label>
<div class="row">
<div class="col-xs-4">
<input type="text" class="form-control" name="郵便番号" placeholder="郵便番号"
data-formrun-required data-formrun-type="postal-code-jp">
</div>
<div class="col-xs-3">
<input type="text" class="form-control" name="都道府県" placeholder="都道府県"
data-formrun-required data-formrun-type="region" data-formrun-class-if-success="form-control-success" data-formrun-class-if-error="form-control-danger">
</div>
<div class="col-xs-5">
<input type="text" class="form-control" name="住所2" placeholder="住所2"
data-formrun-required data-formrun-type="locality street-address" data-formrun-class-if-success="form-control-success" data-formrun-class-if-error="form-control-danger">
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-3 offset-xs-4">
<select class="form-control" name="都道府県"
data-formrun-required data-formrun-type="region prefecture-jp"></select>
</div>
<div class="col-xs-5">
<input type="text" class="form-control" name="住所2" placeholder="住所2"
data-formrun-required data-formrun-type="locality street-address" data-formrun-class-if-success="form-control-success" data-formrun-class-if-error="form-control-danger">
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-8 offset-xs-4">
<input type="text" class="form-control" name="住所" placeholder="住所"
data-formrun-required data-formrun-type="region locality street-address" data-formrun-class-if-success="form-control-success" data-formrun-class-if-error="form-control-danger">
</div>
</div>
<p class="text-danger" data-formrun-show-if-error="郵便番号">郵便番号を正しく入力してください</p>
<p class="text-danger" data-formrun-show-if-error="都道府県">都道府県を正しく入力してください</p>
<p class="text-danger" data-formrun-show-if-error="住所2">住所を正しく入力してください</p>
</div>
<div class="_formrun_gotcha">
<style media="screen">._formrun_gotcha {position:absolute!important;height:1px;width:1px;overflow:hidden;}</style>
<label for="_formrun_gotcha">If you are a human, ignore this field</label>
<input type="text" name="_formrun_gotcha" id="_formrun_gotcha" tabindex="-1">
</div>
<div>
<button type="submit" class="btn btn-primary pull-xs-right" data-formrun-error-text="未入力の項目があります" data-formrun-send-text="送信する" data-formrun-submitting-text="送信中...">送信</button>
</div>
</form>
</div>
</div>
</div><!-- /.container -->
</body>
</html>
body {
padding: 50px 0 100px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.