入力履歴を活用するフォームを作るには
「他サイトで入力された履歴を利用する入力フォーム」の作成はとても簡単です。 普通にinput要素を用いて入力欄を作るだけです。その際、ただ1点だけ工夫を加えます。
■Googleの例
Googleの履歴を出せる入力欄を作るには、以下のように記述します。
※属性をいろいろ省略しています。実際に活用する際には、必要な属性を加えて下さい。
<input type="text" name="q">
</form>
たったのこれだけです。
これを表示させると、以下のように見えます。ダブルクリックすると、Googleで過去に検索した履歴が表示されます。
※今お使いのブラウザで過去に検索したことがあり、履歴を保存する設定になっている場合のみ。
Googleの履歴を出せる入力欄を作るには、input要素のname属性の値を「 q 」にすれば良いだけです。たったこれだけです。
ブラウザの入力補完機能は、入力欄のname属性の値ごとに保持されています。ですから、Googleが検索窓に利用しているname属性値と同じ値を使って入力欄を作れば、それだけでGoogleでの履歴を表示させられるのです。
※name属性の値を「 q 」にして入力欄を作っているサイトは、Google以外にもたくさんあります。ですから、それらのサイトでの入力履歴も（利用したことがあれば）同時に表示されます。
■Yahoo! Japanの例
Yahoo! Japanでの履歴を出せる入力欄は、以下のように記述します。
<input type="text" name="p">
</form>
input要素のname属性値を「 p 」にするだけです。
表示させると、以下のように見えます。ダブルクリックすると、Yahoo! Japanでの検索履歴が出てきます。
※今お使いのブラウザで過去に検索したことがあり、履歴を保存する設定になっている場合のみ。
※name属性の値を「 p 」にして入力欄を作っているサイトは、Yahoo! Japan以外にもたくさんあります。ですから、それらのサイトでの入力履歴も（利用したことがあれば）同時に表示されます。
■Amazon.co.jpの例
同様に、Amazon.co.jpの場合は以下のように記述します。
<input type="text" name="field-keywords">
</form>
input要素のname属性値を「 field-keywords 」にするだけです。
表示させると、以下のように見えます。
今お使いのブラウザで、過去にAmazon.co.jpで検索したことがあれば、上記の入力欄をダブルクリックすることで過去の検索履歴が表示されるはずです。
さて、上記のように、各検索サイトなどでの検索履歴を活用できてもあまりメリットはないかも知れません。 便利なのは、「名前」や「メールアドレス」など、様々なサイトで頻繁に入力しているであろう項目を、過去の履歴から補完できるようにした入力欄です。
次のページでは、それらの入力欄を作ってみましょう。
