<html>
<head>
<meta charset="UTF-8">
<title>【jQuery】郵便番号から.....</title>
<!--ajaxzip3-->	
<script src="https://ajaxzip3.github.io/ajaxzip3.js"></script>
</head>
<body>

<form>
  <div>
   <label>郵便番号(ハイフンもOK)</label>
    <input type="text" name="zip01" maxlength="8" placeholder="1234567" onKeyUp="AjaxZip3.zip2addr(this,'','pref01','addr01');">
  </div>
  <div> 
   <label>都道府県</label>
   <input type="text" name="pref01" placeholder="愛知県">
  </div>  
  <div>
   <label>以降の住所</label>
   <input type="text" name="addr01" placeholder="名古屋市・・・">
  </div>
</form>

</body>
</html>
form {
  width: 80%;
  margin: 0 auto;
  padding: 2em;
  box-sizing: border-box;
  background-color: #f9f9f9;
}

label {display: block;}

input[type="text"] {
  width: 100%;
  padding: .5em;
  font-size: 16px;
  border: solid 2px #cccccc;
  border-radius: 5px;
  box-sizing: border-box;
}

form div + div {margin-top: 1em;}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.