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.

ordinarliy, I'd suggest Modernizr for this sort of thing, but it seems they haven't included a test for this one. Ho hum. — SDC
– SDC, Commented Oct 17, 2012 at 13:44
If you do manage to get a working test, consider contributing it to Modernizr. :) — SDC
– SDC, Commented Oct 17, 2012 at 13:49

Sev · Accepted Answer · 2012-10-17 14:58:25Z

6

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;
}

answered Oct 17, 2012 at 14:58

Sev

2,0221 gold badge18 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Chowlett Over a year ago

Looks promising - it chimes with what @Gaby is saying in his answer. I'll give it a go, and let you know if it works.

Chowlett Over a year ago

Initial tests are good. Needs a full bout of testing (and IE doesn't like document.childNodes[0].appendChild, since childNodes[0] is the html tag; but we can work around that!), but definitely looking good so far.

Sev Over a year ago

I had body in the place of childNodes[0], it may help.

Chowlett Over a year ago

Not perfectly; IE complains Unable to get value of the property 'removeChild': object is null or undefined when executed in the head, but succeeds if run later. In my case (Rails, which likes to include all JS in a big minified wodge), I can get around this using jQuery (not sure why); I suspect the general solution would be to ensure you invoke the test function after document ready. However, otherwise this is golden!

Sev Over a year ago

You're right it should be called after DOM is initialized, using window.onload or something similar.

Gabriele Petrioli · Accepted Answer · 2012-10-17 13:34:19Z

0

I do not think it is that easy.

According to the specs at http://dev.w3.org/html5/spec/association-of-controls-and-forms.html#attr-fae-form

The form owner must exist in order to be set to an element.
The element must be in the document in order to alter its form owner

answered Oct 17, 2012 at 13:34

Gabriele Petrioli

197k35 gold badges275 silver badges331 bronze badges

1 Comment

Chowlett Over a year ago

Aha. But this suggests a way forward. Could I add a form to the document, add a hidden input after it, and try to change the form attribute of that element? Then clean down afterwards?

Collectives™ on Stack Overflow

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

2 Answers 2

5 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related