HTML5 Forms

This is a follow up on my previous post. It intends to go into greater detail about form fields in HTML 5.

Using HTML 5 Forms

Firstly webforms2 seems to have a javascript implementation so that you can use these in all modern web browsers. The library seems to be adapting itself, but should be pretty bombproof for html5 soon.

With this you can start using

<input type="email"/>
<input type="date"/>
<input type="url"/>

all immediately.

Required Fields

There are however some bonus options. I mentioned input required in my previous post – as my commenter points out – it should be:

<input required="required"/>

Bespoke Validation

There is also the neat pattern attributes which allows you to bespoke regular expression validation for a field

<input type="text" pattern="^([A-PR-UWYZ][A-HK-Y0-9][A-HJKS-UW0-9]?
[ABEHMNPRVWXY0-9]?{1,2} [0-9][ABD-HJLNP-UW-Z]{2})$" />
<!-- uk postal code -->

Placeholder

Placeholder is some text that provides a hint to the user about what to type. It isn’t the default value.  I have seen this hacked in with Javascript several times before. Its a really good nice to have feature that can be implemented really cheaply.

Javascript and Handlers

For the form level. You can now call checkValidity() on the form to check the validity of the form.

When you submit a form using submit() with a scripted-submit tag present.

Finally if you want to do bespoke validations to a form and use the built in form validation. You can set a custom validity for the field using setCustomValidity(). An empty string indicates validity, anything else indicates an error.

Joel

Performance Tuning Ajax

We were having a problem performance tuning an application. The reason, it seemed pretty quick.

It was a heavy Ajax app with YUI. But it loaded in under a second, and was nice. Refreshing the datatable with a hundred rows took 2 seconds. We worked on that took it to 0.4 seconds. The bug however remained on the bug tracker.

The solution (by way of finding the problem) was performance in IE. The solution, found by a colleague, was to specify the widths of the columns in the datatable.

Joel

Scoping Variables in Railo

Just a really quick one. I saw Andy Scott’s email about scopes and was reminded what was cool about Railo

In Railo administrator at Settings/Scope you can set the Local Scope Mode from update to always, this change how Railo use the local scope, after this change Railo write every un-scoped variable to the local scope, you no longer need the var or local. to write a variable to local scope, this makes code like this a much easier. Michael Offner-Streit

4 features of html5 to look out for

I have been keen to take a look at html 5 and I thought I would have a go.  Google have recently released an os based on it, and Microsoft are promising that Internet Explorer will (mostly) support it.

From my initial view it looks really sensible.  I hope that the browsers can get together and thrash out a solution to the video tag – it would save everyone from having to install flash, or worse still silverlight.

1) Embed other XML

HTML 5 allows for MathML and SVG elements to be used inside a document

