static void

HTML5 Forms

Written September 2012- specs and browser support will change!

Input attributes

(all browsers+ IE10+ )
(all browsers+ IE10+. Only triggers on submit.)
(all browsers+ IE10+ )

(all browsers+ IE10+. NB validation shows title as error message. In FF triggers on input, in Chrome and IE on submit)

Input Types

(Spinner. Just Chrome/Safari. FF from April 2014. NOT IE)
(Slider. Chrome, Safari and IE10, FF from August 2013.)
(Datepicker- also datetime, time etc). Chrome, Opera, IPhone, not FF, Safari or IE.

Localization is computer-level only (can't customize), and the value/wire format is yyyy-mm-dd which is completely different from Firefox/IE wire format. jQueryUI etc give much better control.
if (Modernizr.inputtypes.date) {
	$(':input[type="date"]').each(function () {
		this.type = "text"; //sorry, html5 input date is awkward
	});
}
All + IE10.
Suggestions. In Chrome and Firefox you must type a matching initial letter, in IE and Opera it comes up immediately.
In IE, the datalist/option cannot be self closing; Chrome and FF don't care.

New tags

<output> for output of calculations. Just like a span, really. In IE it is not self closing; Chrome and FF don't mind.

Progress control is not implemented
<progress>. Firefox and Chrome, but not IE <=10.

Javascript/ Validation

Chrome and IE triggers validation on submit. Firefox triggers pattern/email/url on change. To make IE/Chrome trigger on change, use this script (doing something other than set red borders!)

$("input").change(function () {
    $(this).parent().css("border", "0");
    //does this use html5 data constraints?
    if (!this.willValidate) return;
    //check if it is valid
    if (this.checkValidity()) return;
    //individual errors: validity.valueMissing, validityTypeMismatch etc
    $(this).parent().css("border", "1px solid red");
});