HTML 字段集：表单属性不起作用答案

【问题标题】：HTML fieldset: form attribute not workingHTML 字段集：表单属性不起作用
【发布时间】：2020-11-10 13:16:34
【问题描述】：

出于布局原因，我正在尝试创建一个 HTML 表单是单独的部分。据我了解，您可以使用带有form 属性的fieldset 将fieldset 与表单相关联，即使它不在表单内（https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset）。

但是，如果我有一个带有提交按钮或其他输入的单独字段集，它似乎不起作用。

<form id="test">
    <input name="inside-stuff" value="Inside">
    <button type="submit">Doit Inside</button>
</form>
<fieldset form="test">
    <input name="outside-stuff" value="Outside">
    <button type="submit">Doit Outside</button>
</fieldset>

在上面的 sn-p 中，我有两个提交按钮和两个输入。实际表格中的那个有效，而附件fieldset 中的那个无效。当我使用内部提交按钮时，它只提交主表单中的内容，而不是关联的fieldset 中的内容。

这在运行 sn-p 时可能并不明显，但在现实生活中尝试时确实如此。

使这项工作缺少什么？

更新 1

这个问题似乎比这更普遍。我发现关联字段集中的输入元素也没有被提交。

更新 2

这不是Submit form using a button outside the <form> tag 的副本。这个问题专门指一个 fieldset 元素。另一个甚至没有提到它。

【问题讨论】：

这能回答你的问题吗？ Submit form using a button outside the <form> tag
@cloned 谢谢，但不完全是。使用form 属性的解决方案直接在提交按钮上，而不是fieldset。
那您还需要将其添加到提交按钮吗？
@cloned 也许，但这不是违背了fieldset 上的form 属性的目的吗？

标签： html forms form-submit fieldset

【解决方案1】：

发生这种情况是因为您放置在字段集中的表单是错误的。表单应该是字段集的父级才能使其正常工作！表单标签应始终是字段集的父级。

如果您放置<form> 和<fieldset>，那么它将起作用。下面的代码应该可以。

<form id="test">
   <input name="stuff">
   <button type="submit">Doit</button>
</form>
<form>
   <fieldset>
      <input type="text" name="stuff2">
      <button type="submit">Doit</button>
   </fieldset>
</form>

我希望这会有所帮助！

【讨论】：

这基本上是 2 种形式，并不是 OP 想要的。为了做 OP 想要做的事情，他需要 Javascript 在表单之外有一个可以提交所述表单的按钮。

【解决方案2】：

我写了下面的javascript

function control() {
  function view(i) {
    var frm = items[i].getAttribute("form");
    var fBase = document.querySelector("form[id=" + frm + "]");
    fBase.addEventListener("submit",  function(){
      var fld = document.querySelector("fieldset[form='" + this.id + "']");
      var cln = fld.cloneNode(true);
      cln.style.display = "none";
      document.getElementById(frm).appendChild(cln);         
    },true);
  }

  var items = document.querySelectorAll("FIELDSET[form]");
  
  var getter = function () {
    return this.getAttribute("form"); 
  };

  for(var i = 0; i < items.length; i++) {
    view(i);
    Object.defineProperty(items[i], 'form', {
      get: getter
    });
  }
}
window.addEventListener("load",control,true);

【讨论】：