iPad spell check thwarts sign-in attempts

Quick answer
In order to disable iPad's spell check the HTML form action must contain the word "login":

<form action="/login" ... >
...
</form>

Details
For some websites the iPad does not try to spell check email addresses that are a part of sign-in forms. But for many websites, it does. It's annoying.

I often have my sign-in attempt thwarted because I didn't realize my email address was 'corrected'. And when I am aware that iPad is being smart, I have to wait to type a full word and then go up to click on the 'x' to dismiss the suggested correction. And because it's hit or miss on different websites, I am always tentative when signing in, which adds to the frustration.

So, I vowed when creating my new web app that I would ensure my sign-in forms worked in a way that did not invoke the spell-checker. However, my out-of-the-box Rails 3 and Devise web app was invoking the spell checker:


Bummer. What was the difference in the HTML between the websites that invoked the spell-check and the websites that did not? Here's what I found out:

I assumed that iPad was looking at the names of the input fields to determine if it should spell check. So, I looked at sites that invoke the spell checker, like:

Ta-da List: http://123.tadalist.com/session/new
GitHub: https://github.com/login

and those that did not invoke the spell checker, like:

GMail: https://www.google.com/accounts/ServiceLogin?service=mail&ltmpl=ecobx&btmpl=mobile
Heroku: https://api.heroku.com/login

Ta-da List uses name="username" for the input text field while GitHub uses name="login". On the other hand, GMail uses name="Email" and Heroku use name="email". That must be it! It's doing a case-insensitive match for name="email".

But, no. After tweaking the HTML in my new app, it didn't work. I kept getting the spell checker in my form.

After trying many variations, I finally discovered the solution:

In order to get iPad to not invoke the spell checker on an email field while signing-in, the action on the form tag must contain the text "login". It can be capitalized or not. It can be surrounded by other text or not. But the form action must contain the characters "login".

GMail:
form action="https://www.google.com/accounts/ServiceLoginAuth"

Heroku:
form action="/login"

I am using Ruby on Rails and Devise for authentication. So for my web app, I followed the directions here:

http://wiki.github.com/plataformatec/devise/howto-change-routes-for-default-scope-to-login-logout

to change my form from using action="sign_in" to using action="login".

Now my sign-in form on the iPad behaves nicely with no spell checker: