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

	<form>
		<div>
		  <label>郵便番号(3桁と4桁)</label>
		  <input type="text" name="zip21" maxlength="3" placeholder="123" class="wi20"> － <input type="text" name="zip22" maxlength="4" placeholder="4567" class="wi20" onKeyUp="AjaxZip3.zip2addr('zip21','zip22','pref21','addr21','strt21');">
		</div>
		<div>
		  <label>都道府県</label>
		  <input type="text" name="pref21" placeholder="愛知県">
		</div>
		<div>
		  <label>市区町村</label>
		  <input type="text" name="addr21" placeholder="名古屋市">
		</div>
		<div>
		  <label>以降の住所</label>
		  <input type="text" name="strt21" 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;}

.wi20 {width: 20% !important;}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.