Forms are a key issue on mobile devices. While some people claim that typing on mobile devices is painful, we can see how much typing happens today on mobile devices: from SMSs, WhatsApp, Twitter and Facebook. Even being not as much confortable as on desktops, users are typing a lot on mobile devices and it’s our job to make it a good experience.
The input controls for maximize compatibility and accessibility should be inside the classic
form tag, with
"POST" and the
action URL as any web form. If we want to use AJAX or any other way of rich behavior it’s fine but be sure to always have a fallback mechanism to a basic HTML form.
Avoid using tables for form layout. The best solution is to use definition lists, labels, and input controls. Using CSS you can enhance the form and even with different layouts for different devices and orientations. If you start your design with a fixed-layout from the HTML, such as using tables, you will not have the ability to modify it from CSS.
Old BlackBerry Smartphones -not BB10- allowed offline form submission. If the device was offline when the user completes the form, it was placed in a queue and was automatically submitted when the device went back online.
A typical key/value form should look like this:
<form action="formAction" method="post"> <dl> <dt><label for="name">Name</label></dt> <dd><input type="text" name="name"></dd> </dl> </form>
The usage of the
label tag is very important for mobile ...