 --> (Word) |  --> (PDF) |  --> (Epub) |  --> (Text) |
 --> (XML) |  --> (OpenOffice) |  --> (XPS) |  --> (MHT) |
If you've used a mobile device (e.g. iPhone, iPad, Android phone or [gs tablet]) to fill out web [gs form]s 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 [gs 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 [gs device]s 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 [gs 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 [gs screenshot]s 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.
When using either the LG keyboard or the Android one, it didn't show the @ symbol and in neither case did the validation.
If anyone knows of a compatibility table for this input type, please let us know and we 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.
SOURCE | LINK | LANGUAGE | ENGLISH |
 |  | ||