導入手順の詳細と設定オプションは GitHub 上で解説しています。

ここではチュートリアルとしていちばん簡単なウェブフォームに機能を追加する過程を例を使って紹介します。

陽気に郵便番号検索チュートリアル

ビフォー

最も簡単な住所入力フォームとして次のようなHTMLを題材にしてみます。

ブラウザでは次のように見えます。

このHTMLに挿入するのは２箇所です。

アフター

独自の記述が必要な部分

特にHTMLフォームに特化した記述が必要な YZipCode に関わる記述部分を解説します。

まず、機能を実装する（検索の文字列の元、キー入力に応じて反応する部分）HTMLの要素を特定します。

一般に要素に id 属性がついている場合は簡単です。スタイルシートでおなじみの #id というセレクタ で指定が可能です。

id がない場合は、上の階層から指定する方法を探ります。今回の例では form タグに id があるので これを起点に input タグを選択します。

#sampleForm1 input[name=zipcode]

name 属性に zipcode という値がある input 要素を選択します。 これらを YZipCode の初期化オプションとして指定すると次のようになります。

new YZipCode({ zipcode:"#sampleForm1 input[name=zipcode]", address:"#sampleForm1 input[name=address]" });