サイトをリニューアルしたら、IEでログイン時のオートコンプリート（フォーム入力内容をブラウザが保存しておいて、自動的に入力してくれる機能）が使えなくなってしまう現象が出た。
悩んだ割に単純だったその理由。
フォーム送信の方法で、条件が揃わないと保存対象の送信とみなされないようです。今回はデザイン会社さんの作ってくれたリニューアルデザインをそのまま組み込んだので、問題が発生してしまった。
autocomplete が使えるフォーム送信の条件
以下のいずれか。
- <input type=”submit”> で普通にフォーム送信
- <input type=”image”> で普通にフォーム送信（onClick などを付けなくても type=”submit” の場合と同様に送信できる。）
- <input type=”image” onClick=”this.form.submit()”> で送信。return false; を付けない。
autocomplete が使えなくなったパターン
- <input type=”image” onClick=”this.form.submit(); return false;”> で送信。
フォームは送信できるが、これで送信すると autocomplete の値保存の対象とならない。今回デザイン会社さんの作ってくれたフォームを、「デザイン上の都合で付いているのかな～」と深く考えずにそのまま実装したらこの問題が発生。 - <input type=”button” onClick=”this.form.submit(); return false;”>
- <input type=”button” onClick=”this.form.submit();”>
type=”button” の場合は、”return false” するか否かにかかわらず autocomplete の値保存の対象とならない。
検証環境
Windows ＸＰ、ＩＥ7。
autocomplete が「<input type=”image” onClick=”this.form.submit(); return false;”>」で無効になる現象については、客先含めてもっと多くの環境で発生しました。