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