たった2行で実現できるユーザービリティの高いフォームの作り方

Pocket
[`evernote` not found]

人様が作ったライブラリなのですが、とてもとても便利なのでシェアさせて頂きたいと思います。

Kawa.netxp AjaxZip 2.0

お問い合わせフォームなどで住所を入力する欄で使える入力アシスタント機能が文字通りたったの2行で実現できるライブラリです。詳しくは、配布元サイトをご覧頂ければいいかと思いますが、基本的な構造はこんな感じ。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="jquery.zip2addr.js"></script>

<script type="text/javascript">
$(function(){
     $('#zip').zip2addr('#addr')
});
</script>

<dl>
  <dt>郵便番号</dt>
    <dd><input type="text" name="" id="zip" size="8"/></dd>
  <dt>住所</dt>
    <dd>
      <input type="text" name="" id="addr" size="34" />
  </dd>
</dl>

DEMO

送信前のhtmlに対してjqueryを使って住所を補完していますので、java scriptが使える環境であれば、だいたいどこでも実装可能かと思います。(実例として、僕が使っているCMSのお問い合わせフォームでも実装できました。)

今回のデモの他に、配布元のサンプルには、都道府県を分けるパワーンとかいくつか掲載してますので、用途に合わせて使えるんじゃないでしょうか。

この手の機能は、あればあるに越したことがないと思いますが、実装が手間だったりしてどうしても見て見ぬふりをしがちな部分です。これだけ簡単に実装できるのであれば、使わない手はないかと。

住所に限らず、フォームは入力の手間をできるだけ省いて、ユーザービリティをきちんと考えて実装できるようにしたいですね。

Follow me!

Pocket
[`evernote` not found]

コメントは受け付けていません。