2) New Tags

  • section represents a generic document or application section. It can be used together with the h1, h2, h3, h4, h5, and h6 elements to indicate the document structure.
    this confuses me a bit – but it seems to be to define an area of the page as a section.
  • article represents an independent piece of content of a document, such as a blog entry or newspaper article.
    On the blog home page (like this one) each blog entry would be wrapped in a <article></article> tag.  It’s likely to be well implemented by blog engines, and cms systems. Particularly if Google news will syndicate your content because its in an article tag
  • aside represents a piece of content that is only slightly related to the rest of the page.
    This is for off-topic content. Great for search engines – but I can’t see many people using this too much unless they’re really geeky
  • hgroup represents the header of a section
    Strangely named but I guess quite useful if you are keen to structure your pages perfectly.  Really useful for SEO and search engines.
  • header represents a group of introductory or navigational aids.
    Similar sounding to head, heading is for what always seems to get put in “<div class=’head’>”.  Really useful for SEO and search engines.
  • footer represents a footer for a section and can contain information about the author, copyright information, et cetera.
    The same as header, but with the footer.  Really useful for SEO and search engines.
  • nav represents a section of the document intended for navigation.
    The same as header and footer but for the navigation.
  • dialog can be used to mark up a conversation like this:
    <dialog>
     <dt> Sir if you were my husband I'd poison your tea
     <dd> Lady, if you were my wife I would drink it
    </dialog>
  • figure can be used to associate a caption together with some embedded content, such as a graphic or video:
    <figure>
     <video src="paris_hilton_vid"></video>
     <legend>un-named hotel heiress in video shame</legend>
    </figure>
    This wont hurt SEO, or Talking Browsers, and it seems to offer some nice possibilities
  • video and audio for multimedia content.
    Implementation of this is likely to be very hit and miss. Every browser seems really keen to do it absolutely differently
  • embed is used for plugin content.
  • mark represents a run of marked text.
    This is really for search results snippets where the word found is highlighted. Now the mark tag can be used
  • progress represents a completion of a task, such as downloading or when performing a series of expensive operations.
    Self explanatory, but useful.  Should not be confused with things that require the meter tag.
  • meter represents a measurement, such as disk usage.
    Nice – this will help (support:  http://html5doctor.com/measure-up-with-the-meter-tag/)
  • time represents a date and/or time.
    Another nice addition, works on the locale of the browser
  • ruby, rt and rp allow for marking up ruby annotations.
    Meh
  • canvas is used for rendering dynamic bitmap graphics on the fly, such as graphs or games.
  • command represents a command the user can invoke.
    The <command> tag defines a command button, like a radiobutton, a checkbox, or a button. The command element must be inside a menu element. If not, it will not be displayed.
  • details represents additional information or controls which the user can obtain on demand.
  • datalist together with the a new list attribute for input can be used to make comboboxes:
    <input list="browsers">
    <datalist id="browsers">
     <option value="Safari">
     <option value="Firefox">
    </datalist>
  • keygen represents control for key pair generation.
    Seems to allow for massively complicated key pair generation. I can’t think of a example use – but I’m sure there is a fabulous one.
  • output represents some type of output, such as from a calculation done through scripting.

3) New Input Types

There are mostly cool, and there are some nice hooks that you can add in with javascript (setCustomValidity).  I could write a book on these – but for the most part I’m happy to suggest using your heads and reading the documentation.

  • tel
    for entering telephone numbers
  • search
    a synonym for text, useful for the browser to keep search results, but not other fields
  • url
    a validated field for urls
  • email
    a validated entry field for email addresses
  • datetime
    a whole host of date/time pickers (nice)
  • date
  • month
  • week
  • time
  • datetime-local
  • number
    lets you choose a number
  • range
    lets you pick a number (floating point) between the minimum and maximum values
  • color
    a colour picker, nice

4) Additional Attributes

input required=true|false

this is a bonus – a really sensible and useful addition.

Summary

As you can see there are a host of nice new features. Some of the new tags you could start using now (largely they will be ignored by older browsers). Others will require browser tweaking to get them to work successfully. But I think all-round its a nice standard.

Joel

Bing Cashback Fail

So it turns out that American’s using Bings cashback service are being ripped off very-obviously.

The problem for Microsoft is not that Butterfly Photo have carefully studied the demographics, determined that Bing customers are morons, and have decided to charge them more. The problem is that the service is fledgling, it is trying to gain traction, and any small push could send it off the rails.

I really want a quality search engine to compete with Google. If all I am going to get is a money grabbing, murdoch sourced web. Microsoft can keep theirs.  Ask is better.

update:

An article at the register announced

“Bing has boosted Microsoft’s retailer revenues by nearly 50 per cent, according to a new search-ad study.”

I wonder how that happened

Murdoch and Ballmer to de-index news from Google

So News Corp went to Microsoft and offered a “de-list for cash” offer. Microsoft had previously punted the idea to someone else.

This for me is the great powerplay of to monoliths of the modern era. I wont say that its doomed to fail because; they’re both rich powerful organisations with huge resources. For me its a bit mad; would you voluntarily remove your site from Google? Would you go bing-only? Wierd.

Joel

EU Ministers agree e-goverment aims (strange)

Just saw this.

All seems far to vague.

However, the wierdest one for me was “and using ICT to improve energy efficiency in public administrations”. Not being funny – but ICT tends to be at best neutral to power usage, at worst it seems pretty detrimental.  I know that clever lighting strategies and heating strategies can reduce power requirements. Intelligent environmental sensoring can minimise power usage.  But I find it strange that using ICT to improve energy efficiency.

What do you think? can ICT improve energy efficiency? or am I just thinking inside the box?

On the plus side, at least the UK is near the top of the list for something positive. The bid to increase e-procurement presents a real opportunity for European companies.

- Joel