みなさんこんにちは！おさかなです！
今回は「【HTML】だけで！郵便番号から「住所」を自動入力する方法！」について、書いていこうと思います！
それでは、レッツゴー！！！！！
想定読者
・HTMLを勉強中の人
・お問い合わせフォームを作成中の人
・住所の自動入力を実装したい人
・HTMLを勉強中の人
・お問い合わせフォームを作成中の人
・住所の自動入力を実装したい人
<head>内にコードを貼り付ける
まず、下記コードを<head></head>の間に貼り付けてください。
<script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>
入力画面の作成
次に「郵便番号」と「住所」の入力画面を作成します。
下記コードを<body></body>の間に貼り付けて、CSSでスタイルを付けてみてください！
<!-- 郵便番号入力(7桁) --> <input type="text" name="zip" size="10" maxlength="8" onKeyUp="AjaxZip3.zip2addr(this,'','adress','adress');"> <!-- 住所入力(都道府県+以降の住所) --> <input type="text" name="adress" size="60">
記入するコードはこれだけ！
おさかな
とってもかんたん！
動作確認をしていこう！
それでは実際に「郵便番号」を入力して、動作確認をしていきましょう！
「100-0000」と入力すると、こんな感じで「東京都千代田区」が自動で入力されているのがわかるかと思います！
感想・まとめ
今回は「【HTML】だけで！郵便番号から「住所」を自動入力する方法！」について、書いていきました…！
いかがだったでしょうか？
住所の自動入力はユーザビリティを考える上でも必須項目の1つなので、ぜひ積極的に活用できるようにしておくと良いでしょう！
(おさかなもがんばります…！)
おさかなびではプログラミング学習中の人、ブログ初心者に向けて、「デジタル時代を楽しむためのミニ知識」をご紹介しています！
ぜひ他のページも覗いてみてください…！
それでは今回はこの辺で！
ここまで読んでくださり、ありがとうございました！
おさかなでした！
【おさかなび-osakanav-】では、この記事の感想！おさかなへの応援メッセージ！おさかなに聞きたい事、質問！記事にしてほしい内容！などを大募集中！
「氏名」「メールアドレス」「内容」の3点をご記入の上「osakana1699@gmail.com」までご応募ください！
