PreviousNext…

HTML5 field types (in brief)

If you’ve been following some of my recent posts on off-line apps, Web SQL and all that, you will have seen that all my mark-up snippets were in HTML5. And no doubt you have seen a lot of the brou-ha-ha around HTML5 too, and probably know that introduces some more field types and attributes.

Rather than go into a whole exposition of HTML5 (which others have already done brilliantly) I want to take a moment at some real-life applications of some of this HTML5 lark. I’ve already talked about off-line web apps and using local storage options (in the form of Web SQL), so let’s take a brief look at fields. I’ve coded a few production sites and applications so far that take advantage of the new types offered in HTML5 (specifically email, number, range and date fields), and having these expanded options in one’s arsenal is not to be sniffed-at. What I especially like in HTML5 is the in-built support for the new “placeholder” attribute. No more do we have label and Javascript onfocus() hacks (at least, not in some browsers). Instead, this wee bit of mark-up does everything we need, with the placeholder text disappearing and re-appearing as the field contents are changed (you will have seen this in my previous demo):

<label for="winklename">Your winkle’s name</label>
<input name="winklename" id="winklename" placeholder="Winkle's full name, e.g. 'Pansy Trueshell'"/>

Screenshot of placeholder feld mark-up in action

Isn’t that smashing ladies and gentlemen? Of course, it’s not (yet) all roses in the HTML5 garden: some browsers simply don’t support every bit of this emerging standard. A fine idea is to make use of something like Modernizr for feature detection, but if placeholder support is a feature you need to test for explicitly, something like this should help:

function placeholderSupport(){
  return 'placeholder' in document.createElement('input');
}

(This function returns true for sensible browsers like Safari, Chrome and Firefox, and false, predictably, for things like IE8). Now, what I really like is that by introducing new data types for fields, HTML5 also allows the easy manipulation of said fields in the app framework of your choice. So, if I want a whizzy date-picker for my date fields, or a lovely slider for my range fields, it all becomes a hell of a lot easier to apply with a decent framework. For example, here’s an HTML5 date field which is rendered using the DateBox plugin alongside jQuery Mobile:

Screenshot of datebox plugin on a date field

A corollary of these new field types is that many mobile devices support them. So, for example, if I want my mobile device’s keyboard to show an @ sign when filling in an email field, I just need to ensure the field type is set appropriately—iOS / Android / You Name It will do the rest for me. You’ve probably seen this in action yourself. So, make sure your apps play nice—mobile is crucial!

Comments

  1. IOS 5 should make allot of this better with native date time pickers for date fields as well!!Mark Hughes#

Comments on this post are now closed.

About

I’m a software architect / developer / general IT wrangler specialising in web, mobile web and middleware using things like node.js, Java, C#, PHP, HTML5 and more.

Best described as a simpleton, but kindly. You can read more here.

";