小粋空間  -  a cheap joke and a play on words site

フォームのオートコンプリートについて

フォームのオートコンプリートについて調べたので、本エントリーにて紹介します。HTMLビギナー向けの記事です。

１．オートコンプリートとは？

オートコンプリートとは、フォームに入力した値を次回入力時に候補値として表示する機能です。

例えば、次のようにフォームに「hoge」を設定して送信したとします。

別の機会に、同じフォームに値を入力する場合、該当のフィールドをフォーカスしてクリックすれば、前回（それ以前を含む）入力時の値が候補として表示されます。候補に合致する先頭文字を入力しても同様に表示されます。

ときどき候補が表示されないサイトに出会いますが、理由はオートコンプリート機能を無効にしているためです。

余談ですが、フォームに前回の値を表示する仕組みは、name属性やid属性を使っているようです。おそらくブラウザがURLとname属性またはid属性をキーにした入力値のリストを保持していると思われます。

試してみたところ、id属性・name属性が設定されていないフィールドではオートコンプリートは機能しませんでした。

２．オートコンプリートの有効・無効はどうやって切り替えるの？

オートコンプリートの有効・無効は、autocomplete属性を使って切り替えます。

この属性は、HTML4.01では仕様として規定されていませんでしたが、HTML5では仕様として規定されました。

4.10.19.8 Autofilling form controls: the autocomplete attribute

３．オートコンプリートを有効にするには？

「autocomplete="on"」をform要素または有効にしたいinput要素などに設定します。

<form autocomplete="on" ... >
…中略…
</form>

ただし、autocomplete属性のデフォルト値は「on」なので、オートコンプリートを有効にしたい場合、この属性を積極的に設定する必要はありません。

４．フォーム全体のオートコンプリートを無効にするには？

フォーム全体のオートコンプリートを無効にするには、form要素に「autocomplete="off"」を設定します。

<form autocomplete="off" ... >
…中略…
</form>

５．フィールド別にオートコンプリートを無効にするには？

フィールド別にオートコンプリートを無効にしたい場合、該当の要素に「autocomplete="off"」を設定します。

<form ... >
  <input type="text" autocomplete="off" ... />
</form>