HTML5 input elements and their data formats

As a follow-up to my article on js5hf – an unobtrusive javascript method for converting text type inputs to HTML5 input types, I wanted to put together a simple example of the new HTML5 inputs to demonstrate the formats in which they output data. So…you can see my example of HTML5 input element data formats which is semi-interactive – you can enter data as you wish and view the output by submitting the form.

A summary of the output formats is (any constant elements e.g. the “W” in week inputs and the “T” in datetime inputs are bolded):

• Search: String
• Number: String/Number
• Range: String/Number
• Tel: Unsupported at present
• URL: String (Opera requires an absolute URL e.g. http://www.example.com)
• Email address: String (The Email address format checks performed are minimal to day the least)
• Date: YYYY-MM-DD
• Month: YYYY-MM
• Week: e.g. YYYY-WWW (e.g. 2010-04 is week 4 of 2010)
• Time: HH:II:SS (e.g. 23:59:59)
• Datetime: YYYY-MM-DDTHH:II:SS (e.g. 2010-04-25T23:59:59)
• Datetime-local: YYYY-MM-DDTHH:II:SS (e.g. 2010-04-25T23:59:59)

You can see a more complete specification of HTML5 input elements on w3.org.