HTML5 Forms

Contact Us or call 1-877-932-8228
HTML5 Forms

HTML5 Forms

Our mobile sites will need to accept user input - registration forms, comment forms, and the like to ask users to send us, via form fields, some information. jQuery Mobile handles a good bit of this, but it's good to know about how HTML5 makes available a set of new form input types and attributes that enhance the user experience. Keep in mind that adoption for some of these new features is spotty at best; we'll cover the better implemented options.

There are 13 new input types:

  1. search
  2. tel
  3. url
  4. email
  5. datetime
  6. date
  7. month
  8. week
  9. time
  10. datetime-local
  11. number

We'll concentrate on a few of the more useful types for mobile.

Telephone

The tel type input expects a phone number. Many phones will present a numeric keyboard:

tel field

Dates

The date type of input allows the user to enter a date with no time zone. Some smartphone browsers present a date picker when a field of type date receives focus. iPhones with iOS version 5 or later, for instance, offer a date picker - earlier versions do not.

date field

Email

Fields of type email expect a valid email address. Many phones will show a contextually appropriate set of characters for input; the iPhone, for instance, displays the "@" character:

email field

Some browsers will validate the field as a valid email address.

Web Address

Fields of type url are for entering full website address. Many phones will show a contextually appropriate set of characters for input; the iPhone, for instance, displays the ".com" key:

url field

Some browsers will validate the field as a valid web address.

New Field Attributes

The placeholder attribute is among the more useful new HTML5 field attributes: it allows us to specify an example value for the field, a value which disappears when the user begins to enter content in the field.

The required attribute is very useful - but, sadly, not well-supported among mobile browsers: the automatic client-side HTML5 form validation that works on desktop browsers is lacking on their mobile counterparts.

Next