Programming the Mobile Web, 2nd Edition

Chapter 8. HTML5 Forms

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 to WhatsApp, Twitter, and Facebook. Even if typing on these devices is not as comfortable as on desktops, users are doing a lot of it, and it’s our job to make it as good an experience as possible.

To maximize compatibility and accessibility, the input controls should be inside the classic form tag, with method="GET" or "POST" and action="serverScriptURL". If we want to use Ajax or any other sort of rich behavior, that’s fine, but we must be sure to always have a basic HTML form as a fallback.

Form Design

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.

Note

The older BlackBerry browser for smartphones—not BB10—allowed offline form submission. If the device was offline when the user completed 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 the following code:

<form action="formAction" method="post">
  <dl>
     <dt><label for="name">Name</label></dt>
     <dd><input type="text" name="name"></dd>
  </dl>
</form>