If you’ve used a mobile device (e.g. iPhone, iPad, Android phone or tablet) to fill out web forms you’ll often find the @ symbol is present on the on-screen keyboard in email fields sometimes, but not always. Use type="email" instead of type="text" in the input field and it should show the at symbol on the on-screen keyboard.
Input type="email"
Normally text input fields look something like this:
<input type="text" ... >
To make the field an email input field so that it has the at symbol on mobile devices on-screen keyboards, do this:
<input type="email" ... >
Other differences with a regular text input
Depending on the browser and version you are using, there will also be client-sided validation of the email input to ensure it matches the following regular expression:
/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$/
If the field is not required it can be submitted blank; if it’s required or some text is entered into the input, the validation is done and the form won’t be submitted unless the address is valid.
Web browsers that don’t support type="email" will simply render the input as a normal text input.
Example screenshots from an iPhone
The following screenshots are from an iPhone using the iOS simulator. The input field in the phone on the left has <input type="text"> and the one on the right <input type="email">. As you can see, the on screen keyboard on the left has no @ symbol whereas the one on the right does.
Browser compatibility
As mentioned above, if the browser doesn’t support type="email" it will treat the input as if it were type="text".
From my testing with the iOS Simulator, versions 4.3.2 and 5.1 will show the @ symbol when it’s an email input, but don’t do the regular expression validation. I haven’t tested other versions.
The only testing I did on Android is on my LG Android 2.2.1 phone. When using either the LG keyboard or the Android one, it didn’t show the @ symbol and in neither case did the validation. I don’t know if this is addressed in later versions of Android or not.
If anyone knows of a compatibility table for this input type, please let me know and I can link to it from here.
Further reading
The input type=email page on the W3C website has a list of all the available properties for this element and a brief description of each.
