fieldset 表单属性的真正作用是什么？

Question

我不确定fieldset form属性的含义是什么。 MDN 说：

该属性采用您希望<fieldset>成为其一部分的<form>元素的 id 属性值，即使它不在表单内。 请注意，它的用法令人困惑——如果您希望<fieldset>中的元素与表单相关联，您需要直接在这些元素上使用 form 属性。

这意味着fieldset的字段不会自动包含在form中（如果需要，您必须将form属性放在每个字段上），但fieldset是表单的一部分。 这到底是什么意思？

规范说：

form 属性用于明确地将 fieldset 元素与其表单所有者相关联。

并且表单所有者链接到注释

表单关联元素可以与表单元素有关系，称为元素的表单所有者。

它结束的地方没有任何解释应该是什么关系。 如果您是fieldset ，您能否用定义明确的术语描述与form建立关系的感觉？

验证码

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

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

unhappy的输入不会随表单一起发送。

Answer 1

我同意，这很混乱。 我做了一个 polyfill。 欢迎提出意见和建议。

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