Touch devices are forcing us to rethink how people interact our products — and forms are no exception. Fact is, tiny keyboards require users to switch layouts and use precision that their fingers can't always achieve. The result: frustrating typos and invalid data entry.

Luckily the makers of iOS and Android saw the problem and, with some little-known, valid HTML, made keyboards easier to work with based on context. Here are different ways to improve input fields' usability on mobile devices.

Use the best keyboard

Both iOS and Android let you switch types of keyboards depending on need. For example, email addresses need the atmark symbol, @. There's a keyboard with that special character right there next to the spacebar — if you tell the browser that it's needed. The code is simple:

<input type="email">

The result is convenient:

 

The atmark used to be buried behind the "123" key. Now it's next to the space bar at all times. This slight change will save users from having to dig through different layouts beyond the default keyboard in search of the atmark.

And <input> does more than email. At the time of this writing, there are 23 different types including these that most mobile devices recognize:

• <input type="url"> — web address
• <input type="tel"> — telephone keypad
• <input type="number"> — numeric keypad
• <input type="range"> — a number slider
• <input type="date"> — year, month and date scroll wheels
• <input type="month"> — month and year scroll wheels
• <input type="time"> — hour and minute scroll wheels

These different types help your mobile users enter the correct types of information in each appropriate field.

Turn off automatic "helpers"

Spell check and autocomplete work wonders … hypothetically. Maybe even theoretically. But practically, forms with unusual entries, like serial numbers or names, could do with a little less help.

You can disable mobile browsers' auto assistance with four attributes per input field:

• spellcheck="false"
• autocorrect="off"
• autocomplete="off"
• autocapitalize="off"

For example:

<input type="text" spellcheck="false" autocorrect="off">

The result does what the attributes imply: Spell check will no longer try to "fix" names and unusual spellings — ZURB usually becomes Curb, for example. Silly autocorrect, turning a product design company into asphalt.

Prevent zooms

Sometimes browsers get over-eager in their attempt to help users out. At least, that's what we make from their tendency to zoom in on an active input field. That's fine for desktop sites in mobile browsers, but not so great when it inches in just a bit on mobile views.

 

Above left: A well-positioned form. Above right: Tap a field and the browser tries to jump in … to little avail. The answer? Set fields' sizes to 16px (sometimes 18, depending on your design) in your product's CSS.

Add a dash of style

You can take text fields even further with Foundation’s built-in form classes, which help you to align form elements and their labels.

<form>
      <div class="row collapse prefix-radius">
        <div class="small-3 columns">
          <span class="prefix">Label</span>
        </div>
        <div class="small-9 columns">
          <input type="text" placeholder="Value">
        </div>
      </div>
</form>

The default style, which you can customize, looks something like this:

 

Tiny, fluid keyboards require us to rethink how users interact with our products. Smart use of <input> elements can go a long way to solving that challenge.

---