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

【问题标题】：What does the fieldset form attribute really do?fieldset 表单属性的真正作用是什么？
【发布时间】：2022-04-23 03:53:54
【问题描述】：

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

此属性采用<form> 元素的id 属性值，您希望<fieldset> 成为一部分，即使它不在表单内。请注意，这种用法会造成混淆——如果您希望 <fieldset> 中的元素与表单相关联，则需要直接在这些元素上使用 form 属性。

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

The spec 说：

form 属性用于将字段集元素与其表单所有者显式关联起来。

表单所有者是 linked 到注释

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

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

验证代码

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

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

unhappy 输入未与表单一起发送。

【问题讨论】：

它使整个字段集链接到该表单，因此该表单正在提交该字段集中的输入，就像您可以为input fields -> form 做相反的事情一样。这很不言自明......
@vsync 它没有 - 正如我所指出的，MDN 对此发出警告，并且在我测试时，不会发送其中的输入。
我想我明白你问的问题（你在表单外设置了一个字段，尝试提交表单，字段集中输入元素的内容不发送），但问题是措辞相当混乱。也许您可以添加一个示例 HTML 或其他内容？
@JanTuroň - 我认为有问题的关系是语义。不过，我确实觉得 <fieldset form="x">...</fieldset> 中的表单元素不会自动包含在表单中，这很奇怪。如果在提交表单时不包含这些元素，那么涉及表单和表单元素（在字段集中）的语义关系似乎没有什么意义。事实上，我认为这样的语义充其量是有问题的...... :-)
它所做的一件显而易见的事情是在
的.elements 中附加
。这有多大用处？哼哼……不是我的领域，但确实不能说……也许有人认为肯定有些用户会想要document.forms[x].elements[y].elements[z]来访问x不会发送的元素我>。哦，已经有人提议这个属性被继承到内部表单相关元素：github.com/whatwg/html/issues/3611

标签： html relationship fieldset

【解决方案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);

【讨论】：

问题是关于表单属性在字段集中的含义是什么，而不是如何将表单属性传递给字段集中的输入。 Kaiido 的评论中已部分清除。