Detect support for HTML5 <input form=""> attribute

Question

How can I check whether a browser supports the HTML5 form attribute on input elements?

Following this question, I've tried the following:

var supportForm = function()
{
  var input = document.createElement("input");
  if ("form" in input)
  {
    input.setAttribute("form", "12345");

    if (input.form == "12345")
      return true;
  }

  return false;
}

... but that gives a false negative for FireFox (14, at least). Replacing input.form with input.getAttribute("form") gives a false positive for IE 9.

Answer 1

For input elements there was a reference to the parent form before the HTML5 form reference feature and this causes this problem you mention.

I hope there is a more elegant way to check if it is supported but for now you could use the following (but it involves dealings with the DOM):

function testInputFormSupport() {
    var input = document.createElement('input'),
         form = document.createElement('form'),
         formId = 'test-input-form-reference-support';
    // Id of the remote form
    form.id = formId;
    // Add form and input to DOM
    document.childNodes[0].appendChild(form);
    document.childNodes[0].appendChild(input);
    // Add reference of form to input
    input.setAttribute('form', formId);
    // Check if reference exists
    var res = !(input.form == null);
    // Remove elements
    document.childNodes[0].removeChild(form);
    document.childNodes[0].removeChild(input);
    return res;
}