What does the fieldset form attribute really do?

Question

I am not sure what the meaning of the fieldset form attribute is. MDN says:

This attribute takes the value of the id attribute of a <form> element you want the <fieldset> to be part of , even if it is not inside the form. Please note that usage of this is confusing — if you want the elements inside the <fieldset> to be associated with the form, you need to use the form attribute directly on those elements.

which means that the fieldset 's fields are not automatically included in the form (you have to put the form attribute on each of them if you want them to be), but the fieldset is part of the form. What does that actually mean?

The spec says:

The form attribute is used to explicitly associate the fieldset element with its form owner .

And the form owner is linked to the note

A form-associated element can have a relationship with a form element, which is called the element's form owner.

Where it ends without any explanation what relationship is supposed to be. If you are a fieldset , could you describe in well defined terms what it feels like to be in a relationship with form ?

Code to verify

<form id="myform">
    <input name="happy" value="happy">
    <button>Send</button>
</form>

<fieldset form="myform">
    <input name="unhappy" value="unhappy">
</fieldset>

The unhappy input is not sent with the form.

Answer 1

I agree, it's confusing. I made a polyfill. Comments and suggestions are welcome.

function control() {
  var items = document.querySelectorAll("FIELDSET[form]");
  
  var getter = function () {
    return this.getAttribute("form"); 
  };
  for(var i = 0; i < items.length; i++) {
  var nameForm = items[i].getAttribute("form");
    var subs = items[i].children;
    for(var j = 0; j < subs.length; j++) {
      if(subs[j].tagName == 'BUTTON' || subs[j].tagName == 'INPUT' || subs[j].tagName == 'FIELDSET' || subs[j].tagName == 'OUTPUT' || subs[j].tagName == 'SELECT' || subs[j].tagName == 'TEXTAREA') { 
        subs[j].setAttribute("form",nameForm);
      }
    }
    Object.defineProperty(items[i], 'form', {
      get: getter
    });
  }
}
window.addEventListener("load",control,true);