O'Reilly logo

Programming the Mobile Web, 2nd Edition by Maximiliano Firtman

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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, 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 method="GET" or "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.

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

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required